How to Use AWS S3 for Static Website Hosting

To use AWS S3 for static website hosting, create an S3 bucket named after your domain, upload your website files, enable static website hosting in the bucket properties, and set the index and error documents. Then, configure bucket permissions to allow public read access so visitors can load your site.

Syntax

To host a static website on AWS S3, you need to:

• Create an S3 bucket with a name matching your website domain.
• Upload your static files (HTML, CSS, JS, images) to the bucket.
• Enable static website hosting in the bucket settings.
• Specify the Index document (e.g., index.html) and optionally an Error document.
• Set the bucket policy to allow public read access to your files.

bash

aws s3api create-bucket --bucket your-domain.com --region 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, upload files, enable website hosting, and set a public read policy using AWS CLI commands.

bash

aws s3api create-bucket --bucket example.com --region 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 to s3://example.com/
Static website hosting enabled with index.html and error.html
Bucket policy updated to allow public read access

Common Pitfalls

Common mistakes when hosting static websites on S3 include:

• Not naming the bucket exactly as your domain name, which breaks custom domain hosting.
• Forgetting to set the bucket policy to allow public read access, causing access denied errors.
• Not enabling static website hosting in the bucket properties, so the site URL won't work.
• Uploading files to the wrong folder or with incorrect permissions.

Always verify your bucket policy and website endpoint after setup.

json

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

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

Quick Reference

• Bucket name: Must match your website domain for custom domains.
• Index document: Usually index.html.
• Error document: Optional, e.g., error.html.
• Public access: Bucket policy must allow s3:GetObject for everyone.
• Website endpoint: Use the S3 website URL to access your site.

Key Takeaways

Create an S3 bucket named exactly as your website domain for hosting.

Enable static website hosting and specify index and error documents.

Set a bucket policy to allow public read access to your website files.

Upload your static files to the bucket root or appropriate folder.

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