293 lines
10 KiB
Markdown
293 lines
10 KiB
Markdown
# S3 Static Website Hosting
|
||
|
||
## What is S3 Static Website Hosting?
|
||
|
||
**Amazon S3 (Simple Storage Service)** can host static websites directly from a bucket without requiring a traditional web server. When you enable static website hosting on an S3 bucket, AWS provides a unique endpoint URL that serves your HTML, CSS, JavaScript, and image files to anyone on the internet — as long as you configure the bucket for public read access and attach the appropriate bucket policy. This is a cost-effective, highly available, and scalable solution for hosting personal websites, single-page applications, documentation sites, landing pages, and portfolios. Unlike dynamic websites that require backend servers and databases, S3 static hosting is ideal for content that doesn't change based on user interactions or server-side processing.
|
||
|
||
---
|
||
|
||
## Lab Overview
|
||
|
||
| Resource | Name / Value |
|
||
|---|---|
|
||
| S3 Bucket | `your-unique-bucket-name` |
|
||
| Bucket Policy | Allow public `GetObject` |
|
||
| Static Website Hosting | Enabled |
|
||
| Index Document | `index.html` |
|
||
| Region | `ap-south-1` (or your preferred region) |
|
||
| Bucket Website Endpoint | `http://<bucket-name>.s3-website-<region>.amazonaws.com` |
|
||
|
||
---
|
||
|
||
## Video Demo
|
||
|
||
[](https://youtu.be/klEGEw2O6q0)
|
||
|
||
---
|
||
|
||
## Step-by-Step Walkthrough
|
||
|
||
### Step 1 — Open AWS Console and Navigate to S3
|
||
|
||
Log in to the AWS Management Console and search for **S3** in the services search bar, then click on S3 to open the S3 dashboard.
|
||
|
||
|
||
|
||
---
|
||
|
||
### Step 2 — Create an S3 Bucket
|
||
|
||
#### 2a — Click Create bucket
|
||
|
||
In the S3 dashboard, click **Create bucket** to begin the bucket creation wizard.
|
||
|
||
|
||
|
||
#### 2b — Enter a unique bucket name
|
||
|
||
Enter a **globally unique bucket name**. Bucket names must be unique across all AWS accounts worldwide and must follow DNS naming conventions (lowercase letters, numbers, and hyphens only).
|
||
|
||
|
||
|
||
#### 2c — Uncheck "Block all public access"
|
||
|
||
Scroll down to the **Block Public Access settings** section and **uncheck "Block all public access"**. For static website hosting to work, your bucket must allow public read access to its objects.
|
||
|
||
> ⚠️ **Important:** Unchecking this setting means anyone with the URL can access files in this bucket. Only use this for content you intend to make publicly available.
|
||
|
||
|
||
|
||
#### 2d — Acknowledge the warning and create the bucket
|
||
|
||
Check the acknowledgment box confirming you understand the bucket will be public, then click **Create bucket** at the bottom of the page.
|
||
|
||
|
||
|
||
---
|
||
|
||
### Step 3 — Upload Website Files
|
||
|
||
#### 3a — Open the bucket
|
||
|
||
The bucket is created successfully. Click on the **bucket name** to open it and view its contents.
|
||
|
||
|
||
|
||
#### 3b — Click Upload
|
||
|
||
Inside the bucket, click the **Upload** button to open the file upload wizard.
|
||
|
||
|
||
|
||
#### 3c — Add files
|
||
|
||
Click **Add files** or **Add folder** and select the static website files from your local machine (HTML, CSS, JavaScript, images, etc.).
|
||
|
||
|
||
|
||
#### 3d — Upload the files
|
||
|
||
After selecting your files, scroll down and click **Upload** to transfer them to the S3 bucket.
|
||
|
||
|
||
|
||
---
|
||
|
||
### Step 4 — Enable Static Website Hosting
|
||
|
||
#### 4a — Navigate to Properties tab
|
||
|
||
Click on the **Properties** tab at the top of the bucket page.
|
||
|
||
|
||
|
||
#### 4b — Find Static website hosting section
|
||
|
||
Scroll down to the **Static website hosting** section at the bottom of the Properties page.
|
||
|
||
|
||
|
||
#### 4c — Enable static website hosting
|
||
|
||
Click **Edit**, then select **Enable**. Choose **Host a static website** as the hosting type, and enter `index.html` as the **Index document** (the default page visitors see when they access your site).
|
||
|
||
|
||
|
||
#### 4d — Save changes
|
||
|
||
Scroll down and click **Save changes** to apply the static website hosting configuration.
|
||
|
||
|
||
|
||
---
|
||
|
||
### Step 5 — Configure Bucket Policy
|
||
|
||
#### 5a — Navigate to Permissions and edit bucket policy
|
||
|
||
Click the **Permissions** tab, scroll down to **Bucket policy**, and click **Edit**.
|
||
|
||
|
||
|
||
#### 5b — Add a statement or use Policy generator
|
||
|
||
Click **Add statement** or **Policy generator** to create a new bucket policy. The policy generator helps you build the JSON policy without writing it manually.
|
||
|
||
|
||
|
||
---
|
||
|
||
### Step 6 — Generate and Apply the Bucket Policy
|
||
|
||
#### 6a — Open AWS Policy Generator
|
||
|
||
If using the AWS Policy Generator, you'll see a form. Configure it as follows to allow public read access to all objects in the bucket.
|
||
|
||
|
||
|
||
**Policy Settings:**
|
||
|
||
| Field | Value |
|
||
|---|---|
|
||
| **Effect** | Allow |
|
||
| **Principal** | `*` (anyone) |
|
||
| **Actions** | `GetObject` |
|
||
| **ARN** | `arn:aws:s3:::your-bucket-name/*` (replace with your bucket name and add `/*` at the end) |
|
||
|
||
#### 6b — Add statement and generate policy
|
||
|
||
After entering the settings above, click **Add Statement**, then click **Generate Policy**.
|
||
|
||
|
||
|
||
#### 6c — Copy the generated policy
|
||
|
||
The policy generator will output a JSON policy. Click **Copy** to copy the entire policy to your clipboard.
|
||
|
||
|
||
|
||
**Sample Bucket Policy:**
|
||
|
||
```json
|
||
{
|
||
"Version": "2012-10-17",
|
||
"Statement": [
|
||
{
|
||
"Sid": "PublicReadGetObject",
|
||
"Effect": "Allow",
|
||
"Principal": "*",
|
||
"Action": "s3:GetObject",
|
||
"Resource": "arn:aws:s3:::your-bucket-name/*"
|
||
}
|
||
]
|
||
}
|
||
```
|
||
|
||
> **Note:** Replace `your-bucket-name` with your actual bucket name.
|
||
|
||
#### 6d — Paste the policy and save changes
|
||
|
||
Return to the bucket policy editor, paste the policy JSON, and click **Save changes**.
|
||
|
||
|
||
|
||
#### 6e — Bucket policy created successfully
|
||
|
||
You'll see a confirmation that the bucket policy has been successfully applied.
|
||
|
||
|
||
|
||
---
|
||
|
||
### Step 7 — Access Your Website
|
||
|
||
#### 7a — Return to Properties tab
|
||
|
||
Click the **Properties** tab again.
|
||
|
||
|
||
|
||
#### 7b — Copy the bucket website endpoint
|
||
|
||
Scroll down to the **Static website hosting** section and copy the **Bucket website endpoint** URL.
|
||
|
||
|
||
|
||
#### 7c — Open the website in your browser
|
||
|
||
Paste the endpoint URL into your browser's address bar and press Enter. Your static website is now live and publicly accessible! 🎉
|
||
|
||
|
||
|
||
---
|
||
|
||
### Step 8 — Clean Up Resources (Empty the Bucket)
|
||
|
||
#### 8a — Empty the bucket
|
||
|
||
To delete a bucket, you must first empty it. Select the bucket (or open it) and click **Empty**.
|
||
|
||
|
||
|
||
#### 8b — Confirm deletion of objects
|
||
|
||
Type `permanently delete` in the confirmation field and click **Delete objects**.
|
||
|
||
|
||
|
||
---
|
||
|
||
### Step 9 — Delete the S3 Bucket
|
||
|
||
#### 9a — Select the bucket and click Delete
|
||
|
||
After emptying the bucket, select it from the S3 dashboard and click **Delete**.
|
||
|
||
|
||
|
||
#### 9b — Confirm bucket deletion
|
||
|
||
Type the **bucket name** exactly as shown to confirm permanent deletion, then click **Delete bucket**.
|
||
|
||
|
||
|
||
#### 9c — Bucket deleted successfully
|
||
|
||
The bucket and all its configurations are now permanently deleted.
|
||
|
||
|
||
|
||
---
|
||
|
||
## Key Points to Remember
|
||
|
||
| Point | Details |
|
||
|---|---|
|
||
| **Bucket names must be globally unique** | No two buckets can have the same name across all AWS accounts worldwide |
|
||
| **Public access is required** | Static website hosting requires public read access via bucket policy |
|
||
| **Bucket policy syntax** | Must allow `s3:GetObject` action for `Principal: "*"` on `Resource: "arn:aws:s3:::bucket-name/*"` |
|
||
| **Index document** | Always specify `index.html` or your custom default page |
|
||
| **Endpoint URL format** | `http://<bucket-name>.s3-website-<region>.amazonaws.com` |
|
||
| **HTTPS not supported by default** | Use Amazon CloudFront for HTTPS and custom domains |
|
||
| **Cost efficiency** | Free tier includes 5GB storage, 20,000 GET requests, and 2,000 PUT requests per month (first 12 months) |
|
||
| **Always clean up** | Delete buckets and objects when no longer needed to avoid charges |
|
||
|
||
---
|
||
|
||
## Use Cases
|
||
|
||
- 📄 Personal websites and blogs
|
||
- 🚀 Single-page applications (SPAs)
|
||
- 📚 Documentation sites
|
||
- 🎨 Portfolio websites
|
||
- 📱 Landing pages
|
||
- 🧪 Prototype hosting and demos
|
||
|
||
---
|
||
|
||
## Additional Resources
|
||
|
||
- [AWS S3 Static Website Hosting Documentation](https://docs.aws.amazon.com/AmazonS3/latest/userguide/WebsiteHosting.html)
|
||
- [S3 Pricing](https://aws.amazon.com/s3/pricing/)
|
||
- [Using CloudFront with S3 for HTTPS](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/distribution-web.html)
|