Step-by-Step Guide: Configuring a Static Website with S3 and CloudFront

Prerequisites

Before starting, ensure you have:

✅ An AWS account (Free Tier is sufficient)

✅ Static website files (e.g., index.html, style.css, script.js, images)

✅ Basic understanding of AWS S3 and CloudFront

Part 1: Setting Up an S3 Bucket

Step 1: Sign in to AWS Console

1. Go to the [AWS Management Console](https://aws.amazon.com/console/).

2. Sign in with your credentials.

Step 2: Select the Correct AWS Region

- Choose US West (Oregon) [us-west-2] (or your preferred region).

- Why? S3 buckets are region-specific, so pick a region closest to your audience.

Step 3: Create an S3 Bucket

1. Navigate to S3 (Search "S3" in AWS Console).

2. Click Create bucket.

3. Enter a unique bucket name (e.g., my-static-website-bucket).

4. Select the Oregon (us-west-2) region.

5. Under Object Ownership, choose ACLs enabled.

Step 4: Configure Public Access

By default, S3 blocks public access. We need to allow it for website hosting.

1. Uncheck "Block all public access".

2. Check the acknowledgment box (this confirms you understand the risks).

3. Click Create bucket.

Step 5: Add a Bucket Policy for Public Access

1. Go to your bucket → Permissions tab → Bucket Policy.

2. Click Edit and paste the following policy (replace YOUR_BUCKET_NAME):

3. Click Save changes.

Troubleshooting: If you see an error, double-check the bucket name in the policy.

Part 2: Enable Static Website Hosting

Step 6: Configure Static Website Hosting

1. Go to the Properties tab.

2. Scroll to Static website hosting → Click Edit.

3. Select Enable.

4. Enter:

- Index document: index.html (your homepage)

- Error document (optional): error.html (for 404 errors)

5. Click Save changes.

Step 7: Upload Website Files

1. Go to the Objects tab → Upload.

2. Click Add files and upload:

- index.html

- style.css (inside a css/ folder)

- script.js (inside a js/ folder)

- Any images (inside an assets/ folder)

3. Click Upload.

Step 8: Test Your Website

1. Go back to Properties → Static website hosting.

2. Copy the Bucket website endpoint (e.g., http://my-bucket.s3-website-us-west-2.amazonaws.com).

3. Paste it into a browser.

- If successful, you’ll see your index.html page.

Part 3: Setting Up CloudFront (CDN)

Step 9: Create a CloudFront Distribution

1. In AWS Console, search for CloudFront and open it.

2. Click Create a CloudFront distribution.

Step 10: Configure Origin Settings

1. Under Origin domain, select your S3 bucket website endpoint (e.g., my-bucket.s3-website-us-west-2.amazonaws.com).

- Warning: If you see an S3 warning, ignore it.

2. Under Origin access, select Origin Access Control (OAC) → Create new OAC.

- Name: Leave default

- Signing behavior: Select Sign requests

- Click Create.

Step 11: Default Cache Behavior & Settings

1. Leave Default cache behavior as-is.

2. Under Web Application Firewall (WAF), select Do not enable security protections (for simplicity).

3. Under Settings:

- Price class: Select Use only North America and Europe (cheaper).

- Default root object: index.html (so CloudFront serves it by default).

Step 12: Create Distribution

1. Click Create distribution.

2. Wait 5-10 minutes for CloudFront to deploy.

Step 13: Update S3 Bucket Policy for CloudFront

1. In CloudFront, go to your distribution → Origins tab → Copy policy.

2. Go back to your S3 bucket → Permissions → Bucket Policy → Edit.

3. Delete the old policy and paste the new CloudFront policy (it restricts access to only CloudFront).

4. Click Save changes.

Step 14: Block Public Access to S3 (Security Best Practice)

1. Go to your S3 bucket → Permissions → Block public access.

2. Click Edit → Check "Block all public access" → Save changes.

3. Enter confirm → Click Confirm.

Why? Now, only CloudFront can access your S3 bucket, improving security.

Step 15: Test CloudFront URL

1. In CloudFront, copy your Distribution domain name (e.g., d12345.cloudfront.net).

2. Paste it into a browser.

- If successful, your website loads faster globally via CloudFront!

Conclusion

You’ve successfully:

- Hosted a static website on S3.

- Secured it by restricting public access.

- Accelerated delivery globally using CloudFront CDN.