Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Creating a Project Pages Site

9:52 with Guil Hernandez

Learn how to host a Project Pages site on GitHub Pages. With Project Pages, each repository in your GitHub account can have its own website.

Teacher's Notes
Video Transcript
Downloads

Further reading

UPDATE – Renaming the default branch from master to main

Resources

Video review

Project Pages websites show up on the GitHub domain only if they're stored in a special 'gh-pages' branch of the project repository.
The 'gh-pages' branch is for the GitHub pages website only; it's where you push any changes that you want to appear on your site.
Project Pages sites are served under a subpath that matches a repository's name.
The URL for a Project Pages website looks like this: guilh.github.io/courses — the username, followed by the GitHub pages domain and the repository name.

Before you can begin hosting your website with GitHub pages, you need to sign up for 0:00

a GitHub account. 0:04

It only takes a few minutes to sign up and it's free to use for public projects. 0:05

As you learned in the previous video, 0:09

each repository in your GitHub account can have its own website. 0:11

Those websites are called project pages. 0:14

To create a project pages website, we'll need to follow these four steps. 0:16

First, initialize a local repository for our site. 0:21

Then, add the repository to GitHub and 0:25

create a GitHub Pages branch in the repository. 0:27

Then, wait for GitHub Pages to build the site. 0:31

It usually takes no more than ten minutes. 0:33

All right, let's get started. 0:36

First, I'm going to teach you how to create a local git repository for 0:39

a project that's already on your computer. 0:43

To learn more about the git concepts and commands we're about to use, 0:45

be sure to check out the links in the teacher's notes. 0:48

So inside my computer's home directory I have a project folder named courses. 0:51

This is a simple web page I created that displays some of my recent front-end 0:57

courses on Treehouse. 1:01

So I want to create a local git repository for this project so 1:03

I can then host it on GitHub pages for free as a project pages site. 1:07

So at first, to initialize a new git repository on my computer, 1:13

I'm going to navigate to my courses project directory using the Mac terminal, 1:17

by typing the command cd courses. 1:22

Then I'll type the command, git init. 1:26

Now if you're on Windows, you can open the command prompt and type the same commands. 1:30

Or you can use GitBash, 1:34

a command line utility you can install when you install Git for Windows. 1:36

So the git init command creates a git repository on my computer for 1:40

the courses directory. 1:46

Now if I run the command get status 1:48

it lists all my project files as untracked files. 1:53

Untracked files are files that haven't been staged or 1:57

committed to the Git repository. 2:00

Git won't include these files in the repository unless we explicitly 2:02

tell it to do so. 2:06

Forget to start tracking these new files, I need to add them, 2:08

using the command git add followed by a period. 2:11

Once I hit Enter, it adds all the files in my directory to my staging area. 2:16

Now the staging area is where Git gathers any new or updated files in one place, 2:21

so that they're ready to go when I want to store them in my Git repository. 2:28

If I run git status again, I'm able to see that the new files are now tracked and 2:32

staged, so all the files listed in green are the actual files in staging. 2:38

So now, to commit these staged files to my local git repository, 2:44

I'll write the command git commit -m, and 2:49

as the commit message I'll type initial commit. 2:53

So now, all my new files are stored in my local repository on my computer only. 3:01

They're not connected to GitHub yet, 3:07

in fact, GitHub knows nothing about these files right now. 3:08

So, the first step to connecting this repository to GitHub is to create a new 3:12

repository on GitHub.com and this will be the remote repository. 3:16

In my GitHub account I'll click the repositories tab, 3:21

then I'll create a new repository. 3:25

And as the repository name I'll type courses. 3:29

So here's a helpful tip. 3:35

If you leave initialize this repository with a README unchecked, 3:36

when you click Create repository. 3:41

The next page will give you all the information you need to connect 3:44

your computer to this new remote repository, and push all your files to it. 3:47

So I wanna push an existing repository from the command line. 3:53

So if I copy these commands here and paste them in the terminal. 3:58

Once I hit enter, 4:06

Git pushes the files from my local repository to my remote GitHub repository. 4:07

So now if I click on my repository link, all my websites code 4:13

