DEV Community

Yash Sonawane
Yash Sonawane

Posted on

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/*"
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
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. 🧡

Top comments (0)