Jekyll, Github Pages, and Cloudflare for PageSpeed Win

If you want your site to be found, you need your site to be fast. Google has indicated that sites with faster performance do better in search results. Just recently, they started testing a “Slow” warning tag for heavy sites in search results.

It’s far too common, however, for developers and clients to rely on tools, but slow down site performance:

  • heavy CSS frameworks
  • uncompressed JS libraries
  • cheap shared hosts
  • server-reliant page renders

This article is an explanation of my journey from a WordPress site on a shared host. Despite avoiding heavy frameworks and libraries, I still never got past mid-80s (out of 100) on Google Page Speed score.

I changed to a Jekyll site hosted on GitHub Pages, behind CloudFlare’s CDN, and now have a Google Page Speed of 99/100. Here’s how:

James_screenshot

Jekyll

jekyll-home

Jekyll is flat file site generator. It allows you to save posts as markdown or HTML files, then its engine uses a theme (based on Liquid) to build fully-compiled HTML views for all the pages in your site.

This is a huge win for page speed over a site based on PHP/MySQL (or another server-side template and database CMS). Every time a PHP/MySQL CMS displays a page, the server queries the database, gives content (if found) to the templating engine, then generates HTML which is delivered to the user.

Granted, the server is a computer that normally does this very quickly, but a flat-file site provides a speed boost by removing these steps entirely.

Getting Started

Jekyll is a Ruby gem that you’ll install via command line with the following commands:


$ gem install jekyll

$ jekyll new site

If you haven’t installed Ruby (a requirement for Jekyll), you’ll find instructions here. This Jekyll help page will walk you through installing and setting up a new Jekyll site.

All the config options for your site live in _config.yml in the root of the folder that the jekyll new mysite command created. If you open it, you’ll see the following default code:


# Site settings
title: Your awesome title
email: your-email@domain.com
description: > # this means to ignore newlines until "baseurl:"
  Write an awesome description for your new site here. You can edit this
  line in _config.yml. It will appear in your document head meta (for
  Google search results) and in your feed.xml site description.
baseurl: "" # the subpath of your site, e.g. /blog/
url: "http://yourdomain.com" # the base hostname & protocol for your site
twitter_username: jekyllrb
github_username:  jekyll

# Build settings
markdown: kramdown

You’ll want to change most of those things:

  • Title
  • Your email address
  • Description
  • Baseurl (maybe)
  • URL
  • Twitter username
  • GitHub username

Once you’ve customized the site variables in _config.xml, you’re ready to start adding content.

Adding Content

You’ll put new posts in the _posts folder. You can see the file naming convention in the post that Jekyll automatically created there for you:


YYYY-MM-DD-post-slug.md

By default, Jekyll will use that date and that slug to create a permalink to your post. If you create a file called 2015-02-22-using-jekyll.md, Jekyll will convert that file to a full HTML page at [your-site.com]/2015/02/22/using-jekyll.html.

If you had a WordPress site you’re converting to Jekyll, this exporter will be a big help to you. It’ll create all the markdown files you need, preserving your old WP permalinks, and bringing all the necessary media attachments from /wp-content/uploads.

Building Your Site

In the folder that contains your _config.xml file, run the command jekyll build. This will process all of your markdown files with your theme and build a full site in the _site/ directory.

If you want to test the site locally, run


$ jekyll serve 

instead, then go to http://localhost:4000 in your browser to use your site.

GitHub Pages

GitHub offers automatic hosting for Jekyll sites. If you don’t have a GitHub account, you can create a free account here.

github-join

Setting up GitHub Repo

Once you’ve created a GitHub account, create a new repository for this site to live in.

new-repo

I’d recommend choosing the “Initialize this repository with a README” option. Click “Create repository” and you’ll be taken to a page that shows you an overview of the whole repo. This tutorial will walk you through connecting your local folder to that GitHub repo.

Once that’s done, GitHub will publish your site automatically from your_username.github.io. In order to add your own domain to that site, you’ll need to add a file called CNAME (all caps, no extension) to the root of your repo. That file should contain one line: your domain (no protocol, just the domain).

Then set your DNS to point to GitHub: you can do that with either A or CNAME records.

Pushing new content

As you write new content, you’ll create posts in your local _posts folder. To publish those posts to your GitHub site, you’ll follow the following steps:


$ git add .
$ git commit -m 'message about which post you published'
$ git push origin master`

The new page will be added automatically to your GitHub Pages site. GitHub serves these pages much more quickly than any shared host I’ve ever used: another big performance win!

CloudFlare

CloudFlare is the last piece of this puzzle. You can set up a free account at cloudflare.com/sign-up. CloudFlare acts as both a DNS host and a proxy for your site. They provide several CDN and minification tools to speed up this site even more.

Adding a domain to CloudFlare

Once you’ve created your account, add the domain you want to use in the large “+Add website” field at the top of the page. It’ll take a moment to scan the web and import all existing DNS records for that domain. When CloudFlare is done scanning, you’ll be given instructions for pointing your domain at CloudFlare’s DNS host servers.

Configuring minification & caching

Once the domain is successfully being run by CloudFlare, you can edit its CDN and minification settings. The domain will now appear in the list of “My websites” – click the gear icon at the far right of that row, then choose “CloudFlare settings”.

On the settings page, go to the “Performance setting” tab. I recommend the following settings:

  • Performance profile: this will change by itself
  • Individual performance settings: Aggressive
  • Minimum expire TTL: 24 days
  • Auto Minify (Web optimization): select all (JS, CSS, HTML)
  • Rocket Loader: off
cloudflare

Conclusion

Now you have a flat-file website, automatically generated by Jekyll, hosted at lightning-speed by GitHub Pages, and optimized by CloudFlare. What kind of Page Speed gains have you seen? Please share before/after numbers in the comments!

James Steinbach

James is a Senior Front-End Developer with almost 10 years total experience in freelance, contract, and agency work. He has spoken at conferences, including local WordPress meet-ups and the online WP Summit. James's favorite parts of web development include creating meaningful animations, presenting unique responsive design solutions, and pushing Sass’s limits to write powerful modular CSS. You can find out more about James at jamessteinbach.com.