Github Pages hosts a static site within a Github repository and then allows Github to host the site. You can use these sites for individual projects or even as a living resume and blog (my current plan).

For more information, check Github Pages’ site.

For generating a static site, there’s plenty of tools. Really, just search ‘static site generator’ and you’ll find an abundance of tools. I decided to go with a well supported tool called Jekyll.

Jekyll Setup

Jekyll was written in ruby and was rather simple to install. If you’ve used python and virtual-env rbenv is right up your alley. It automatically manages ruby versions and switches based on a local .ruby-version file instead of local binaries like virtual-env.

Once you’ve determined if you want to install rbenv, you can follow this guide like installing ruby gems.

Next we’ll install jekyll and bundle gems.

gem install jekyll bundler

And initialize a new static site ‘My Blog’

jekyll new myblog

This will create a folder with everything we need inside of it.

cd myblog

Once inside, you can generate or build the site with

bundle exec jekyll build

Alternatively, if you want to host the site locally with the added benefit of hot-reloading

bundle exec jekyll serve

When building, this will generate the _site folder. This is where all the static files will be placed, so that we can serve them in the future.

Putting it All Together

So, the way Github Pages works is that it pulls from the master branch of the user’s user.github.io repository and serves that on a web server. Since we’re using a static site generator we need to host the source/template files on another branch.

The cleanest way that I’ve seen and will suggest, is to put the source files onto a source branch and then put the generated _site folder onto the master branch.

When initializing the new jekyll site, make sure that a .gitignore file is created with the folder _site added to it. This will allow us to not track the generated site and initialize another git repo within the folder.

Basically, within the myblog folder

git init
git remote add origin https://github.com/user/repo.git
git checkout -b sources
git add *
git push origin sources

Then, within the myblog/_site folder

git init
git remote add origin https://github.com/user/repo.git
git add *
git push origin master

Anyway, once that is setup you can locally make any edits to the site on the sources branch and push them as needed. When you want to actually update the site on Github Pages, push the generated _site folder to the master branch from within the folder.