> ## Documentation Index
> Fetch the complete documentation index at: https://notes.kodekloud.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Demo Static Website
> This tutorial teaches how to deploy a static website using Amazon S3, covering configuration, file structure, and testing the site.
In this tutorial, you’ll learn how to deploy a simple static website using Amazon S3. We’ll cover:
* Project file structure
* Configuring S3 for static hosting
* Setting public access and custom error pages
* Testing your site endpoint
This guide is ideal for developers and DevOps engineers looking to serve HTML, CSS, and images directly from S3.
***
## Project Structure
Your local directory (`static-demo/`) contains:
* `index.html` – Main gallery page
* `index.css` – Layout and styling rules
* `404.html` – Custom error page
* `images/` – JPEG photos used in the gallery
***
## index.html
This HTML file defines the page structure and references your CSS and images:
```html theme={null}
Food Gallery
```
Your accompanying `index.css` defines a responsive grid layout, background colors, and typography. Place all JPEGs in the `images/` folder.
***
## 404.html
When users request a missing resource, S3 serves this custom error page:
```html theme={null}
Page Not Found
404
Page not found
```
You can preview both pages locally by opening `index.html` in your browser. The CSS grid will display your food gallery.
***
## 1. Create an S3 Bucket
1. Open the [Amazon S3 console](https://console.aws.amazon.com/s3) and click **Create bucket**.
2. Enter a unique bucket name (e.g., `kk-static-demo`) and select your region.
3. Keep default settings and click **Create bucket**.
Once created, locate your bucket in the list:
***
## 2. Upload Website Files
1. Click your bucket name to open it.
2. Drag & drop `index.html`, `index.css`, `404.html`, and the `images/` folder into the console.
3. Choose **Upload** and confirm.
***
## 3. Enable Static Website Hosting
1. In your bucket, navigate to **Properties** → **Static website hosting** → **Edit**.
2. Select **Enable**.
3. For **Index document**, enter `index.html`.
4. For **Error document**, enter `404.html`.
5. Save changes.
Review the bucket’s static hosting properties:
You should see a **Bucket website endpoint** listed:
At this point, clicking the endpoint yields **Access Denied** since the bucket is private.
***
## 4. Configure Public Access
### 4.1 Disable Block Public Access
1. Go to **Permissions** → **Block public access (bucket settings)** → **Edit**.
2. Uncheck **Block all public access** and confirm.
### 4.2 Add a Bucket Policy
Still under **Permissions**, select **Bucket policy** and paste the following JSON (replace the ARN with your bucket name):
```json theme={null}
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "AllowPublic",
"Principal": "*",
"Effect": "Allow",
"Action": ["s3:GetObject"],
"Resource": ["arn:aws:s3:::kk-static-demo/*"]
}
]
}
```
Save the policy. Alternatively, use the **Add a resource** UI:
Your bucket will now appear publicly accessible:
Making your bucket public exposes all objects. Ensure only intended files are uploaded.
***
## 5. Test Your Static Website
Return to **Properties** → **Static website hosting** and click the endpoint link. You should see the food gallery home page.
You do **not** need to append `/index.html`—the index document is served automatically.
| Resource | URL Pattern |
| --------------------------- | -------------------------------------------------------------------------- |
| Home page | `http://kk-static-demo.s3-website-.amazonaws.com/` |
| Explicit index | `http://kk-static-demo.s3-website-.amazonaws.com/index.html` |
| Specific image | `http://kk-static-demo.s3-website-.amazonaws.com/images/food1.jpg` |
| Missing resource (404 page) | `http://kk-static-demo.s3-website-.amazonaws.com/does-not-exist` |
***
## References
* [Amazon S3 Static Website Hosting](https://docs.aws.amazon.com/AmazonS3/latest/userguide/WebsiteHosting.html)
* [AWS S3 Bucket Policies](https://docs.aws.amazon.com/AmazonS3/latest/userguide/example-bucket-policies.html)
* [AWS CLI S3 Commands](https://docs.aws.amazon.com/cli/latest/reference/s3/index.html)
