How to: host a static website on AWS S3 and CloudFront (2021)
This tutorial takes around 15~30 minutes, for everyone (beginners-friendly).
- Create a AWS Account: aws.amazon.com
- Go to S3 Section: https://s3.console.aws.amazon.com/s3/home
- Create a new bucket, which used as storage.
3. Then, input a unique bucket name.
- Bucket name must be unique and must not contain spaces or uppercase letters. See rules for bucket naming
4. Uncheck “Block all public access”
5. Check “I acknowledge that the current settings might result in this bucket and the objects within becoming public.”
6. You may enable bucket versioning if necessary.
7. Click “Create bucket”.
8. After created a bucket, click “View details”.
9. You can upload the files and folders now.
10. I’d recommend using Cyberduck or other softwares for better up/download experience. (IAM key and sercet required)
11. After uploaded, select the files and folder you want to publish to the public and click “Action” > “Make public”.
12. Now, click “properties” >
Scroll to bottom > “Static website hosting” > “Edit”
Enable “Static website hosting”
Hosting type: “Host a static website”
Index document means the default page of the website, e.g.: index.html
Error document means the error returned page, e.g.: 403.html
Redirection rules — optional
- leave blank or Learn more
Tap “Save changes”
Now, let’s setup CloudFront as CDN for the S3 instance
Then, tap “Get Started”.
- Select the one under — Amazon S3 Buckets — (xxx.s3.amazonaws.com)
- Origin Path, e.g.: /index.html -> /
or /public_html/index.html -> /public_html
- Enable Origin Shield (default: no) <- Extra fee if yess
- Origin ID (auto-generated, no need to change)
- Restrict Bucket Access
- Yes : users always access your Amazon S3 content using CloudFront URLs, not Amazon S3 URLs
— Origin Access Identity -> Create a New Identity / Use an Existing Identity if you created one before
- Leave default
- If you wish to use a custom domain, input it to Alternate Domain Names (CNAMEs) → Then, choose “Custom SSL Certificate” (If you don’t see any certifications, click “Request or Import a Certificate with ACM” to generate a SSL.
- Leave default, until…
Default Root Object: “index.html”
Finally, click “Create Distribution”.
After created distribution, wait for “In Progress” status changes to “Deployed”.