S3 Static Website Hosting Demo

This guide demonstrates how to host a simple static website on Amazon S3. It walks through the project layout, uploading files, enabling static website hosting, adjusting permissions, and confirming the website endpoint. Use the steps below to quickly publish a static site using an S3 bucket (example bucket used here: kk-static-demo).

Project structure and files

Project files for this demo:

File / Folder	Purpose
`index.html`	Main document served at the site root; references `index.css` and images.
`index.css`	Site styling (not shown in this demo).
`404.html`	Custom error page returned when an object is missing.
`images/`	Directory containing the site photos (e.g., `food1.jpg`, `food2.jpg`, …).

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="index.css" />
    <title>Food Gallery</title>
  </head>
  <body>
    <div class="container">
      <div class="images">
        <div class="image"><img src="images/food1.jpg" alt="Food 1" /></div>
        <div class="image"><img src="images/food2.jpg" alt="Food 2" /></div>
        <div class="image"><img src="images/food3.jpg" alt="Food 3" /></div>
        <div class="image"><img src="images/food4.jpg" alt="Food 4" /></div>
        <div class="image"><img src="images/food5.jpg" alt="Food 5" /></div>
        <div class="image"><img src="images/food6.jpg" alt="Food 6" /></div>
        <div class="image"><img src="images/food7.jpg" alt="Food 7" /></div>
        <div class="image"><img src="images/food8.jpg" alt="Food 8" /></div>
        <div class="image"><img src="images/food9.jpg" alt="Food 9" /></div>
        <div class="image"><img src="images/food10.jpg" alt="Food 10" /></div>
      </div>
    </div>
  </body>
</html>

404.html (error page)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="index.css" />
    <title>404 - Not Found</title>
  </head>
  <body>
    <div class="container">
      <h1 class="head-404">404</h1>
      <h2 class="text-404">Page not found</h2>
    </div>
  </body>
</html>

When a visitor opens the bucket website root (the bucket website endpoint without a specific object), S3 serves the index document (index.html). That page, in turn, loads index.css and images from the images/ folder.

Create the S3 bucket

Open the Amazon S3 console and create a new bucket. In this demo the bucket name was kk-static-demo. Leave other settings as default for a simple test deployment.

A screenshot of the Amazon S3 console showing the "Create bucket" page with fields for bucket name (example "myawsbucket"), AWS region (US East N. Virginia), and object ownership/ACL settings. The page displays general configuration and options for copying settings from an existing bucket.

Upload your website files

Upload index.html, index.css, 404.html, and the images/ folder to the bucket. Upload duration depends on image sizes.

A screenshot of the AWS S3 console showing an "Upload succeeded" banner and an upload status page. The summary shows 13 files (2.5 MB) uploaded to the s3://kk-static-demo bucket and a list of image files with "Succeeded" status.

Enable static website hosting

Go to the bucket’s Properties tab.
Find Static website hosting and click Edit (or Enable).
Choose Host a static website and set:
- Index document: index.html
- Error document: 404.html
Save the settings.

The “Index document” defines the default object S3 returns when no specific object is requested (site root). The “Error document” is returned when a requested object is missing.

You can preview the 404 page locally to ensure it looks correct.

A screenshot of a minimal webpage showing a large "404" error with the text "Page not found" centered on a white background. The browser's address bar at the top indicates a local file path.

The static website hosting pane confirms the index document setting and shows your files for reference.

A screenshot showing the AWS S3 console static website hosting settings on the left and a Windows File Explorer window on the right containing a "static-demo" folder with files like index.html, index.css, 404.html and an images folder. The console highlights the index document set to index.html.

Initial “Access Denied” and required permissions

After enabling website hosting, visiting the site endpoint may return “Access Denied” if your objects are not publicly retrievable. S3 static website hosting requires that objects be readable by the principal you intend (commonly anonymous public read for public websites).

Example AccessDenied response you might see in the browser:

403 Forbidden

• Code: AccessDenied
• Message: Access Denied
• RequestId: DXHGWXPVMKMFECYT
• HostId: NJI+kvSPL5dueTeyQvomLfa73kij02SGjyrY8mcycZVpfbABuGfWj3ejH2vWUfuEMF9OTVB7E=

