After trying Wordpress many times, I wanted a simpler blog platform that I had more control over. That led me to try Github Pages, a static website platform that lets you launch websites from a Github repo. It turned out much easier than expected. Just push updates to the repo, and your static website will be updated. This tutorial will walk you through that process, and how to set it up so that it will be fast for both Pingdom Speed Test and Google PageSpeed.

  • Time: Less than an hour
  • Difficulty: Easy
  • Cost: Free

TOOLING

  • Github - you’ll have a repo for your static site that must be named .github.io

  • Jekyll - Jekyll is static website generator with pages written in Markdown.

  • Markdown - Markdown is a language for formatting plain text

  • Cloudflare - Cloudflare provides distributed DNS services plus a few other services we will take advantage to speed up your static website.

SETUP YOUR DOMAIN & REPO

For this example I’ll be using my domain as the example. Just replace my domain with your own for this to work.

Everything in gray should be replaced with your own information.

1. Register a Domain Name

After registering a domain name, we will need to update the DNS records.

My domain: emilepetrone.com

2. On Github

  • Create a Github repo named: emilepetrone.github.io

Your Github Domain will be the repo name. So in this case, the default domain to my static website is: emilepetrone.github.io

  • In the repo’s settings, add a custom domain pointing to your url: www.emilepetrone.com

Two things of note:

Note: There was an option to check enforce HTTPS, I was unable to check this box on Github. We will enforce HTTPs with Cloudflare instead.

Custom Domain settings in Github

Note: Finally, Github will advise you to point your domain to your Github Pages url. We will not do that but point it to Cloudflare first.

3. On Cloudflare

Pointing your domain at Cloudflare and take advantage of their free features to enhance your site.

  • Sign up for Cloudflare, and find your Cloudflare Nameservers

Nameserver on Cloudflare

The values above are what you will then updated on your Domain with your Domain registrar.

4. On your Domain Registrar

  • You’ll take the Name Servers from Cloudflare, and update your Custom DNS settings by replacing your Name Servers on your domain with the values from Cloudflare
<somevalue1>.ns.cloudflare.com
<somevalue2>.ns.cloudflare.com

This will let you control your domain through Cloudflare and take advantage of their advanced features.

5. Back On Cloudflare

Now that your domain is pointed at Cloudflare, we will point the domain to Github.

CNAME records

  • Add a CNAME record for your Github Page domain: emilepetrone.github.io
  • Add another CNAME record pointing www at your Github Page domain

At this point, the domain may take up to 24 hours to propogate.

Local Environment

While you wait for the DNS settings to propogate, we can setup our local developement environment. This will be installing Jekyll and setting up a new Jekyll website.

Once you are in the directory of where you want this code to live on your local machine:

gem install jekyll
jekyll new <name_of_site>
cd <name_of_site>
jekyll serve

If you run into any issues, make sure Ruby is installed with

Ruby -v

and that gem is installed

gem -v

At the time of this post, I was running:

ruby 2.5.1p57 (2018-03-29 revision 63029) [x86_64-darwin17]
gem 2.7.6

Note: Within the new directory, there will be a CNAME file. It contains the domain you want a visitor to access. This file’s contents must match the custom domain name you put in your repo’s Github settings. If you make a change in either place, make sure these match.

Custom Domain settings in Github

6. Commit to your Github Repo & Deploy

Next you’ll want to push this repo.

git init
git add -A
git commit -m "First"
git remote add origin git@github.com:emilepetrone/emilepetrone.github.io.git
git push -u origin master

Note: You’ll just make sure to add the git address to your repo instead of mine provided above.

ENHANCE!

Pingdom score

Out of the gates, your site wil have a score of D on Pingdom. Let’s fix that. On Cloudflare, you have access to many free tools.

Cloudflare Toolbar

On each one of the following tabs, change the settings to the following:

Crypto

On the Crypto page, you’ll set the SSL value to full. You want your site to use SSL, and this resolves that every page is HTTPS.

Field Value
SSL Full

Speed

On the Speed page, you’ll check every field under Auto-minify. This will automatically remove free space in your pages so that pages are as small as possible, and load as quickly as possible.

Field Value
Javascript [x]
CSS [x]
HTML [x]

Caching

On the Caching page, we will set the level to standard, and the expiration to longer than 7 days. This will res

Field Value
Caching Level Standard
Browser Cache Expiration 8 days

Scrape Shield

Without turning Email Address Obfuscation off, you will see a Specify a Vary: Accept-Encoding header warning. The reason this goes off is Cloudflare will load a file to obfuscate emails that has the wrong encoding. Therefore, I just turned it off because there are not any emails I want to obfuscate on the site anyway.

Field Value
Email Address Obfuscation Off

RESULTS - A!

Pingdom score

I am not through with my frontend so the browser caching is not up to par. However overall, you are now off to the races. You’ve got a free, fast static website!