Host Jekyll Website on AWS S3

Host Your Website Cheaply and Effectively on AWS S3

“It’s kind of cool, but kind of cheap…”

Description

Hosting Jekyll on AWS S3 should cost me between $1-5/month based on my research. This is cheaper than hosting a website on Godaddy.com. Additionally, an added benefit is that the entire content of my website can exist within a git repository. There is no database to manage. The downside is that you should use Route53 and Cloudfront in addition to just S3 for stability and to increase performance. This becomes expensive, outside of the free Tier, because Amazon charges for every single little thing. You’ll be watching the billing dashboard like a hawk, rather than focusing on the content of your website. Also, using GoDaddy DNS with Amazon S3 only allows for http, so this is purely temporary for me. I will go back to GoDaddy or hosting my website locally on a Raspberry PI 3. The following is a simplified flowchart of how the navigation works using GoDaddy DNS to point to my AWS bucket:

Flow

Specifically, from the Jekyll website, https://jekyllrb.com:

“Jekyll is a simple, blog-aware, static site generator.

You create your content as text files (Markdown), and organize them into folders. Then, you build the shell of your site using Liquid-enhanced HTML templates. Jekyll automatically stitches the content and templates together, generating a website made entirely of static assets, suitable for uploading to any server.

Jekyll happens to be the engine behind GitHub Pages, so you can host your project’s Jekyll page/blog/website on GitHub’s servers for free.”

Setup S3 Bucket

Create an AWS Account (NOTE: you may incur charges, unless you are using Free Tier services). Add a new S3 bucket and name it the same as your domain name with “www.” preceeding it. In my case, the bucket name is www.bordenit.com. Every S3 bucket requires a unique name.

Set up static website hosting on S3

Under properties, Static Website Hosting, select use this bucket to host a website. Take note of the endpoint.

Set up permissions on S3

Add the following to your bucket policy (under permissions) and replace yourdomain.com with your domain name. This should allow everyone read access to your website.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::www.yourdomain.com/*"
        }
    ]
}

Prepare Jekyll

Install Jekyll and navigate to folder where your Jekyll development environmment exists via command line and run the following command:

Jekyll build

Upload all contents of the _site folder into your S3 bucket. You do not need any other files or folders.

Do a quick test to make sure your site is accessible via the S3 bucket endpoint (URL).

Setup GoDaddy DNS

Add a CNAME DNS record named www on your GoDaddy Domain. Set the value of this CNAME record to your AWS bucket endpoint.

CNAME

Use Domain forwarding to forward yourdomain to www.yourdomain. In my case, fowarding to www.bordenit.com.

FORWARD

After your DNS has updated, navigate to your website via your domain name and you should see the contents of your website.