By the end of this chapter, you should be able to:
GitHub provides static site hosting services at no charge. You can check out the relevant documentation at GitHub Pages, but the setup is relatively straightforward.
There are two ways you can deploy a static site through GitHub Pages: you can create a user site or a project site. Each GitHub account can only have one user site, but you can have as many project sites as you want (one project site per repository you create). If your GitHub user name is username, then when you deploy your user site, it will live at username.github.io; similarly, if you have a repository called repository, you can create a project site for it that will live at username.github.io/repository.
Another big difference between these two types of sites is the branching used to deploy them. The docs do a great job of walking you through the process of setting up your static site, but here's a brief overview:
To create a user site, create a new repository on GitHub and call it username.github.io. Important: Make sure you spell your username correctly in the repository name! If there's a mismatch, the user site won't work.
Once you've created the repo on GitHub, clone it locally and create an
index.html file (don't get creative here - make sure the name of your file is
index.html). Here's one you can use to get started:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>GitHub Pages</title> </head> <body> <h1>Hello World!</h1> </body> </html>
Once you've got an
index.html, add your changes, then commit and push to master. Now when you go to username.github.io, you should see your
index.html file on full display!
Creating a user site is a great option for a personal web page, but what if you have a bunch of interesting things you've built that you'd like to share with potential employers? If you'd like to use GitHub Pages for multiple static sites, project sites are the way to go.
To see how project sites work, create a directory called
project_site. Inside of this new directory, initialize a git repository and add an
index.html file. Then, on GitHub, create a repository called
project_site and push your work up to this remote repo. (If you feel shaky on any of these steps, you should absolutely go back and review our course on Git and GitHub.)
index.html file is safely on GitHub, you're ready to create your project page. In order for project pages to work, GitHub expects the code for your project to be on a specific branch, called
gh-pages. In the terminal, let's create this branch and push it to our remote repository:
git checkout -b gh-pages git push origin gh-pages
To verify that this worked, visit username.github.io/project_site. You should see your
You can have one project site per repository, so if you want some more practice on setting up project sites, just create a clean repository and practice away.
(For more details on setting up a project site, including using some built-in templates, check out the docs.)
When you're ready, move on to BitBalloon