How to Deploy a Static Website with S3 and CloudFront on AWS

#aws #s3 #cloudfront #webdev

Want to host a fast, secure, and globally distributed website with no backend server?

In this hands-on guide, I’ll walk you through how to host a static website using Amazon S3 and CloudFront — perfect for portfolios, documentation, or product landing pages.

What You’ll Need

✅ An AWS Account (free tier works)
✅ A static website (HTML, CSS, JS files)
✅ Optional: Custom domain + SSL

Step-by-Step Guide

🔹 Step 1: Create an S3 Bucket

Go to S3 in AWS Console.

Click "Create Bucket"

Name it exactly as your domain name (e.g. mywebsite.com)

Uncheck Block all public access ✅ (you’ll change permissions later)

Create Bucket > click on the created bucket >

Enable static website hosting:
Under "Properties" > Static Website Hosting

Select: Enable

Enter your index.html and error.html file names

🔹 Step 2: Upload Your Website Files

Upload your index.html, styles.css, and other static files into the bucket.

🔹 Step 3: Set Bucket Policy for Public Read

Go to Permissions > Bucket Policy

and paste this (update your bucket name):

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