QUESTIONS?

Updates & insights on all things CDN

Supercharge your site with Jekyll, S3 and MaxCDN

Jekyll CMS + S3 + MaxCDN

This is a guest post by Kyle Rush, who is the the Deputy Director of Frontend Development at Obama for America. He specializes in optimizing web apps for performance, conversions and user experience.

The stack

  • Jekyll (CMS) for static site generation
  • Amazon S3 for origin server
  • MaxCDN as CDN/edge server

The numbers

HTML download times over cable connection (measured with webpagetest.org):
  • Dulles, USA - 113ms
  • Los Angeles, USA - 238ms
  • London, UK - 278ms
  • Tokyo, JP - 432ms
*Average of five requests per location. Full results here.

Overview

The link between high performance web sites and conversion rates has been well established in the corporate and non-profit world. While the results from each organization vary, the overall trend is clear that hundreds of milliseconds could be costing you a lot. For example, A Yahoo! study showed that a 400 milliseconds slowdown dropped full-page traffic by 5-9%. On the Obama campaign we made our donate pages 60% faster and got a 14% increase in donation conversions. You might assume that making your website faster is a big, expensive task, but in many cases it is actually easy and affordable. With Jekyll (CMS), S3 (origin server) and MaxCDN (edge server/CDN) you can be amongst the fastest websites on the internet with not much time or cost. In this post I’ll walk you through supercharging your website for performance.

Jekyll (CMS)

If you haven’t taken a look at Jekyll yet, you definitely should. Jekyll is a Ruby gem that generates static HTML files of your entire site. In a recent Hacker News poll Jekyll was by far the most popular static site generator among engineers (note that Octopress is built on top of Jekyll so in this poll Jekyll is actually the first and second most popular). Jekyll is a popular option because static websites are an absolute breeze to work with from an engineering perspective. Unlike other popular CMS like WordPress and Drupal, Jekyll does not require a database or any server side code. When you take those two elements out of the equation working with your website becomes very simple to work with. Additionally, in terms of web performance, you can’t get much faster than serving static HTML files for your website (well actually you can, but we’ll get to that further down in the post with MaxCDN).

Getting started with Jekyll

If you’ve worked with a CMS before you shouldn’t have any trouble getting started with Jekyll. To install Jekyll on your machine, follow the steps on the install page. Once you’ve got it installed, read the usage and configuration documentation. Jekyll is similar to other popular CMS in that you’ll create a layout file that contains some templating language and then when you create a page or a blog post you tell Jekyll which layout to use. Jekyll uses the Liquid template language which was developed by Shopify. Liquid is very simple to learn and Shopify has done a great job of documenting it on the Liquid for Designers github wiki page. There is a large list of source examples from other sites if you find that helpful. Installing Jekyll is as easy running the following in the command line: gem install jekyll

Step 1: Create a layout

As with most CMS the first thing you’ll need to do is create a layout. This is just a simple .html file that you save in the _layouts directory. On my personal site I have one layout called default.html. Here is a public gist of how that looks. The most important thing that you want to pay attention to is the {{content}} tag. Jekyll will insert the content of your page or blog post where this tag exists.

Step 2: Create a page

Now that you have a layout, you need some content to use it. Let’s say you want to create an about page on your site. You’ll probably want this to live at /about.html so create that file in the root directory of your site. Inside the file you just need to have some simple YAML front matter to let Jekyll know to parse the file and some properties to tell Jekyll how to parse the file. Here is an example of how your about.html file might look. The first property tells Jekyll which layout to use (in this case it will use the file default.html in the _layouts directory). The other properties are arbitrary and you can go back and take a close look at my default.html layout file to see how I’m using those. Under your YAML front matter you just put the HTML of your page.

Step 3: Creating a blog

If you don’t want a blog on your site, skip this step. If you do want a blog, no problem! First create your first post in the _posts directory. This is just a simple .html file that is very similar to the page that we created above. The filename is important here though. The post file name should be prefixed with a date followed by the post title. For example: 2013-01-11-my-first-post.html. Here is an example from one of my blog posts on how yours might look. Now that you have a blog post you’ll need to output it somewhere. You can do this on any page of your site. Here is an example of the Liquid code that I’m using to output my blog posts on my homepage.

Step 4: Compiling your site

