How to host static website on S3 in aws

AwsHow-ToBeginner · 4 min read

How to Host a Static Website on AWS S3: Step-by-Step Guide

To host a static website on AWS, create an S3 bucket named after your domain, upload your website files, and enable Static website hosting in the bucket properties. Then, set the correct bucket policy to allow public read access so visitors can view your site.

📐

Syntax

Hosting a static website on AWS S3 involves these main steps:

Create an S3 bucket: The bucket name should match your website domain.
Upload website files: Upload your HTML, CSS, JS, and other static files.
Enable static website hosting: Configure the bucket to serve files as a website.
Set bucket policy: Make the bucket content publicly readable.

bash

aws s3api create-bucket --bucket your-domain.com --region us-east-1 --create-bucket-configuration LocationConstraint=us-east-1

aws s3 cp ./website-files/ s3://your-domain.com/ --recursive

aws s3 website s3://your-domain.com/ --index-document index.html --error-document error.html

aws s3api put-bucket-policy --bucket your-domain.com --policy '{"Version":"2012-10-17","Statement":[{"Sid":"PublicReadGetObject","Effect":"Allow","Principal":"*","Action":["s3:GetObject"],"Resource":["arn:aws:s3:::your-domain.com/*"]}]}'

💻

Example

This example shows how to create a bucket named example.com, upload files from a local folder ./site, enable website hosting with index.html as the homepage, and set a public read policy.

bash

aws s3api create-bucket --bucket example.com --region us-east-1 --create-bucket-configuration LocationConstraint=us-east-1

aws s3 cp ./site/ s3://example.com/ --recursive

aws s3 website s3://example.com/ --index-document index.html --error-document error.html

aws s3api put-bucket-policy --bucket example.com --policy '{"Version":"2012-10-17","Statement":[{"Sid":"PublicReadGetObject","Effect":"Allow","Principal":"*","Action":["s3:GetObject"],"Resource":["arn:aws:s3:::example.com/*"]}]}'

Output

Bucket created: example.com Files uploaded: 10 Website hosting enabled with index.html Bucket policy set to public read

⚠️

Common Pitfalls

Common mistakes when hosting a static website on S3 include:

Not naming the bucket exactly as your domain name, which can cause URL mismatches.
Forgetting to set the bucket policy to allow public read access, resulting in access denied errors.
Not enabling static website hosting in the bucket properties, so the site won't serve correctly.
Uploading files to the wrong folder or with incorrect permissions.

json

Wrong bucket policy example (no public access):
{
  "Version": "2012-10-17",
  "Statement": []
}

Correct bucket policy example (public read):
{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": ["s3:GetObject"],
      "Resource": ["arn:aws:s3:::example.com/*"]
    }
  ]
}

📊

Quick Reference

Summary tips for hosting static websites on S3:

Bucket name = your website domain (e.g., example.com)
Upload all static files (HTML, CSS, JS) to the bucket root
Enable static website hosting and set index and error documents
Set bucket policy to allow public read access
Use the website endpoint URL to access your site (shown in bucket properties)

✅

Key Takeaways

Name your S3 bucket exactly as your website domain for proper URL mapping.

Enable static website hosting in the bucket settings to serve your files as a website.

Set a bucket policy that allows public read access to make your site accessible.

Upload all your static website files to the bucket root or configured folder.

Use the S3 website endpoint URL to access your hosted static website.