Yash Sonawane

Posted on Aug 4

How to Host a Static Website on S3 (With Custom Domain & SSL) 🌐🔒

#aws #cloud #devops #tutorial

"Wait—you’re telling me I can host a website without a server... for pennies... and it's secure?" YES. And it's easier than you think.

Let’s walk through it—step by step, no jargon, just results.

🧠 Why Use S3 for Hosting?

Amazon S3 (Simple Storage Service) is perfect for static websites—sites made with HTML, CSS, JS, no backend (like blogs, portfolios, docs, landing pages).

✅ Key Benefits:

Cheap (free for first 5GB on Free Tier)
Scalable (same tech used by Netflix!)
No servers to manage
Custom domain support
Free SSL via CloudFront

Real-world analogy: Think of S3 as a super-secure Dropbox that can also serve your files to the whole internet as a website.

🛠️ What You’ll Need

An AWS account
A static website (e.g., index.html, style.css)
A domain (from Route 53 or GoDaddy)

🚀 Step 1: Upload Your Site to S3

1. Create an S3 Bucket

Go to S3 Console
Bucket name = your domain name (e.g., myportfolio.dev)
Uncheck "Block all public access"

2. Upload Your Files

Upload your HTML/CSS/JS files into the bucket

3. Enable Static Website Hosting

Go to Properties tab → Scroll to Static Website Hosting → Enable
Set index.html as Index Document

4. Make Files Public

Go to Permissions tab → Edit Bucket Policy:

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

Now visit the bucket's website endpoint — Your site is live! 🎉

🌍 Step 2: Connect Your Custom Domain

Option A: Using Route 53 (AWS DNS)

Go to Route 53 → Hosted Zones → Create one for myportfolio.dev
Create an A Record (Alias) pointing to the S3 website endpoint

Option B: Using GoDaddy or Others

Go to your domain registrar
Edit DNS records:
- Type: A Record (or CNAME)
- Value: S3 website endpoint (e.g., myportfolio.dev.s3-website-us-east-1.amazonaws.com)

Note: S3 endpoints don’t support HTTPS directly—that’s where CloudFront comes in.

🔒 Step 3: Add SSL (HTTPS) Using CloudFront

1. Create a CloudFront Distribution

Origin domain = S3 bucket website endpoint (not the bucket name!)
Enable Redirect HTTP to HTTPS
Set default root object = index.html

2. Request a Free SSL Certificate (ACM)

Go to AWS Certificate Manager
Request public cert for myportfolio.dev and www.myportfolio.dev
Validate via DNS (Route 53 makes this easy)

3. Attach Certificate to CloudFront

Go back to CloudFront → Select your distribution → Edit → Add SSL cert

4. Update DNS

Final step: Update your domain’s A record to point to the CloudFront distribution domain (e.g., d1234abcd.cloudfront.net)

Boom! Now your site is served over HTTPS with blazing-fast performance 🔥

📦 Summary (The Flow)

Local Files → S3 → CloudFront → Custom Domain + HTTPS

Step	Tool Used
Host Files	Amazon S3
Serve Globally	CloudFront
Domain Mapping	Route 53 or GoDaddy
SSL	AWS Certificate Manager

🙌 Final Thoughts

Hosting static sites with S3 is like magic when you first do it. Fast, secure, reliable—and you’re in full control.

And once you do it once, you'll never go back to shared hosting again.

💬 Over to You!

Did this guide help you host your first static site? Have questions about custom domains or SSL setup?

👇 Drop your questions in the comments, hit ❤️ if this saved you hours, and share this with someone trying to deploy their portfolio!

Let’s make modern web hosting accessible to everyone. 🧡

DEV Community