> ## 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.
# S3 Static Website Hosting Demo
> Learn to host a static website on Amazon S3 using HTML, CSS, and custom error pages.
In this guide, you'll learn how to host a static website on Amazon S3. This tutorial uses a simple website that includes an HTML file (index.html), a CSS stylesheet (index.css), a custom error page (404.html), and an images folder containing various pictures.
## Website Structure Overview
Your website comprises the following files:
• **index.html** – Contains the main website content.\
• **index.css** – Provides styling for the website.\
• **404.html** – Displays a custom error page when a user requests a non-existent resource.\
• **images folder** – Contains images that the website loads.
Below is an image illustrating the AWS Console Home page alongside a Windows File Explorer window that displays the "static-demo" folder with HTML and CSS files.
***
## index.html
The **index.html** file structures the primary content of your website. When a user navigates to your site, the browser requests this file, which then loads the linked CSS and images.
```html theme={null}
Document
```
***
## 404.html
The **404.html** file customizes the error page displayed when a user attempts to access a non-existent page or file. This enhances user experience by providing a clear message for unavailable content.
```html theme={null}
Document
404
Page not found
```
When a user visits your website, the browser loads the **index.html** file along with its associated CSS and image files. If a user requests a file that does not exist, the **404.html** custom error page is displayed.
***
## Creating the S3 Bucket and Uploading Files
Follow these steps to create an S3 bucket and upload your website files:
1. Open the AWS S3 console and create a new bucket. Name it (for example) "static-demo" and keep the default settings.
2. After bucket creation, the AWS console displays a confirmation message.
3. Next, drag and drop all website files (HTML, CSS, images, etc.) into the newly created bucket. Depending on the number of images and files, the upload may take a short while.
***
## Enabling Static Website Hosting
To serve your website through S3, you must enable static website hosting:
1. In your bucket, open the **Properties** tab and scroll down to the **S3 Static Website Hosting** section.
2. Click **Edit** and enable static website hosting.
3. Specify the following details:
* **Index Document:** index.html
* **Error Document:** 404.html
These settings ensure that the **index.html** file loads by default when the bucket URL is accessed and that the **404.html** error page is used for invalid URLs.
4. Save your configuration. The console will provide a URL that serves as your website's public endpoint.
Click this URL to view your website. Note that, initially, you might encounter an "Access Denied" error.
Before your website is fully accessible, you'll need to update bucket permissions to allow public access.
***
## Updating Bucket Permissions for Public Access
By default, S3 buckets are not publicly accessible. To adjust this:
1. Go to the **Permissions** tab of your bucket.
2. Disable the **Block all public access** setting.
Save these settings. This change allows public access, but you must also apply a bucket policy to grant public read permissions.
***
## Configuring the Bucket Policy
To grant public read access, open the bucket policy editor and add a statement similar to the example below. Replace "your-bucket-name" with the actual name of your bucket:
```json theme={null}
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "AllowPublic",
"Principal": "*",
"Effect": "Allow",
"Action": [
"s3:GetObject"
],
"Resource": [
"arn:aws:s3:::your-bucket-name/*"
]
}
]
}
```
This policy permits public users to retrieve objects (via `s3:GetObject`) without the ability to delete or modify them.
Save the policy. The bucket will now be publicly accessible.
***
## Verifying the Website
Return to the **Properties** tab of your bucket and use the provided website URL to test your site:
• If you navigate to the base URL, **index.html** loads by default.\
• For specific files, append their path (e.g., `/images/food1.jpg` loads that image).\
• If a non-existent file is requested, the custom **404.html** error page appears.
Optimizing your S3-hosted static website for search engines involves ensuring that your HTML files include meta tags and relevant keywords, and that your website structure is easy to navigate.
***
By following these steps, you can efficiently host and publicly serve your website using an S3 bucket. Enjoy your scalable, cost-effective hosting solution on Amazon S3!
