Static website hosting on S3 in AWS - Mini Project: Build & Apply

Static website hosting on S3

📖 Scenario: You want to host a simple static website using Amazon S3. This website will have a homepage and an error page. You will create the S3 bucket, configure it for static website hosting, and set the homepage and error page files.

🎯 Goal: Build an S3 bucket configured for static website hosting with a homepage and an error page set.

📋 What You'll Learn

Create an S3 bucket named exactly my-static-website-bucket

Enable static website hosting on the bucket

Set the index document to index.html

Set the error document to error.html

Upload index.html and error.html to the bucket my-static-website-bucket

💡 Why This Matters

🌍 Real World

Static websites like portfolios, blogs, or documentation sites can be hosted cheaply and reliably on S3 without servers.

💼 Career

Knowing how to configure S3 for static hosting is a common cloud skill useful for developers, DevOps, and cloud engineers.

1

Create the S3 bucket

Create an S3 bucket named my-static-website-bucket using the AWS CLI command aws s3api create-bucket with the bucket name parameter.

AWS

# Use AWS CLI to create the bucket named my-static-website-bucket
# Your code here

Need a hint?

Use the AWS CLI command aws s3api create-bucket --bucket my-static-website-bucket --region us-east-1 to create the bucket.

2

Enable static website hosting configuration

Create a JSON file named website-config.json with the following content: {"IndexDocument": {"Suffix": "index.html"}, "ErrorDocument": {"Key": "error.html"}} to configure the index and error documents for static website hosting.

AWS

aws s3api create-bucket --bucket my-static-website-bucket --region us-east-1
# Create website-config.json with index and error document settings
# Your code here

Need a hint?

Create a JSON file with keys IndexDocument and ErrorDocument specifying the correct filenames. Use echo 'json content' > website-config.json.

3

Apply the website configuration to the bucket

Use the AWS CLI command aws s3api put-bucket-website with the bucket name my-static-website-bucket and the website configuration file website-config.json to enable static website hosting.

AWS

aws s3api create-bucket --bucket my-static-website-bucket --region us-east-1
echo '{"IndexDocument": {"Suffix": "index.html"}, "ErrorDocument": {"Key": "error.html"}}' > website-config.json
# Apply the website configuration to the bucket
# Your code here

Need a hint?

Use aws s3api put-bucket-website --bucket my-static-website-bucket --website-configuration file://website-config.json to apply the config.

4

Upload the index and error HTML files

Upload the files index.html and error.html to the bucket my-static-website-bucket using the AWS CLI command aws s3 cp for each file.

AWS

aws s3api create-bucket --bucket my-static-website-bucket --region us-east-1
echo '{"IndexDocument": {"Suffix": "index.html"}, "ErrorDocument": {"Key": "error.html"}}' > website-config.json
aws s3api put-bucket-website --bucket my-static-website-bucket --website-configuration file://website-config.json
# Upload index.html and error.html to the bucket
# Your code here

Need a hint?

Use aws s3 cp index.html s3://my-static-website-bucket/index.html and similarly for error.html.