Previous | Table of Contents | Next

{ Github Pages. }

Objectives

By the end of this chapter, you should be able to:

  • Deploy a static website to GitHub pages

Using GitHub Pages - https://pages.github.com/

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:

GitHub Pages: User Site

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!

GitHub Pages: Project Site

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.)

Once your 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 index.html file!

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

Continue

Creative Commons License