Skip to content
Hosting Jekyll on Amazon Web Services

Hosting Jekyll on Amazon Web Services

Our need is to create a fast website, in as less time as possible. Time is money, and when you launch a Startup, it is a very scarce resource.

Our prerequisites:

  • Best possible response times from anywhere in our geographical market (Worldwide: USA, Europe and India).
  • An already designed website template, we are not CSS gurus, and building it from scratch takes too much time.
  • Easy to customize, it must match our graphic design with just a few modifications.
  • Maintainable, we must be able to add content quickly.
  • Can be deployed using Jenkins, our continuous integration tool.

That is why we choose to use Jekyll to create a static website deployed on Amazon Web Services (S3 and CloudFront).

Elevate your Load Testing!
Request a Demo

What is Jekyll?

Jekyll is a static website generator, primarily designed for blogging purpose. However, it is flexible enough to build different kind of websites. Guess What? OctoPerf's website is powered by Jekyll.

Static HTML template is a set of HTML pages with CSS and sometimes Javascript.

When we started building our website, we used a free raw html template. It became a mess very quickly. Needless to say, we had to find a more maintainable solution. So what else could we use?

A PHP/MySQL website made using a CMS like WordPress or Joomla, or event from scratch using Symfony?

LAMP: Linux Apache MySQL and PHP.

This kind of solution is great for frequently changing websites which require multiple updates per day. The cons of these solutions is the amount of hardware it requires: at least one machine, messing up with php scripts and database configuration.

This is way too overpowered for our needs. Our website only requires occasional updates, and must be very fast to display. Another disadvantage of PHP and database is that it is slower than static page rendering.

Static Website generator, like Jekyll or Octopress (based on Jekyll).

We choose jekyll because it allows to have "dynamic" features like templating system and separation between presentation and data, with the advantages of static websites. Jekyll generates a static website from yaml, markdown and other format files.

Installing Jekyll

Installing Jekyll on Ubuntu is as simple as this:

sudo apt-get install ruby-full
sudo gem install jekyll

Jekyll is now installed on your machine.

Running Jekyll

Let's now create an empty jekyll website:

mkdir jekyll-example
jekyll new website
jekyll serve

Browse http://127.0.0.1:4000/ to view your website. You should see the website being served by the internal Jekyll server. It allows to easily view modifications on your local machine while editing your website.

Building your website

To generate the final site that will be pushed to Amazon Web Services, just type the following command:

jekyll generate

This will generate the website under the site folder.

Amazon AWS

We are going to explain how to push Jekyll on an S3 Amazon Bucket, then how to optimize the website loading speed using Amazon CloudFront CDN.

You need to create an Amazon AWS Account for this tutorial.

Create an S3 bucket

S3 is an online file storage. S3 is the equivalent of an online hard disk drive. It's perfect for serving static websites. We won't explain how to create an S3 bucket, it's straight forward and easy.

Enable S3 Bucket Website hosting

Now that we have the generated website, it's time to upload it to an S3 bucket. The most important point is to configure your S3 bucket for static website hosting:

  • In Amazon AWS, select S3 service,
  • Click on your S3 bucket,
  • Click on Properties on the right,
  • Select Static Website Hosting,
  • Enable Enable Website Hosting with Index Document index.html.

