Static website hosting on S3 in AWS - Step-by-Step Execution

Process Flow - Static website hosting on S3

Create S3 Bucket

↓

Upload Website Files

↓

Enable Static Website Hosting

↓

Set Index Document

↓

Set Error Document (optional)

↓

Set Bucket Policy for Public Access

↓

Access Website via Endpoint URL

This flow shows the steps to host a static website on S3: create bucket, upload files, enable hosting, set documents, allow public access, then access the site.

Execution Sample

AWS

aws s3 mb s3://my-static-site
aws s3 cp ./site-content s3://my-static-site --recursive
aws s3 website s3://my-static-site/ --index-document index.html --error-document error.html
aws s3api put-bucket-policy --bucket my-static-site --policy file://policy.json

Commands to create a bucket, upload files, enable website hosting, and set a public access policy.

Process Table

Step	Action	Result	Details
1	Create S3 bucket	Bucket created	Bucket 'my-static-site' is ready
2	Upload files	Files uploaded	All website files copied to bucket
3	Enable website hosting	Hosting enabled	Index: index.html, Error: error.html set
4	Set bucket policy	Policy applied	Bucket is publicly readable
5	Access website	Website loads	Site accessible via S3 website endpoint URL
6	Test error page	Error page shown	Non-existent page shows error.html

💡 Website is live and publicly accessible via the S3 website endpoint

Status Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4	Final
Bucket	None	my-static-site created	my-static-site with files	Hosting enabled	Public policy set	Website live
Files	None	None	Uploaded	Uploaded	Uploaded	Uploaded
Hosting	Disabled	Disabled	Disabled	Enabled	Enabled	Enabled
Policy	None	None	None	None	Public read	Public read

Key Moments - 3 Insights

Why do we need to set a bucket policy for public access?

Without the public read policy (see step 4 in execution_table), the website files cannot be accessed by anyone, so the site won't load.

What happens if the index document is not set?

If the index document is missing (step 3), accessing the root URL will not show the homepage, causing confusion or errors.

Why do we test the error page?

Testing the error page (step 6) ensures users see a friendly message when visiting non-existent pages, improving user experience.

Visual Quiz - 3 Questions

Look at the execution_table, what is the state of the bucket after step 2?

A Bucket created but no files uploaded

B Hosting enabled on bucket

C Bucket created with files uploaded

D Bucket policy set to public

💡 Hint

Check the 'Result' and 'Details' columns for step 2 in execution_table

At which step does the website become publicly accessible?

A Step 4

B Step 3

C Step 1

D Step 5

💡 Hint

Look for when the bucket policy is applied to allow public read access in execution_table

If the bucket policy is not set, what will happen when accessing the website?

A Only index document loads

B Access denied error occurs

C Website loads normally

D Error document loads

💡 Hint

Refer to key_moments about the importance of bucket policy for public access

Concept Snapshot

Static website hosting on S3:
- Create an S3 bucket
- Upload your website files
- Enable static website hosting with index and error documents
- Set bucket policy to allow public read access
- Access your site via the S3 website endpoint URL

Full Transcript

To host a static website on Amazon S3, first create a bucket. Then upload your website files like HTML, CSS, and images. Next, enable static website hosting on the bucket and specify the index and error documents. After that, set a bucket policy to allow public read access so anyone can view your site. Finally, access your website using the S3 website endpoint URL. Testing the error page ensures users see a friendly message if they visit a missing page.