Host a Static Site on S3

Amazon S3 can serve HTML, CSS, JS, and images directly as a website.

Syntaxaws s3 sync ./dist s3://BUCKET-NAME --delete

S3 (Simple Storage Service) stores files in buckets. A bucket can host a static website: HTML, CSS, JavaScript, and images with no server to manage.

The steps

  1. Create a bucket with a globally unique name.
  2. Upload your built site files.
  3. Serve it privately through CloudFront (recommended) or enable public website hosting.

The modern best practice is to keep the bucket private and let CloudFront read from it. That gives you HTTPS, caching, and a real domain. The next lessons build on this bucket.

Example

Example · bash
# 1. Create a private bucket
aws s3api create-bucket \
  --bucket myapp-prod-web-2026 \
  --region us-east-1

# 2. Build your frontend (example: a Vite/React app)
npm run build   # outputs to ./dist

# 3. Upload the files, deleting anything removed locally
aws s3 sync ./dist s3://myapp-prod-web-2026 --delete

When to use it

  • A marketing team hosts their React landing page on S3 to avoid managing a web server for a site with no backend logic.
  • A documentation site is deployed to S3 on every CI build so the latest docs are always publicly available.
  • A SaaS product serves its compiled Vue.js app from S3 at a fraction of the cost of running an EC2 instance.

More examples

Create and configure S3 bucket

Creates an S3 bucket and enables static website hosting with index and error document settings.

Example · bash
# Create bucket and enable static website hosting
aws s3api create-bucket \
  --bucket my-site-bucket \
  --region us-east-1

aws s3 website s3://my-site-bucket \
  --index-document index.html \
  --error-document 404.html

Set public-read bucket policy

Attaches a bucket policy that allows any user to read objects, making the static site publicly accessible.

Example · bash
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/*"
    }]
  }'

Deploy build output to S3

Syncs the build output with aggressive caching for assets but no-cache for HTML so users always get fresh pages.

Example · bash
# Build and sync to S3, removing stale files
npm run build
aws s3 sync dist/ s3://my-site-bucket/ \
  --delete \
  --cache-control 'max-age=31536000' \
  --exclude 'index.html'

# Short cache for HTML so updates propagate quickly
aws s3 cp dist/index.html s3://my-site-bucket/index.html \
  --cache-control 'no-cache'

Related

deploy cloudfrontdeploy cache invalidation

Discussion

  • Be the first to comment on this lesson.