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.