Simple Static Website

Create a simple, cheap, CDN backed, static website using a single AWS CloudFormation script. Perfect for sites built using static site generators e.g. Gatsby, Hugo, 11ty; stateless React apps; or just plain old HTML, CSS, and image files.

Instructions

1. Register a domain in AWS here

2. Created a Hosted Zone for that domain in Route53

3. Create a new CloudFormation stack using the simple-static-website.yaml template. This MUST be done in us-east-1 owing to constraints with CloudFront.

4. Provide the parameters:

   • DomainName
   • WebsiteName
   • HostedZoneId (using the console, a list will be provided)
   • BucketName (Optional), if you want to use an existing bucket. CloudFormation will generate the bucket name from the URL subdomain, if left empty.

5. Provision the CloudFormation stack using the console or with awscli:

   aws cloudformation deploy \
       --stack-name foo \
       --template-file simple-static-website.yaml \
       --parameter-overrides \
           DomainName=example.com \
           HostedZoneId=ABCDEFGHIJK0123456789 \
           WebsiteName=www
   

6. Put a simple index.html file in the newly created S3 bucket. Check CloudFormation output of the stack for a sample awscli command.

7. Visit your new website at the domain you provided. See CloudFormation outputs for URL.

Error Page Handling

The CloudFormation template configures CloudFront to serve a custom error page for better user experience. You should include a 404.html file in your S3 bucket as part of your static site content.

Note: Both 403 and 404 errors from the origin are served as 404 responses to users. This is because S3 returns a 403 (Forbidden) error for missing objects when accessed through CloudFront with Origin Access Control (OAC), rather than a 404 (Not Found). The custom error page configuration handles both cases by serving your 404.html file.

A note on using a Content Distribution Network (CDN)

Remember that the CloudFront CDN will cache your website at several locations around the world. If you change your site, you will have to invalidate the cache. Charges apply, but on the whole this is an extremely cheap setup because it doesn't run any servers.

Acknowledgements

This script was inspired by Alain Seng's excellent blog post, as well as the output of my existing manually provisioned sites run through Amazon's now defunct CloudFormer template. CloudFormer is an excellent tool, however, it has been swept under the carpet by Amazon owing to the increasing number of CVEs the solution left users open to. There's a good write up by karimelmel about this here. Thanks to eisenhowerj for improving my CloudFormation script, and adding new features.