An Error Occurred While Attempting to Retrieve a Custom Error Document

• Code: AccessDenied
• Message: Access Denied

Make the bucket objects retrievable (public read)

In the bucket Permissions tab → Block public access, click Edit. To apply a public bucket policy you must first disable the block that prevents public policies from being added.

A screenshot of the Amazon S3 console showing the "Edit Block public access (bucket settings)" page. It lists several checkbox options to block public access (ACLs, bucket policies, cross-account) with a "Save changes" button.

Confirm the change when prompted. The console warns that this may make objects public; you must type confirm and proceed.

A screenshot of the AWS S3 console showing an "Edit Block public access (bucket settings)" confirmation dialog. It warns that changing block public access may make objects public and asks the user to type "confirm" before clicking the orange Confirm button.

Add a bucket policy that allows public read (s3:GetObject) to objects. Replace kk-static-demo with your bucket name:

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "AllowPublicGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::kk-static-demo/*"
    }
  ]
}

This policy grants anonymous users read access to GET objects in the bucket. It does not grant deletion, write, or other privileged permissions.

If your bucket’s Object Ownership is set to “Bucket owner enforced” (which disables ACLs), granting public read via ACLs won’t work — use a bucket policy (like the example above) to allow GetObject. Conversely, if you rely on ACLs, ensure ACLs are enabled and not blocked by the Block Public Access settings.

After applying the policy and disabling blocking rules, the S3 console should indicate the bucket is “publicly accessible” for read operations.

Confirming the website endpoint

Open the bucket Properties → Static website hosting and click the site endpoint.
Visiting the root URL (no object specified) returns index.html automatically — you don’t need to append /index.html.
You can fetch specific objects directly, for example:
- https://<bucket-website-endpoint>/images/food1.jpg
Requesting a non-existent object returns your configured error document (404.html) and displays your custom 404 page.

Amazon S3 static website endpoints serve content over HTTP only (no HTTPS). If you need HTTPS, place a CDN such as Amazon CloudFront in front of the bucket and configure an origin access control (OAC) or origin access identity (OAI) so you can keep the bucket private while serving content securely over HTTPS.

Quick reference: common settings

Setting	Typical value / action
Index document	`index.html`
Error document	`404.html`
Public access for website	Disable Block Public Access and add a `GetObject` bucket policy (or use CloudFront OAC/OAI for private buckets)
Protocol	S3 website endpoints are HTTP only; use CloudFront for HTTPS

Links and references

Amazon S3 static website hosting — https://docs.aws.amazon.com/AmazonS3/latest/userguide/WebsiteHosting.html
Amazon S3 bucket policies — https://docs.aws.amazon.com/AmazonS3/latest/userguide/using-iam-policies.html
Amazon CloudFront (use for HTTPS + custom domain) — https://aws.amazon.com/cloudfront/

This workflow is suitable for simple static sites and demos. For production sites, consider using CloudFront with HTTPS, proper caching, and security controls (OAC/OAI, least-privilege policies, logging, and monitoring).

Introduction

Services - Networking

Services - Storage

Services - Compute

Services - Database

Services - Application Integration

Services - Data and ML

Services - Migration and Transfer

Services - Management and Governance

Services - Security

Bringing it all together

Designing for Security

Designing for Reliability

Designing for Performance

Designing for Cost-Optimization

Applying your Design Skills

S3 Static Website Hosting Demo

Project structure and files

Create the S3 bucket

Upload your website files

Enable static website hosting

Initial “Access Denied” and required permissions

Make the bucket objects retrievable (public read)

Confirming the website endpoint

Quick reference: common settings

Links and references

Watch Video

​Project structure and files

​Create the S3 bucket

​Upload your website files

​Enable static website hosting

​Initial “Access Denied” and required permissions

​Make the bucket objects retrievable (public read)

​Confirming the website endpoint

​Quick reference: common settings

​Links and references

Watch Video

Project structure and files

Create the S3 bucket

Upload your website files

Enable static website hosting

Initial “Access Denied” and required permissions

Make the bucket objects retrievable (public read)

Confirming the website endpoint

Quick reference: common settings

Links and references