DEV Community

Ved Dandotia
Ved Dandotia

Posted on Edited on

Hosting a Static Website on AWS S3 — Step-by-Step Guide

#webdev #aws #s3 #cloud

🪣 Hosting a Static Website on AWS S3

Not every website needs a server. If your site is just HTML, CSS, and JavaScript — no backend, no database — Amazon S3 can host it directly, cheaply, and reliably. No EC2 instance, no server management, no patching.

In this post, we'll take a simple 3-file website (index.html, error.html, script.js) and host it on S3 as a public static website.

🧠 Why S3 for Static Hosting?

  • No servers to manage or patch
  • Extremely low cost (pay only for storage + requests)
  • Scales automatically — handles a handful of visitors or a viral spike the same way
  • Great for portfolios, landing pages, documentation sites, or single-page apps

🖼️ Architecture

Flow:

Browser Request → S3 Bucket (Static Website Hosting enabled)
                         │
                         ├── index.html   (default page)
                         ├── error.html   (shown on 404 / errors)
                         └── script.js    (site logic)
Enter fullscreen mode Exit fullscreen mode

✅ Prerequisites

  • An AWS account
  • Three simple files ready to upload:
    • index.html — your homepage
    • error.html — shown when a page/object isn't found
    • script.js — any JavaScript your site uses

Example minimal files, if you don't have your own yet:

index.html

<!DOCTYPE html>
<html>
<head>
  <title>My S3 Website</title>
  <script src="script.js"></script>
</head>
<body>
  <h1>Hello from my S3 Static Website!</h1>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

error.html

<!DOCTYPE html>
<html>
<head>
  <title>Page Not Found</title>
</head>
<body>
  <h1>Oops! That page doesn't exist.</h1>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

script.js

console.log("Site loaded successfully from S3!");
Enter fullscreen mode Exit fullscreen mode

Step 1: Create the S3 Bucket

  1. Go to S3 Console → Create Bucket
  2. Bucket name: must be globally unique, e.g. my-static-site-demo-2026
  3. Region: choose your preferred region (e.g., ap-south-1)
  4. Block Public Access settings: Uncheck "Block all public access" — a static website needs to be publicly readable > ⚠️ Acknowledge the warning checkbox that appears. This is expected and required for public static hosting.
  5. Leave other settings as default → Create Bucket

Step 2: Upload Your Website Files

  1. Open your new bucket → Upload
  2. Add your three files: index.html, error.html, style.css_ script.js
  3. Click Upload

Real S3 Bucket viwe, Ignore git file here not needed for the deployment

Step 3: Enable Static Website Hosting

  1. In your bucket, go to Properties tab
  2. Scroll to Static website hosting → Edit
  3. Settings:
    • Static website hosting: Enable
    • Hosting type: Host a static website
    • Index document: index.html
    • Error document: error.html
  4. Save changes

AWS will now show you a Bucket website endpoint URL (something like http://my-static-site-demo-2026.s3-website.ap-south-1.amazonaws.com) — keep this handy, you'll need it in Step 5.

Step 4: Add a Bucket Policy for Public Read Access

Even with "Block Public Access" disabled, S3 objects aren't public until a policy explicitly allows it.

  1. Go to Permissions tab → Bucket Policy → Edit
  2. Paste the following (replace YOUR-BUCKET-NAME with your actual bucket name): 
{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::YOUR-BUCKET-NAME/*"
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode
  1. Save changes

This policy allows anyone to read (GET) objects in the bucket — exactly what's needed for a public website, and nothing more (no write/delete access).

Step 5: Test Your Website

Open the Bucket website endpoint URL from Step 3 in your browser:

http://YOUR-BUCKET-NAME.s3-website.<region>.amazonaws.com
Enter fullscreen mode Exit fullscreen mode

You should see your index.html page render, and if you open the browser console, you should see the message from script.js logged.

Try visiting a non-existent path (e.g., add /random-page to the URL) — you should see your custom error.html page instead of a generic AWS error.

🔍 Quick Recap

Step What Happened
Created bucket Storage container for website files
Uploaded files index.html, error.html, script.js
Enabled static hosting Told S3 which file is the homepage & error page
Added bucket policy Made objects publicly readable
Tested endpoint Confirmed the site loads and errors are handled

🔐 A Note on Security

Public bucket policies only grant read access (s3:GetObject) — visitors can view your site, but can't upload, modify, or delete anything. Still, double check:

  • Only the specific files/paths needed are public
  • Sensitive files are never placed in a publicly hosted bucket
  • Consider adding CloudFront in front of the bucket for HTTPS support (S3 static website endpoints don't support HTTPS natively) — a good topic for a follow-up post!

🧹 Cleanup

To avoid any storage charges:

  1. Empty the bucket (Bucket → Empty)
  2. Delete the bucket (Bucket → Delete)

🏁 Wrap-Up

You've now hosted a fully working static website on S3 — no servers, no scaling concerns, just fast and cheap. This same pattern powers countless portfolios, docs sites, and landing pages in production today.

Full project files are available on GitHub.

Top comments (0)