Now enable permissions for anonymous users:

  • Click on Permissions,
  • Click on Edit Bucket Policy and put: (replace myBucket by your bucket name)
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "AddPerm",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::myBucket/*"
        }
    ]
}

Great, your S3 bucket is ready to serve your website. Copy the endpoint URL from the Static Website Hosting section.

Let's upload it now.

Custom domain with Route 53

At some time, you will want your own domain name to improve your website visibility. It will help your visitors to come back.

To do so you must:

  1. Register a domain name.
  2. Create and configure Buckets and upload data (partly done in the above steps).
  3. Create and configure Amazon Route 53 hosted zone.
  4. Switch to Amazon Route 53 as your DNS provider.

The detailed procedure to setup a static website using a custom domain name is available on Amazon documentation. It's quite easy.

Uploading your website to S3

Uploading Tools

This is the final step to go. Uploading requires an S3 client like s3cmd (command-line). It requires an Amazon AWS IAM, which is equivalent to a login / password. Create one with full access to S3.

Upload your site folder content and browse to the endpoint URL copied from last point. You should see your website online!

We were using s3cmd, but it appears that s3_website is really better. We use s3_website to upload ours now.

S3_website

S3_Website has multiple advantages:

  • Jekyll Native Support: it detects the _site folder automatically and uploads its content,
  • It supports GZip compression: it gzips the built resources, and adds the Content-encoding: gzip header to all uploaded Amazon S3 resources. This saves you a lot of money, and increases page loading speed!
  • CloudFront invalidation: it automatically invalidates the updated resources to avoid serving stale website to your visitors.

First, you need to install it: (Ubuntu)

# Skip to the next step have ruby installed
sudo apt-get install ruby-full
sudo gem install s3_website

Then, you need to configure it by creating an s3_website.yml config file. Here is a sample file:

s3_id: <AWS Access Key>
s3_secret: <AWS Secret key>
s3_bucket: octoperf.com
max_age: 86400
gzip: true
s3_endpoint: eu-west-1
# If you have CloudFront
cloudfront_distribution_id: <See Cloufront AWS console>

Now it's time to push your website to S3: 

# Specify conf dir if config not in your home folder
s3_website push --config-dir .

Improving Page Speed

Serving static html pages is fast. But, in fact, there is still headroom for improvement.

CloudFront CDN

ClouFront is a CDN (Content Delivery Network). It allows to automatically copy your website in many regions across the world, and serve them to visitors from their nearest location to a server. It may also benefit search engine ranking because page loading will be fast from every location around the world.

Create a CloudFront distribution which points to your S3 bucket:

  • Open the AWS Console,
  • Click on CloudFront,
  • Click on Create Distribution,
  • Click on Get Started in the Web section,
  • Important: put your S3 Web Host in the Origin Domain name, or you will have issues with urls ending by a folder,
  • In Alternate Domain Names (CNAMEs) field, put your domain name if you plan to have a CNAME entry in Route53 pointing to your CloudFront distribution,
  • Click on Create Distribution.

Take some time to drink a coffee, CloudFront distribution deployment is quit long.

Now create a CNAME entry for your domain pointing to CloudFront distribution:

  • Open the AWS Console,
  • Click on Route53,
  • Select the relevant hosted zone: this step supposes you already have an hosted zone with a custom domain setup on Route53,
  • Create an A entry with Alias set to Yes, and select your CloudFront distribution,
  • Save record set.

Please wait for the DNS propagation to take effect.

Now you have a static hosted Jekyll running on CloudFront, which is amazingly fast!

Optimize PNG without quality loss

A nice tool to optimize the size of PNG images with no quality loss is OptiPNG. It decreases PNG images size by 25% (average). To install it:

sudo apt-get install optipng

To optimize all images within a folder recursively: 

find -name '*.png' -print0 | xargs -0 optipng -nc -nb

Gzip compression

S3 and CloudFront are serving static resources. These resources can be gzipped to reduce bandwidth usage, which improves web page loading speed. When using s3_website tool, it's very easy, set gzip: true in your s3_website.yml file.

Checking your website speed using OctoPerf

Once your website is online, you can easily use OctoPerf to evaluate performance metrics such as connect time and response time.

OctoPerf Load Testing Tool will also let you easily detect 404 response codes to check if some resources are missing (via HTTP response code repartition pie charts). Our Media Type repartition chart is also helpful to know when your images are too large and slow down your website.

To test your webpage speed, you can use OctoPerf free tier and simulate realistic virtual users on it. Three simple steps to load test is all it needs.

Want to become a super load tester?
Request a Demo