Static SSL website entirely on AWS

This blog is a static site generated by Hugo. I picked it for no particular reason, it just seemed like the most popular one at the time. I’m not going to talk about Hugo in this post, that will be for a later day. This will solely cover how I got SSL and CDNs and S3 buckets working nicely.

This post will explain how I got everything hosted on AWS, including:

• Registering the domain on Route 53
• SSL
• Redirects from http:// to https://
• Redirects from www subdomain to bare domain

Getting the domain

The first thing to do is to get the domain you want. I initially had my domain registered with NameCheap, but I transferred it to Route 53¹, so I could have everything in the same place.

You don’t need to do this, the only reason I did it was NameCheap can be slow with DNS updates.

S3

Next, we are going to create two S3 buckets:

1. A bucket named with the bare domain (e.g. in my case mathieuhendey.com). This is the bucket which will contain our website’s content. In this bucket’s properties, enable “Static website hosting”, and click “Use this bucket to host a website. Write down the endpoint it gives you, as you will need it later when setting up the CloudFront distribution. You can stick a simple index.html in here, for now, to make sure it’s working.
2. A bucket named with the www subdomain in front of the bare domain (e.g. www.mathieuhendey.com). All this bucket will do is redirect any requests to www.mathieuhendey.com to mathieuhendey.com. As with the first bucket, enable the “Static website hosting” property but set it to redirect requests to your bare domain using https.

Now, you have two buckets, one called website.com and one called www.website.com. www.website.com just redirects to the https://website.com.

Route 53

First, create a hosted zone which in my case would be mathieuhendey.com, i.e. sans www.

You will be adding two A Alias records. Using example.com as an example, the record set for the bare example.com should be an A Alias pointing to the S3 bucket named with the bare domain.

For the www record, it will be an A Alias record, but pointing to the www bucket.

Wait some time for DNS changes to propagate, then try visiting your URLs in a browser. Whether you try the www or bare domain, you should see your simple index.html. N.B., the www won’t work correctly at the moment as we’ve set it up to use https, but we don’t have any certificates yet.

Getting a certificate from Certificate Manager

Now open the Certificate Manager² service in AWS. Make sure you choose N. Virginia as your region. When we get to the later stage of setting up Cloudfront distributions, it won’t see your certificate if it was created in any region other than N. Virginia.

Click “Request a certificate”, then “Request a public certificate on the next screen.

Add both the bare domain and the www. subdomain.

On the next screen, choose whichever verification one you prefer. I chose DNS validation because since my domain is all managed in AWS, it involved no input from me. My certificate was ready almost instantly.

Add some tags if you want to, you don’t need to. Then click next, review everything looks correct, and request the certificates.

AWS will add some DNS records in Route 53 to verify that you own the domain, then once those records propagate your certificate will be ready to use.

Setting up CloudFront distributions

CloudFront is basically a CDN. We can use it in front of our S3 buckets and add the certificate we created earlier to get SSL, and the nice 🔒 in the address bar.

We’re going to create two distributions, one for each of our two S3 buckets.

Bare domain distribution

1. Click Create distribution, then choose the “Web” delivery method.
2. For the “Origin Domain Name”, Do not use the auto-suggested bucket name. Refer back to the endpoint you wrote down when you were creating the bucket, or double-check it in S3. It should look like http://mathieuhendey.com.s3-website-us-west-2.amazonaws.com. If you use the auto-suggested one from CloudFront’s wizard, it will not work. Don’t ask me why.
3. For Viewer Protocol Policy select Redirect HTTP to HTTPS
4. Select Compress object automatically
5. Under Alternate Domain Names enter the bare domain. I.e., for me it would mathieuhendey.com
6. Select the Custom SSL Certificate radio button. The certificate you created in Certificate Manager should auto-populate it, select it.
   1. If your certificate isn’t appearing, go back to Certificate Manager and make sure you created it in the N. Virginia region.
7. Leave Default Root Object blank. Again, I don’t know why, but it caused me issues.

www subdomain distribution

1. Click Create distribution, then choose the “Web” delivery method.
2. For the “Origin Domain Name”, Do not use the auto-suggested bucket name. Refer back to the endpoint you wrote down when you were creating the bucket, or double-check it in S3. It should look like http://wwww.mathieuhendey.com.s3-website-us-west-2.amazonaws.com. If you use the auto-suggested one from CloudFront’s wizard, it will not work. Don’t ask me why.
3. For Viewer Protocol Policy select Redirect HTTP to HTTPS
4. Select Compress object automatically
5. Under Alternate Domain Names enter the www subdomain. I.e., for me it would www.mathieuhendey.com
6. Select the Custom SSL Certificate radio button. The certificate you created in Certificate Manager should auto-populate it, select it.
   1. If your certificate isn’t appearing, go back to Certificate Manager and make sure you created it in the N. Virginia region.
7. Leave Default Root Object blank. Again, I don’t know why, but it caused me issues.

Get a tea or coffee

Now we need to wait for the CloudFront distributions to be created. This can take a while, not too long, but enough to replenish the tea supply.

When you come back, hopefully, the distributions will have created, because now it’s back to Route 53.

Changing Route 53 A aliases to point to CloudFront distributions

In the CloudFront console you should see both your distributions, along with a domain name. Just keep a note of which distribution belongs to which of your buckets because now it’s back to Route 53 to change the A records we added earlier.

Go to the Hosted zones page and select the one you created earlier, (for me it’s mathieuhendey.com).

You may see a few new records that were automatically created when Certificate Manager was doing its thing, these are fine.

Modify the record for the bare domain to point to the CloudFront distribution. It should give you a dropdown. Now do the same for the www subdomain and point it to its CloudFront distribution.

The end

And that should be it. Now, when you visit http://mathieuhendey.com, you will be redirected to https://mathieuhendey.com. And when you visit http://www.mathieuhendey.com or https://www.mathieuhendey.com, you will still be redirected to https://mathieuhendey.com.

Stay tuned for a post in which I’ll talk about Hugo, the static site generator I’m using at the moment (and which you’re reading right now).