How to: host a static website on AWS S3 and CloudFront (2021)

An easy, affordable and high availability solution.

This tutorial takes around 15~30 minutes, for everyone (beginners-friendly).

Steps:

  1. Create a AWS Account: aws.amazon.com

S3

  1. Go to S3 Section: https://s3.console.aws.amazon.com/s3/home
  2. 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

Tap “Save changes”

CloudFront

Now, let’s setup CloudFront as CDN for the S3 instance

Then, tap “Get Started”.

Origin Settings

  • 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

Distribution Settings

  • 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”.

That’s all! Thanks for reading 👏

Developer, UI/UX Designer and 📽Photographer | Contact: hello@1998.media | Website: 1998.media

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store