Hosting on Github Pages

Objectives

• Understand some of the benefits of hosting on Github Pages
• Create a Github page using the automatic generator
• Create a Github page manually (using your own HTML/CSS/JS)

Deploying your web application using Github Pages

Why?

• It's free
• It's a quick and easy deployment option for front-end applications with no server-side code.
• Links you to a community of other developers through Github

Pages gone Viral

• Probably the most well-known front-end app hosted on Github Pages: 2048
• Read more about the game and the Italian developer, Gabriele Cirulli)
• If you're ever bored and want to make your own 2048, you can fork Gabriele's game.

Setup Your Main Page

We'll start by creating a site at username.github.io. This repo contains HTML, JS and CSS that acts as your GitHub Pages homepage. Note that this is really handy for creating a portfolio, and you can even buy and setup a custom domain later.

Follow instructions on Github Pages to initialize GitHub Pages in your GitHub account.

1. Create a new repository named username.github.io where username is your GitHub username.
2. Clone the new repo to your computer git clone https://github.com/username/username.github.io
3. Change your directory to the repo cd username.github.io
4. Create a simple Hello World homepage: echo "Hello World" > index.html
5. Add new files, commit the change, and push the repo.

git add -A
git commit -m "Initial commit"
git push -u origin master

1. View the now-hosted page! http://username.github.io.

Any changes made to your homepage can be done directly in the master branch.

Using other repos with GitHub Pages

Github Pages works by serving HTML/CSS/JavaScript files that live in a separate branch.

Think of a branch as a separate "timeline" for your code. It can represent a set of different commits. We've been dealing with the master branch so far, but now we'll introduce a new branch for deployment called gh-pages. This branch is necessary to deploy to Github Pages, with the exception of your homepage.

1. Choose an existing repo that you want to host on GitHub Pages.
2. Checkout that repo on your local machine.
3. Make sure you're on the master branch: git checkout master
4. Create the special gh-pages branch: git checkout -b gh-pages

Add the files you want to deploy, if necessary:

git add index.html
git add css/*
git add js/*
...

Then, commit and push the local gh-pages branch up to Github:

git commit -m "Deploying the first version of my project"
git push -u origin gh-pages

Now go to your page at http://[your Github user name].github.io/[repo name]

Deploying subsequent changes to Github Pages

When working on your project, your changes are committed to the master branch. On your homepage, changes are also committed to the master branch. But in any other repo other than your homepage, your public site needs to live on a separate branch, gh-pages. So if you want changes to be displayed live, you'll have to merge the changes made in master to gh-pages.

Let's say I made two commits on master and I'm ready to deploy those changes. First, checkout the gh-pages branch.

git checkout gh-pages

Then merge the changes from master.

git merge master

Once you run the merge command, a text editor may pop up. Verify the commit message and save the file.

Awesome, now push your local changes up to Github by running git push