← AWS Learning Projects
Beginner 2 min read

Host a Static Website on S3

Deploy a static website using Amazon S3, configure bucket policies for public access, and enable static website hosting.

Overview

Amazon S3 (Simple Storage Service) can serve static websites directly from a bucket. This project walks you through uploading your HTML, CSS, and JavaScript files to S3 and configuring the bucket to make them publicly accessible via a URL.

What You Will Learn

  • Creating and configuring an S3 bucket
  • Uploading static files to S3
  • Setting bucket policies for public read access
  • Enabling static website hosting on an S3 bucket
  • Understanding S3 URL structure

Prerequisites

  • An AWS account (free tier is sufficient)
  • Basic knowledge of HTML
  • AWS CLI installed (optional but recommended)

Architecture

User Browser → S3 Static Website Endpoint → S3 Bucket (index.html, styles.css, ...)

Steps

1. Create an S3 Bucket

  1. Sign in to the AWS Console.
  2. Navigate to S3 and click Create bucket.
  3. Choose a globally unique bucket name (e.g., my-static-site-2024).
  4. Select the AWS region closest to your users.
  5. Uncheck “Block all public access” — we need public access for a website.
  6. Acknowledge the warning and click Create bucket.

2. Upload Your Website Files

  1. Open the bucket you just created.
  2. Click Upload and add your index.html, CSS, JavaScript, and any asset files.
  3. Click Upload to confirm.

A minimal index.html to get started:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My S3 Website</title>
  </head>
  <body>
    <h1>Hello from S3!</h1>
  </body>
</html>

3. Enable Static Website Hosting

  1. Go to your bucket → Properties tab.
  2. Scroll to Static website hosting and click Edit.
  3. Select Enable.
  4. Set Index document to index.html.
  5. Optionally set Error document to error.html.
  6. Save changes.

Note the Bucket website endpoint URL shown — this is your site’s address.

4. Set a Bucket Policy for Public Read

  1. Go to Permissions tab → Bucket policy → Edit.
  2. Paste the following policy (replace YOUR-BUCKET-NAME):
{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::YOUR-BUCKET-NAME/*"
    }
  ]
}
  1. Save the policy.

5. Access Your Website

Open the Bucket website endpoint URL from Step 3 in your browser. You should see your index.html rendered.

Clean Up

To avoid any charges, delete the bucket when you are done:

  1. Empty the bucket (delete all objects).
  2. Delete the bucket from the S3 console.

Going Further

  • Add a custom domain using Route 53.
  • Put CloudFront in front of S3 for HTTPS and caching.
  • Automate deployments with GitHub Actions and the AWS CLI.