Once you get your layout, pages and posts set up and your site configured all you need to do is run the command jekyll in the command line while in the root directory of your site. When you do that, Jekyll will compile your entire site as static HTML files and output that in a folder called _site. Another great thing about this is that you can open your index page in your web browser and check out your site locally without any extra effort (no hassle of setting up a staging server! #winning). Once you’ve generated your site you’ll need an origin server to host it and that’s where S3 comes in.

S3 (origin server)

Amazon Web Services offers a lot of great products and one of them is S3. Many developers use S3 because it’s a simple, easy and affordable origin server. Most people use S3 to host static assets like JavaScript, CSS and image files, but since you now have a static site you can use it to host your static HTML files.

Getting started with S3

Step 1: Create an AWS account if you don’t already have one.

Step 2: Create an S3 bucket

Step 3: Edit permissions

By default S3 locks down the permissions on your bucket. That means no authenticated users will be able to access anything in the bucket. Since you’re hosting your entire static site here you’ll want to give everyone READ access. To do this click on “permissions” and then click “add more permissions”. For “grantee” select “everyone” and then check the “view permissions” checkbox. It’s important not to grant anything else for this grantee. If you do you are opening yourself to a big security issue so be careful. Click save.

Step 4: Enable static website hosting

In the settings of your S3 bucket you should enable static website hosting. When you enable this setting, S3 will serve the file /index.html when for a request for /. Essentially this makes it so that your users will see the same homepage if they request yourwebsite.com/ or yourwebsite.com/index.html For the index document, enter: index.html You can put whatever you want for the error document. Typically this will be your 404 page. If you haven’t created a 404 page yet, just enter: index.html

Step 5: Upload your Jekyll generated static HTML files

To do this, go to: Actions > Upload If you have a lot of files to upload you can use a file transfer client to transfer many files at once. There are a lot of file transfer clients that support S3 like Transmit (Mac - $34) and Cyberduck (Mac - free). Once all your files are uploaded to S3 you’ve successfully set up your origin server. In this instance we don’t want our users accessing our origin server so we need to set up one more server.

MaxCDN (edge server/CDN)

Now that you have your site generated by Jekyll and served by S3 you should be seeing some pretty fast performance benchmarks because serving static HTML files for your site is the almost the fastest you can get. However, you can take the performance of your site to a new level by putting MaxCDN in front of your origin server. MaxCDN increases your website performance by distributing copies of your website across many edge servers all over the world. If you only had S3 serving your site then every user in any part of the world would have to get your website data from the same S3 data center. But with MaxCDN, your site is distributed all over the world so users receive the data from a data center closest to them.

Getting started with MaxCDN

Step 1: Create your pull zone

In the control panel click “Create pull zone”. The pull zone name is arbitrary. Put whatever you want there. For Origin Server URL you want to put your S3 endpoint. You can get this by going to your S3 bucket and clicking properties and then clicking “static website hosting”. Be sure to include the http://. The Custom CDN Domain is going to be the URL that you want people to access your site at. Typically, if you own the domain kylerush.net, you’ll put www.kylerush.net. The reason people use the www subdomain is because most DNS hosts do not allow you to CNAME the root/apex domain, meaning you can’t point kylerush.net to your MaxCDN pull zone. Note: MaxCDN does not automatically allow you to create a www CNAME in order to protect their system from DDoS attacks. To enable this functionality, email MaxCDN directly and mention this blog post. The Label is also arbitrary. Enter anything you want here. You want to enable the compression setting since the whole reason we are doing this is to make your site faster. When you enable this setting MaxCDN will compress (gzip) your HTML files which gets them to the user even faster. Note that S3 does not do this automatically (you have to manually do it with S3--what a pain) so this is another performance boost you’re getting with MaxCDN and all you have to do is check a box!

Step 2: Configure your DNS

The last step is your DNS zone file to point to the new MaxCDN pull zone that you just created. This process will vary depending on your DNS host. If you don’t already have a CNAME record for www create it and point it to the “Temporary URL” in your MaxCDN pull zone. You can find that in the summary tab of your pull zone. Once you save this it may take up to 48 hours to the change to be live for everyone (your DNS host may have more information on this). Caching Keep in mind that the the MaxCDN will cache files that it receives from your origin server (in this case S3) for improved performance. This is simply so that MaxCDN doesn’t have to fetch the file from your origin server every time users request it. MaxCDN has a very easy and comprehensive web interface to control your cache. When logged into your MaxCDN control panel, click on a pull zone and then click the cache tab. You’ll see a list of all the most popular files that are cached and options to purge a single file from the cache or the entire cache. When you update a page on your site you’ll need to purge the URL from the MaxCDN cache to see it updated live. In addition to the web interface, MaxCDN provides an API to manage your cache (more on that below).

Workflow

Now that you have your site all set up, let’s add some finishing touches that will make working with your new site a breeze. I use Git for version control and GitHub (but you can use any remote Git server you want) for my remote/origin for most of my projects. Currently my workflow looks like this:
  1. Branch master in Git
  2. Edit the Jekyll templates, run jekyll
  3. Commit and push changes to remote/origin
  4. Open pull request in Github, review diff, merge pull request into master
  5. Run the deploy script
The deploy script does the following:
  1. Switches to master, pulls master
  2. Compares the diff from the two latest commits and compiles a list of changed files
  3. Uploads the changed files to S3
  4. Purges the paths for the changed files from MaxCDN
Here is a gist of the deploy script with comments on how to get it configured.

Conclusion

Getting extremely fast page load times on your site doesn’t have to be hard. With a relatively small amount of time and effort you can convert or create your site in Jekyll, host it on S3 and setup MaxCDN as the domain. This will make your site amongst the fastest on the internet. Not to mention that working with a static site will make your life much easier.
  • http://twitter.com/brandonb927 Brandon Brown

    This is a really great idea/process! :) Kinda want to try it out for myself now

    • http://blog.justindorfman.com jdorfman

      @twitter-279734274:disqus email me and I will get you a coupon to save you some money. jdorfman at maxcdn

  • http://www.facebook.com/john.lambert John Lambert

    How long does it take MaxCDN to propagate vs Cloudfront? Alot of our files change very frequently, and the 24hr. delay doesn’t much cut it for us.

    • http://blog.justindorfman.com jdorfman

      @facebook-878780262:disqus I am assuming you are referring to a Push Zone (files above 10MB). We actually got the propagation time down to 6 hours, which is still a bit of a wait. You can always contact support and they can do a force sync for you, if you need the files updated asap.

  • brucemorrison

    Any reasons you use MaxCDN over AWS Cloudfront?

    • http://blog.justindorfman.com jdorfman

      @brucemorrison:disqus MaxCDN is our sister company ;)

    • http://www.blueprintmarketing.com/ Thomas Zickell

      in my opinion Max CDN is much easier to use in addition to being a company that actually gives you support I can answer you just received from the the gentleman at NET DNA.
      If you’re thinking cloud front is faster I will only agree with you in places like Asia however if you’re really gunning for those markets you should use NetDNA as its light years faster than Amazon cloud front.

  • http://www.blueprintmarketing.com/ Thomas Zickell

    Can you do this using rack space cloud files? the reason I ask is I know multiple CDN’s play well together and while I think S3 is great there are a lot of other somewhat similar devices out there that you could do this exact same thing with. A lot of companies are following in the footsteps of Amazon and rack space I would like to see rack space being used in the same manner that way we get support for everything. Without paying $2000 a month

  • http://www.blueprintmarketing.com/ Thomas Zickell

    while I am impressed by the speed to be honest I I believe this is a great cheap way to host quickly. What bothers me is looking back at pingdom’s history everything normal like modernizer and J query are stripped from your site when they were added your site did not really blow my mind
    1.42 seconds I can do that with my WP engine account on 2.1 MB most the time under the one second but I owe that to you at WP engine and Net DNA as your CDN is pushing my site loaded with large photos and not perfectly optimized code that under second. I need to optimize this I’m going to put things in perspective here look at my sites 90 calls and I’m still at 1.4

    http://tools.pingdom.com/fpt/#!/jEtp6fpoj/http://www.blueprintmarketing.com
    your site contains nothing a regular website would contain
    http://tools.pingdom.com/fpt/#!/G3WBg1L4f/http://kylerush.net

  • http://liangpin.us/ Derek Yang

    Does it work if I use cdn.mydomain.com rather than http://www.mydomain.com as custom CDN domain? I tried but it didn’t seem working. ( http://liangpin.us/ )

    • http://blog.justindorfman.com jdorfman

      @MrDerekYang:disqus it should. Have you emailed support?

      • http://liangpin.us/ Derek Yang

        I think it’s working. I was having some confusion about how it works after I migrated from wordpress to jekyll. Thanks for getting back to me!

        • http://blog.justindorfman.com jdorfman

          NP sorry for the delay.

Increase Your Website Speed

If You Use Under 15TB/month MaxCDN is for You. It Has:

  • High Performance
  • Easy to Use Control Panel
  • Easy to Setup
  • Low Monthly Fee
LEARN MORE

Recent Posts

Compare the speed of two websites in 5 seconds.

100% Free

Start Testing
TRUSTED BY