How to set up HTTPS for S3 static site

Posted on Mon, 12 Dec 2016 in Other

Google is using HTTPS as a ranking signal since August 2016. Amazon lets their users free certificates. This two factors forces me to find out how to set up HTTPS for my S3 blogs. The solution is to place an S3 bucket behind CloudFront.

Before start

CloudFront is a caching service. You should be patient while working with it. If you make a mistake, it takes about 20-25 minutes before changed configuration is applied.

My experience is based on setting up HTTPS for this blog. I run it with the pelican static generator. It should be a similar process for Jekyll and other generators.

Step #1. Request certificate with ACM

Go to ACM console and request a certificate. I hope you have an access to domain owner's email address. Amazon sends an email with a verification link using this address.

Note! If you are using domain.com with out www. as I do, request certificate for domain.com without "www." or "*." before it.

Step #2. Create CloudFront distribution for Web delivery

Go to CloudFront console and select "Create new Distribution".

First, it oferred you to select a delivery method. Choose Web.

Delivery method

On the second screen, select S3 bucket with website content in the Origin Domain Name. And Possible you should set "Restrict Bucket Access" to Yes. But I don't check it.

Origin domain name

Scroll down to "Default Cache Behavior Settings". Change "Viewer Protocol Policy" to "Redirect HTTP to HTTPS".

Protocol policy

In the "Distribution Settings" enter your domain name in Alternate Domain Names and choose Custom SSL Certificate (If there are no available certificates, go to Step #1).

Distribution settings

And the last thing you should do is to add "index.html" into Default Root Object.

Default root object

Now enable distribution. Make a cup of coffee. It takes about 20-25 minutes before distribution becomes ready to use.

Step #3. Change Route 53 zone.

After the distribution was deployed, change Route 53 settings. Set appropriate A record target for CloudFront distribution.

That's all. Your blog is HTTPS now.

TODO

There are a couple of things to be solved:

  1. I don't know how to set up redirects from www.domain.com to domain.com.
  2. CloudFront is a caching proxy. You have to invalidate cache after content update. I haven't found a good way to do it yet using pelican.
---
Got a question? Hit me on Twitter: avkorablev