Static website hosting on S3 in AWS - Commands & Configuration

Introduction

Sometimes you want to share a simple website with just files like HTML, CSS, and images. Amazon S3 lets you store these files and show them as a website without needing a server.

When you want to quickly publish a personal portfolio website without managing servers

When you need to host a simple landing page for a product or event

When you want to serve static files like images or documents publicly

When you want a low-cost way to host a website that does not change often

When you want to use a custom domain with your static website

Config File - bucket-policy.json

bucket-policy.json

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::example-static-website/*"
    }
  ]
}

This JSON file sets a policy to allow anyone on the internet to read the files in the S3 bucket named example-static-website. This is needed so the website files can be accessed publicly.

Commands

Create a new S3 bucket named example-static-website to hold your website files.

Terminal

aws s3 mb s3://example-static-website

Expected Output

make_bucket: example-static-website

Enable static website hosting on the bucket and set index.html as the homepage and error.html as the error page.

Terminal

aws s3 website s3://example-static-website/ --index-document index.html --error-document error.html

Expected Output

No output (command runs silently)

→

--index-document - Specifies the main page of the website

→

--error-document - Specifies the error page shown when a page is not found

Apply the public read policy to the bucket so everyone can access the website files.

Terminal

aws s3api put-bucket-policy --bucket example-static-website --policy file://bucket-policy.json

Expected Output

No output (command runs silently)

→

--policy - Specifies the JSON file with the bucket policy

Upload all your website files from the local folder website-files to the S3 bucket.

Terminal

aws s3 cp ./website-files/ s3://example-static-website/ --recursive

Expected Output

upload: website-files/index.html to s3://example-static-website/index.html

upload: website-files/style.css to s3://example-static-website/style.css

upload: website-files/error.html to s3://example-static-website/error.html

→

--recursive - Uploads all files and folders inside the specified local folder

Show the website endpoint URL where your static website is available.

Terminal

aws s3 website s3://example-static-website

Expected Output

http://example-static-website.s3-website-us-east-1.amazonaws.com

Key Concept

If you remember nothing else from this pattern, remember: You must make your S3 bucket public and enable website hosting to serve files as a static website.

Common Mistakes

Not setting the bucket policy to allow public read access

Without public read permission, visitors cannot see your website files and get access denied errors.

Always apply a bucket policy that grants s3:GetObject permission to everyone for your website files.

Forgetting to enable static website hosting on the bucket

The bucket will not serve files as a website and visitors cannot access the index or error pages properly.

Run the aws s3 website command to enable website hosting and specify index and error documents.

Uploading files to the wrong bucket or wrong folder path

The website will show errors or missing pages because the files are not where the website expects them.

Double-check the bucket name and upload path when copying files to S3.

Summary

Create an S3 bucket to hold your website files.

Enable static website hosting on the bucket and set index and error pages.

Apply a bucket policy to allow public read access to your files.

Upload your website files to the bucket using the AWS CLI.

Access your website using the S3 website endpoint URL.

Practice

1. What is the first step to host a static website on AWS S3?

easy

A. Set up a database

B. Upload files to EC2

C. Configure a Lambda function

D. Create an S3 bucket

Solution

1. Step 1: Understand the hosting process

   Hosting a static website on S3 starts by creating a storage space called a bucket.

2. Step 2: Identify the correct initial action

   Before uploading files or configuring anything else, you must create the bucket to hold your website files.

3. Final Answer:

   Create an S3 bucket -> Option D

4. Quick Check:

   First step = Create bucket [OK]

Hint: Start by making a bucket to hold your website files [OK]

Common Mistakes:

• Trying to upload files before creating a bucket
• Confusing S3 with EC2 for hosting
• Setting up Lambda or database unnecessarily

2. Which of the following is the correct way to enable static website hosting on an S3 bucket?

easy

A. Enable 'Static website hosting' in bucket properties and specify index document

B. Set bucket policy to private and upload files

C. Create an IAM user with full access to the bucket

D. Attach an EC2 instance to the bucket

Solution

1. Step 1: Locate the static website hosting setting

   In the S3 bucket properties, there is an option to enable static website hosting where you specify the index document.

2. Step 2: Understand the correct configuration

   Enabling static website hosting and setting the index document allows the bucket to serve web pages correctly.

3. Final Answer:

   Enable 'Static website hosting' in bucket properties and specify index document -> Option A

4. Quick Check:

   Enable hosting + index document = correct setup [OK]

Hint: Enable hosting in properties and set index file name [OK]

Common Mistakes:

• Leaving bucket policy private without public read
• Confusing IAM user creation with hosting setup
• Trying to attach EC2 to S3 bucket

3. Given this bucket policy snippet for an S3 static website:

{
  "Version": "2012-10-17",
  "Statement": [{
    "Effect": "Allow",
    "Principal": "*",
    "Action": "s3:GetObject",
    "Resource": "arn:aws:s3:::example-bucket/*"
  }]
}

What is the effect of this policy?

medium

A. Allows only authenticated users to write to the bucket

B. Blocks all access to the bucket

C. Allows anyone to read objects in the bucket

D. Allows anyone to delete objects in the bucket

Solution

1. Step 1: Analyze the policy statements

   The policy allows "Effect": "Allow" for "Principal": "*" which means everyone, on the action "s3:GetObject" for all objects in the bucket.

2. Step 2: Understand the permission granted

   This means anyone can read (get) objects from the bucket, which is needed for public website hosting.

3. Final Answer:

   Allows anyone to read objects in the bucket -> Option C

4. Quick Check:

   Principal * + GetObject = public read [OK]

Hint: Principal * with GetObject means public read access [OK]

Common Mistakes:

• Thinking it blocks access instead of allowing
• Confusing GetObject with write or delete permissions
• Assuming only authenticated users have access

4. You enabled static website hosting on your S3 bucket but get a 403 Forbidden error when accessing the site. What is the most likely cause?

medium

A. Index document is missing from the bucket

B. Bucket policy does not allow public read access

C. Bucket name contains uppercase letters

D. You did not upload any files

Solution

1. Step 1: Understand 403 Forbidden error context

   A 403 error usually means permission denied, so the website cannot read files from the bucket.

2. Step 2: Check bucket policy and permissions

   If the bucket policy does not allow public read access, the website cannot serve files, causing 403 errors.

3. Final Answer:

   Bucket policy does not allow public read access -> Option B

4. Quick Check:

   403 error = permission denied = fix bucket policy [OK]

Hint: 403 means permission denied; check bucket policy [OK]

Common Mistakes:

• Assuming missing index document causes 403 (usually 404)
• Thinking bucket name case causes errors
• Ignoring permissions and blaming missing files

5. You want to host a static website on S3 with a custom domain and HTTPS. Which combination of AWS services should you use?

hard

A. S3 static website hosting + Route 53 for domain + CloudFront with SSL certificate

B. S3 static website hosting + EC2 instance + Elastic Load Balancer

C. S3 static website hosting + Lambda functions + API Gateway

D. S3 static website hosting + DynamoDB + IAM roles

Solution

1. Step 1: Identify services for custom domain and HTTPS

   Route 53 manages domain names, CloudFront provides HTTPS with SSL certificates, and S3 hosts the static files.

2. Step 2: Understand the integration

   Use Route 53 to point your domain to CloudFront distribution, which serves content securely from S3 with HTTPS.

3. Final Answer:

   S3 static website hosting + Route 53 for domain + CloudFront with SSL certificate -> Option A

4. Quick Check:

   Custom domain + HTTPS = Route 53 + CloudFront + S3 [OK]

Hint: Use CloudFront for HTTPS and Route 53 for domain [OK]

Common Mistakes:

• Using EC2 or Lambda unnecessarily for static hosting
• Ignoring CloudFront for HTTPS support
• Confusing database or IAM roles with hosting setup