Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
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.
Resources
- Git
- GitHub
- Adding an existing project to GitHub using the command line
- Creating project pages manually
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.
Related videos
-
0:00
Before you can begin hosting your website with GitHub pages, you need to sign up for
-
0:04
a GitHub account.
-
0:05
It only takes a few minutes to sign up and it's free to use for public projects.
-
0:09
As you learned in the previous video,
-
0:11
each repository in your GitHub account can have its own website.
-
0:14
Those websites are called project pages.
-
0:16
To create a project pages website, we'll need to follow these four steps.
-
0:21
First, initialize a local repository for our site.
-
0:25
Then, add the repository to GitHub and
-
0:27
create a GitHub Pages branch in the repository.
-
0:31
Then, wait for GitHub Pages to build the site.
-
0:33
It usually takes no more than ten minutes.
-
0:36
All right, let's get started.
-
0:39
First, I'm going to teach you how to create a local git repository for
-
0:43
a project that's already on your computer.
-
0:45
To learn more about the git concepts and commands we're about to use,
-
0:48
be sure to check out the links in the teacher's notes.
-
0:51
So inside my computer's home directory I have a project folder named courses.
-
0:57
This is a simple web page I created that displays some of my recent front-end
-
1:01
courses on Treehouse.
-
1:03
So I want to create a local git repository for this project so
-
1:07
I can then host it on GitHub pages for free as a project pages site.
-
1:13
So at first, to initialize a new git repository on my computer,
-
1:17
I'm going to navigate to my courses project directory using the Mac terminal,
-
1:22
by typing the command cd courses.
-
1:26
Then I'll type the command, git init.
-
1:30
Now if you're on Windows, you can open the command prompt and type the same commands.
-
1:34
Or you can use GitBash,
-
1:36
a command line utility you can install when you install Git for Windows.
-
1:40
So the git init command creates a git repository on my computer for
-
1:46
the courses directory.
-
1:48
Now if I run the command get status
-
1:53
it lists all my project files as untracked files.
-
1:57
Untracked files are files that haven't been staged or
-
2:00
committed to the Git repository.
-
2:02
Git won't include these files in the repository unless we explicitly
-
2:06
tell it to do so.
-
2:08
Forget to start tracking these new files, I need to add them,
-
2:11
using the command git add followed by a period.
-
2:16
Once I hit Enter, it adds all the files in my directory to my staging area.
-
2:21
Now the staging area is where Git gathers any new or updated files in one place,
-
2:28
so that they're ready to go when I want to store them in my Git repository.
-
2:32
If I run git status again, I'm able to see that the new files are now tracked and
-
2:38
staged, so all the files listed in green are the actual files in staging.
-
2:44
So now, to commit these staged files to my local git repository,
-
2:49
I'll write the command git commit -m, and
-
2:53
as the commit message I'll type initial commit.
-
3:01
So now, all my new files are stored in my local repository on my computer only.
-
3:07
They're not connected to GitHub yet,
-
3:08
in fact, GitHub knows nothing about these files right now.
-
3:12
So, the first step to connecting this repository to GitHub is to create a new
-
3:16
repository on GitHub.com and this will be the remote repository.
-
3:21
In my GitHub account I'll click the repositories tab,
-
3:25
then I'll create a new repository.
-
3:29
And as the repository name I'll type courses.
-
3:35
So here's a helpful tip.
-
3:36
If you leave initialize this repository with a README unchecked,
-
3:41
when you click Create repository.
-
3:44
The next page will give you all the information you need to connect
-
3:47
your computer to this new remote repository, and push all your files to it.
-
3:53
So I wanna push an existing repository from the command line.
-
3:58
So if I copy these commands here and paste them in the terminal.
-
4:06
Once I hit enter,
-
4:07
Git pushes the files from my local repository to my remote GitHub repository.
-
4:13
So now if I click on my repository link, all my websites code
-
4:18
is up on get hub, associated with my local project folder and
-
4:23
my computer now knows about the GitHub repository.
-
4:26
Project pages websites show up on the GitHub domain
-
4:29
only if they're stored in a special branch of the project repository.
-
4:33
In Git, branches let you work on multiple versions of your code at one.
-
4:38
For example, you can have a main branch for your current website and another
-
4:41
branch to test out a new design or new features you're still experimenting with.
-
4:46
Right now I only have one branch in my repository, the master branch.
-
4:50
This is the main project branch so next I need to create a new branch for GitHub
-
4:55
pages and anything I push to that branch will appear in the GitHub.io domain.
-
5:01
So I'm gonna create the new branch on my computer first then push it to this
-
5:06
project page's repository.
-
5:08
To create the new branch I'm going to bring up the terminal and
-
5:14
type the command git checkout- b following by gh-pages.
-
5:20
When hosting project pages the branch needs to be named gh-pages or
-
5:26
your website will not display on GitHub pages.
-
5:29
So this command creates a new branch in my local repository named gh-pages and
-
5:35
switches to that branch.
-
5:38
So now if I run the command get branch.
-
5:41
It shows me that the new gh-pages branch is on my computer.
-
5:45
So now I have master and gh-pages.
-
5:49
And the start and green color tells me the branch I'm currently on which is gh-pages.
-
5:55
So when I created this new branch it made a copy
-
5:58
of all the files in the master branch.
-
6:00
So if I run the command LS it lists the directories and files inside the branch.
-
6:08
Now, the new gh-pages branch is on my local machine only.
-
6:12
I need to push up to GitHub using the git push command.
-
6:17
So, back in the terminal, I'll type git push origin gh-pages.
-
6:28
This not only pushes the files to GitHub, but it also creates a new gh-pages branch
-
6:33
with those files in the remote repository on GitHub.
-
6:36
So if I go back to my courses, GitHub repository and
-
6:40
click this branch drop-down menu, I'm only seeing the master branch.
-
6:45
But when I refresh the page, I'm able to see the new gh-pages branch.
-
6:54
So now, this new branch is for my GitHub page's website only.
-
6:59
It's where I need to push any changes that I want to appear on my site So once
-
7:05
you push the GH pages branch to GitHub, it starts building the GitHub page's website
-
7:10
and your website will be available to view on the GitHub page's domain, GitHub.io.
-
7:15
So as I mentioned earlier, it usually takes no longer than ten minutes to
-
7:19
view the site with the GitHub page's domain.
-
7:21
So let's try it out,
-
7:23
project pages sites are served under a sub path that matches a repository's name.
-
7:29
So, the URL for my website will look like this.
-
7:32
guih.github.io/courses.
-
7:39
So my user name followed by the GitHub pages domain and the repository name.
-
7:46
So great, it worked, my site's now hosted via GitHub pages.
-
7:52
So now what if you want to make changes to your project page's website
-
7:56
hosted on GitHub pages?
-
7:58
Well, making changes and pushing them up to GitHub pages is simple.
-
8:02
First, you make your changes in your local project repository, then you push those
-
8:06
changes to the gh-pages branch of your project pages repository.
-
8:11
So back in the terminal, if I run the command
-
8:15
git branch it tells me that I'm still on my gh-pages branch.
-
8:19
So, great, because this is where I want to make my changes.
-
8:22
So now I want to add a few new Treehouse workshops to my site.
-
8:28
So I'll open up my website project files in Sublime Text.
-
8:32
Then I'll simply paste in some new code that displays those new workshops.
-
8:38
Okay, so now I'm ready to publish these changes on GitHub Pages.
-
8:43
To view the latest changes on the GitHub domain,
-
8:46
I need to push them up to the gh-pages branch on GitHub.
-
8:50
So back in the terminal, if I run a git status,
-
8:55
I'm able to see the untracked changes in the project, so the index.html file.
-
9:00
So now I'll need to add these changes by typing git add followed by a period.
-
9:07
And now to commit the file, I'll type the command git commit -m.
-
9:15
And as the commit message,
-
9:20
I'll type add workshops.
-
9:24
Finally, to push these changes to the remote gh-pages branch,
-
9:29
I'll type the command git push origin gh-pages.
-
9:37
So, now in my gh-pages branch I can see that the latest changes were
-
9:42
just added to the repository.
-
9:46
So if I go back to my site and refresh the browser, great.
-
9:51
All my new changes show up.
You need to sign up for Treehouse in order to download course files.
Sign up