is up on get hub, associated with my local project folder and 4:18

my computer now knows about the GitHub repository. 4:23

Project pages websites show up on the GitHub domain 4:26

only if they're stored in a special branch of the project repository. 4:29

In Git, branches let you work on multiple versions of your code at one. 4:33

For example, you can have a main branch for your current website and another 4:38

branch to test out a new design or new features you're still experimenting with. 4:41

Right now I only have one branch in my repository, the master branch. 4:46

This is the main project branch so next I need to create a new branch for GitHub 4:50

pages and anything I push to that branch will appear in the GitHub.io domain. 4:55

So I'm gonna create the new branch on my computer first then push it to this 5:01

project page's repository. 5:06

To create the new branch I'm going to bring up the terminal and 5:08

type the command git checkout- b following by gh-pages. 5:14

When hosting project pages the branch needs to be named gh-pages or 5:20

your website will not display on GitHub pages. 5:26

So this command creates a new branch in my local repository named gh-pages and 5:29

switches to that branch. 5:35

So now if I run the command get branch. 5:38

It shows me that the new gh-pages branch is on my computer. 5:41

So now I have master and gh-pages. 5:45

And the start and green color tells me the branch I'm currently on which is gh-pages. 5:49

So when I created this new branch it made a copy 5:55

of all the files in the master branch. 5:58

So if I run the command LS it lists the directories and files inside the branch. 6:00

Now, the new gh-pages branch is on my local machine only. 6:08

I need to push up to GitHub using the git push command. 6:12

So, back in the terminal, I'll type git push origin gh-pages. 6:17

This not only pushes the files to GitHub, but it also creates a new gh-pages branch 6:28

with those files in the remote repository on GitHub. 6:33

So if I go back to my courses, GitHub repository and 6:36

click this branch drop-down menu, I'm only seeing the master branch. 6:40

But when I refresh the page, I'm able to see the new gh-pages branch. 6:45

So now, this new branch is for my GitHub page's website only. 6:54

It's where I need to push any changes that I want to appear on my site So once 6:59

you push the GH pages branch to GitHub, it starts building the GitHub page's website 7:05

and your website will be available to view on the GitHub page's domain, GitHub.io. 7:10

So as I mentioned earlier, it usually takes no longer than ten minutes to 7:15

view the site with the GitHub page's domain. 7:19

So let's try it out, 7:21

project pages sites are served under a sub path that matches a repository's name. 7:23

So, the URL for my website will look like this. 7:29

guih.github.io/courses. 7:32

So my user name followed by the GitHub pages domain and the repository name. 7:39

So great, it worked, my site's now hosted via GitHub pages. 7:46

So now what if you want to make changes to your project page's website 7:52

hosted on GitHub pages? 7:56

Well, making changes and pushing them up to GitHub pages is simple. 7:58

First, you make your changes in your local project repository, then you push those 8:02

changes to the gh-pages branch of your project pages repository. 8:06

So back in the terminal, if I run the command 8:11

git branch it tells me that I'm still on my gh-pages branch. 8:15

So, great, because this is where I want to make my changes. 8:19

So now I want to add a few new Treehouse workshops to my site. 8:22

So I'll open up my website project files in Sublime Text. 8:28

Then I'll simply paste in some new code that displays those new workshops. 8:32

Okay, so now I'm ready to publish these changes on GitHub Pages. 8:38

To view the latest changes on the GitHub domain, 8:43

I need to push them up to the gh-pages branch on GitHub. 8:46

So back in the terminal, if I run a git status, 8:50

I'm able to see the untracked changes in the project, so the index.html file. 8:55

So now I'll need to add these changes by typing git add followed by a period. 9:00

And now to commit the file, I'll type the command git commit -m. 9:07

And as the commit message, 9:15

I'll type add workshops. 9:20

Finally, to push these changes to the remote gh-pages branch, 9:24

I'll type the command git push origin gh-pages. 9:29

So, now in my gh-pages branch I can see that the latest changes were 9:37

just added to the repository. 9:42

So if I go back to my site and refresh the browser, great. 9:46

All my new changes show up. 9:51

You need to sign up for Treehouse in order to download course files.

Sign up