Stack Engineer

Setup a Jekyll Site on Amazon S3 with CloudFront and SSL

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.

Step 1 - Create and Configure the root Domain Bucket

From the Amazon AWS browser console, select S3 and create a bucket named yourdomain.com, under Properties enable website hosting<, set the index document to index.html, and set error document to 404.html. Then make the files readable by adding the following Bucket Policy under permissions:

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

Step 2 - Create and Configure the www Domain Bucket

To avoid duplicate content, create another bucket named www.yourdomain.com to redirect the www version of the site to the root bucket that's already made. To setup the forwarding, under static website hosting, select redirect all requests to another host name and enter yourdomain.com.

Step 3 - Purchase 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 issue the SSL certificate. Once you have been issued the certificate, we need to concatenate the certificate chain before we upload it to Amazon CloudFront. Create a new file yourdomain-chain.crt and open it with a text editor. At the top of the file, paste the contents of COMODORSADomainValidationSecureServerCA.crt. Below that paste the contents of COMODORSAAddTrustCA.crt and lastly paste the contents of AddTrustExternalCARoot.crt. This should result in your yourdomain-chain.crt containing the contents of all three CRT files in the correct order.

Step 4 - Install the Amazon AWS CLI and Upload the Certificate.

From the Amazon AWS browser console, select Identity & Access Management and create a new user domainuser. Download the credentials as they will be needed later. Under the newly created user, select the permissions tab and attach an AdministratorAccess policy. From a terminal screen, type in sudo apt-get install python python-pip and then sudo pip install awscli. After installation, type in aws configure and enter the credentials you downloaded. Make sure the all the certificate files are in the working directory, and then run

aws iam upload-server-certificate --server-certificate-name yourdomain.com --certificate-body file://yourdomain.crt --private-key file://yourdomain.key --certificate-chain file://yourdomain-chain.crt --path /cloudfront/

Step 5 - Setup CloudFront Distribution for the root Domain Bucket

From the Amazon AWS Console, select CloudFront and 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.

Step 6 - Setup CloudFront Distribution for the www Domain Bucket

Create another CloudFront distribution for the www S3 bucket. Use the correct S3 endpoint www.yourdomain.com.s3-website-us-west-2.amazonaws.com and set the alternate domain names (CNAMES) to www.yourdomain.com.

Step 7 - Create DNS Records in Route 53 and Update Your Name Servers

From the Amazon AWS browser console, select 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. Now that the DNS is setup within Route 53, update the name servers at the domain registrar to those provided by Route 53.

Step 8 - Setup Jekyll and Upload to Root S3 Bucket

This can be automated by using s3_website. For now, let's do it manually. From a terminal screen, type in jekyll new yourdomain then go into that directory and build the static site by typing in jekyll build. Now all you have to do is 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-domain 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.