Jekyll, Github Pages, and Cloudflare for PageSpeed Win

James Steinbach
👁️ 15,505 views
💬 comments

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.

Table of Contents

    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

    1 post

    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.