Skip to content

Static Web Hosting with S3, Route 53, and CloudFront

Published: at 04:17 AM

When I created my site I found that there aren’t that many end-to-end guides for hosting your own static site on AWS. There are various roadblocks and main concepts you need to know in order to link things together. Here are some notes to my future self if I have to do this again.

As always, follow the official guides for S3, Route 53, Amazon Certificate Manager, and CloudFront for the most updated information.

The general steps are:

  1. Create a S3 bucket through the S3 Console (say with the name of your site)
  2. Upload the content of the generated site to such basket. This step can be done through GitHub actions to build and push to S3.
  3. Create an HTTPS certificate through an ACM (Amazon Certificate Manager). With the DNS authentication you are required to be able to insert records to the DNS to prove that you actually own the domain.
  4. Wait for the pending validation.
  5. Create an Amazon CloudFront distribution for the domain
  6. Route DNS traffic to the CloudFront distribution.

Here are some roadblocks that I encountered along the way:

  1. Make sure the NS record for the domain you created/transfer matches the NS record registered with the Route 53 service. If this does not match the actual NS record in DNS, it can cause other issues like the ACM (Amazon Certificate Manager) not be able to register a cert as they depend on the ability to resolve a name to their registry (like ability to change the CNAME that uses the domain). The AWS interface was confusing as it said it made a change through Route 53 but since the NS record is not changed the change is not effective.

  2. Sometimes you get an error message saying the path is not found if you just connect to the URL that ends with a slash (/). Go to your S3 console → select your bucket → Properties → Static website hosting. Hit Edit and make sure the “Hosting type” is set to “Host a static website” instead of “Redirect requests for an object”.