James Cridland

Setting up a (secure) static website using Amazon S3 and Amazon Cloudfront in 2023

Want to make a static website, using Amazon S3 - and you’d like it secured and given proper HTTPS from Amazon Cloudfront? And you don’t want to expose the S3 bucket to the world? Here’s how to do it (rather, if we’re being explicit about it, this is how to set the permissions right so it actually works).

Create an S3 bucket

Keep all the settings at default for now. Specifically:

  • Leave “object ownership” as the default ACLs disabled
  • Keep “block all public access” selected

Create a Cloudfront distribution

Select “origin domain” from the dropdown. It’ll look like bucketname.s3.region.amazonaws.com

For “origin access”, choose “origin access settings”. Click “create control setting”, accept the defaults, and click “create”.

Leave “Origin Shield” as off, by the way: it gives you no advantage for an S3-hosted bucket.

Leave “default cache behaviour” in its defaults; leave the WAF settings off.

Under “settings”:

  • Add an additional domain name (CNAME) - it’s your website domain, like example.com
  • Choose “request certificate” in the next bit, to be taken to a page to give you that. (You’ll need to create some DNS records). Once it’s issued, close that extra tab
  • Refresh the dropdown for custom SSL certificate, then choose that nice new one.
  • Add HTTP/3 support because why not
  • Add the default root object of index.html (no backslash)
  • Keep IPv6 on; and then create the distribution.

Update the S3 bucket policy

You’ll get a big yellow banner asking you to update the S3 bucket policy.

  • Copy the policy to your clipboard using the button. THEN, follow the link to S3 bucket permissions.

  • Go down to “Bucket Policy” and hit ’edit’, then paste in the new policy into the window. Save those changes.

Go back to your Cloudfront tab and hit refresh. Behold, the yellow banner has disappeared.

Do the DNS for the Cloudfront distribution

Go into Route 53, and create a record by clicking “alias” -> alias to Cloudfront distribution -> choose the distribution. Your new Cloudfront distribution should show.

Then do it again, changing “A” to “AAAA” for the IPv6 version.

(You’d have thought this would be automated somehow by AWS, but no).

Put some HTML into the S3 bucket

You’ll want to call it index.html - though you can frankly get away with just writing “hello world” into a file and saving it.

Visit your website including the /index.html and it should work nicely.

Hurray?

Previously...

Next...