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

a GitHub account.

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

As you learned in the previous video,

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

Those websites are called project pages.

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

First, initialize a local repository for our site.

Then, add the repository to GitHub and

create a GitHub Pages branch in the repository.

Then, wait for GitHub Pages to build the site.

It usually takes no more than ten minutes.

All right, let's get started.

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

a project that's already on your computer.

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

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

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

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

courses on Treehouse.

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

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

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

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

by typing the command cd courses.

Then I'll type the command, git init.

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

Or you can use GitBash,

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

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

the courses directory.

Now if I run the command get status

it lists all my project files as untracked files.

Untracked files are files that haven't been staged or

committed to the Git repository.

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

tell it to do so.

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

using the command git add followed by a period.

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

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

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

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

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

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

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

as the commit message I'll type initial commit.

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

They're not connected to GitHub yet,

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

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

repository on GitHub.com and this will be the remote repository.

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

then I'll create a new repository.

And as the repository name I'll type courses.

So here's a helpful tip.

If you leave initialize this repository with a README unchecked,

when you click Create repository.

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

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

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

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

Once I hit enter,

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

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

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

my computer now knows about the GitHub repository.

Project pages websites show up on the GitHub domain

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

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

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

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

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

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

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

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

project page's repository.

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

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

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

your website will not display on GitHub pages.

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

switches to that branch.

So now if I run the command get branch.

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

So now I have master and gh-pages.

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

So when I created this new branch it made a copy

of all the files in the master branch.

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

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

I need to push up to GitHub using the git push command.

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

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

with those files in the remote repository on GitHub.

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

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

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

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

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

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

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

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

view the site with the GitHub page's domain.

So let's try it out,

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

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

guih.github.io/courses.

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

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

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

hosted on GitHub pages?

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

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

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

So back in the terminal, if I run the command

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

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

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

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

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

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

To view the latest changes on the GitHub domain,

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

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

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

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

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

And as the commit message,

I'll type add workshops.

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

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

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

just added to the repository.

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

All my new changes show up.