Apple Soap

Setup a Jekyll website on Amazon S3, CloudFront, and SSL

Updated on October 06, 2019

If all you have is static pages, Jekyll with Amazon AWS S3, CloudFront, and Route 53 is a low-cost and quick way to get your website up and running. I will be using the domain name yourdomain.com in this guide, so be sure to replace that with your own domain. To avoid duplicate content, I will redirect the non-SSL website to SSL and the www version of the website to the non-www version.

Setup the SSL certificate

After purchasing a Comodo Positive SSL with ssls.com, generate a certificate signing request (CSR).

openssl req -nodes -newkey rsa:2048 -keyout yourdomain.key -out yourdomain.csr

Follow the steps from Comodo to confirm you own the domain and wait for them to issue the SSL certificate. Once you have received the necessary files, you need to import the files into the Certificate Manager. Open the files you received with your favorite text editor, and copy/paste the contents of the yourdomain.crt file to the "Certificate body" field, the contents of the yourdomain_key.txt to the "Certificate private key" field, and the contents of yourdomain.ca-bundle to the "Certificate chain" field.

Setup the S3 buckets

To avoid duplicate content, create a bucket named www.yourdomain.com to redirect the www version of the site to the root bucket that you will make soon. To setup the forwarding, under Static website hosting, select Redirect requests and enter yourdomain.com as the Target bucket and https as the Protocol.

Create an additional bucket named yourdomain.com and make sure to allow public access. Under Static website hosting, select Use this bucket to host a website, set the index document to index.html, and set error document to error.html. Copy the Endpoint address for the root bucket as you will need this when we setup CloudFront. Then make the files readable by adding the following Bucket Policy under Permissions:

{
  "Version": "2008-10-17",
  "Id": "PolicyForCloudFrontPrivateContent",
  "Statement": [
    {
      "Sid": "1",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::yourdomain.com/*"
    }
  ]
}

Setup the CloudFront distributions

Under CloudFront, select the button to create a new web distribution. Set the origin domain name to the endpoint of the non-www S3 bucket yourdomain.com.s3-website-us-west-2.amazonaws.com and viewer protocol policy to redirect HTTP to HTTPS. The alternate domain name (CNAMEs) field should be set to the root domain yourdomain.com. Choose custom SSL certificate and select yourdomain.com from the drop down. Set the default root object to index.html. You can modify other settings as you see fit. Then create another CloudFront distribution for the www.yourdomain.com S3 bucket. Use the correct S3 endpoint which would be selectable from the dropdown, and set the alternate domain names (CNAMES) to www.yourdomain.com.

Create the DNS records in Route 53

Within Route 53 and create a new hosted zone with domain name yourdomain.com. Create a new A-record with the alias set to the CloudFront distribution for the root domain xxxxxxxxxxxxxx.cloudfront.net. Create an additional A-record with a www name, and the Alias set to the CloudFront distribution for the www domain xxxxxxxxxxxxxx.cloudfront.net. You can do the same for two AAA-records (IPv6). Now that the DNS is setup within Route 53, update the name servers at the domain registrar to those provided by Route 53.

Setup Jekyll and upload the files to the root S3 bucket

This can be automated by using s3_website. For now, make sure you have Jekyll installed. Build the static site using bundle exec jekyll build and upload the contents of the "_site" folder to the S3 bucket for the root domain. Do not upload it to the S3 bucket for the www.yourdomain.com as that one has been configured for redirection. After CloudFront has deployed and the DNS changes have propagated, https://yourdomain.com will be up and running.