How to host a static website on S3 with custom domain

This note was created on 2024-04-03
This note was last edited 2024-04-03

=== Infrastructure configuration ===
1. Create a new S3 bucket for your static website.
2. Set "Block all public access" to "off".
3. Configure access control list (ACL): set "Everyone (public access)" to "Read".
4. Enable "Static website hosting" and note your endpoint (e.g. "http://example.s3-website.eu-central-1.amazonaws.com").
5. Configure bucket policy to allow public access:
   ~~~
   {
      "Version": "2012-10-17",
      "Statement": [
         {
               "Sid": "PublicReadGetObject",
               "Effect": "Allow",
               "Principal": "*",
               "Action": "s3:GetObject",
               "Resource": "arn:aws:s3:::example/*"
         }
      ]
   }
   ~~~
6. Order an SSL certificate in AWS ACM for your domain.
7. Create a new distribution for your website on AWS Cloudfront:
   - As "Origin domain" use S3 website endpoint, you got on step 4.
   - Select certificate, you ordered on step 6.
   - Do NOT add "Alternate domain names" at this step.
8. Wait until distribution is deployed.
9. Copy "Distribution domain name" (e.g. https://xxxxxxxxxx.cloudfront.net).
10. Add the following DNS record for your domian. For example:
    ~~~
    www.mydomain.com CNAME xxxxxxxxxx.cloudfront.net.
    ~~~
11. Return to Cloudfront and choose to edit the distribution general settings.
12. Add your domain as "Alternate domain names" ("www.mydomain.com" in the example above).
13. Done.