S3 Static Website Hosting

S3 can serve a static website — HTML, CSS, JS and images — directly, with no server to run.

S3 can host a static website straight from a bucket. It is cheap, scales automatically, and needs no server.

Steps

  1. Upload your site files (index.html, assets).
  2. Enable static website hosting and set the index and error documents.
  3. Allow public read access with a bucket policy (or, better, keep the bucket private and serve it through CloudFront).

Add CloudFront for production

For HTTPS, a custom domain and global caching, put Amazon CloudFront in front of the bucket. This is the recommended pattern and keeps the bucket itself private via an Origin Access Control.

Example

Example · bash
# Enable static website hosting
aws s3 website s3://my-site-bucket/ \
  --index-document index.html \
  --error-document error.html

# Sync a local build folder up to the bucket
aws s3 sync ./public s3://my-site-bucket/ --delete

# Website endpoint:
# http://my-site-bucket.s3-website-us-east-1.amazonaws.com

When to use it

  • A marketing team publishes a React single-page application to S3 static website hosting and points a CloudFront distribution in front for HTTPS and CDN caching.
  • A developer hosts API documentation built by Swagger or Docusaurus on S3 as a static site, costing near zero for a low-traffic internal tool.
  • A startup hosts its landing page on S3 static website hosting while the product is still in development, eliminating server maintenance.

More examples

Enable Static Website Hosting

Enables static website hosting on a bucket with index.html as the root document and 404.html for missing pages.

Example · bash
aws s3api put-bucket-website \
  --bucket my-site-bucket \
  --website-configuration '{
    "IndexDocument": {"Suffix": "index.html"},
    "ErrorDocument": {"Key": "404.html"}
  }'

Make Bucket Publicly Readable

Disables S3's default public-access blocks and attaches a bucket policy that allows anonymous GET requests for website files.

Example · bash
# Disable Block Public Access first
aws s3api put-public-access-block \
  --bucket my-site-bucket \
  --public-access-block-configuration BlockPublicAcls=false,IgnorePublicAcls=false,BlockPublicPolicy=false,RestrictPublicBuckets=false

# Attach a public read policy
aws s3api put-bucket-policy \
  --bucket my-site-bucket \
  --policy '{"Version":"2012-10-17","Statement":[{"Effect":"Allow","Principal":"*","Action":"s3:GetObject","Resource":"arn:aws:s3:::my-site-bucket/*"}]}'

Upload Site and Get Endpoint

Syncs a local build directory to the bucket (removing deleted files) and confirms the website configuration is set.

Example · bash
aws s3 sync ./dist/ s3://my-site-bucket/ \
  --delete

aws s3api get-bucket-website \
  --bucket my-site-bucket \
  --query 'IndexDocument.Suffix'

Related

aws s3 introaws route53

Discussion

  • Be the first to comment on this lesson.