Host a Static Website on S3

Beginner

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

Prerequisites

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