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
Github - you’ll have a repo for your static site that must be named
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.
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.
2. On Github
- Create a Github repo named:
Your Github Domain will be the repo name. So in this case, the default domain to my static website is:
- In the repo’s settings, add a custom domain pointing to your url:
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.
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
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
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.
- Add a CNAME record for your Github Page domain:
- Add another CNAME record pointing
wwwat your Github Page domain
At this point, the domain may take up to 24 hours to propogate.
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
and that gem is installed
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
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.
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 firstname.lastname@example.org: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.
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.
On each one of the following tabs, change the settings to the following:
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.
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.
On the Caching page, we will set the level to standard, and the expiration to longer than 7 days. This will res
|Browser Cache Expiration||8 days|
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.
|Email Address Obfuscation||Off|
RESULTS - A!
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!