🚀 Overview

Today, I hosted a Tooplate HTML template as a static website using Amazon S3 (for storage) and CloudFront (for global content delivery). This combo is fast, scalable, and affordable for hosting portfolio sites, landing pages, or documentation.

📁 Step-by-Step: Hosting with S3 + CloudFront

1️⃣ Get the Template Ready

Go to https://www.tooplate.com
Download any HTML template
Extract the ZIP file
Test it locally to make sure it works

2️⃣ Create an S3 Bucket

Go to AWS Console → S3 → Create bucket
Bucket name must be globally unique (e.g., tooplate-shaharyar)
Uncheck "Block all public access" ✅ (we’ll make it public)
Click Create

3️⃣ Upload Website Files

Open your bucket → Upload → Select all files (HTML, CSS, JS, images)
After upload, go to Permissions → Bucket Policy and paste:

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

Replace tooplate-shaharyar with your bucket name.

4️⃣ Enable Static Website Hosting

Go to Properties → Static Website Hosting
Choose: Enable
Set index.html as Index document
Note the endpoint URL (e.g., http://tooplate-shaharyar.s3-website-us-east-1.amazonaws.com/)

Your site is now live on S3 🎉

5️⃣ Optional: Create a CloudFront Distribution

To boost speed and performance with a CDN:

Go to CloudFront → Create Distribution
Set Origin domain to your S3 bucket static website endpoint (not the bucket name)
Leave defaults or customize:
- Enable Caching
- Set default root object: index.html
- Enable SSL if using custom domain
Click Create Distribution

After a few minutes, you’ll get a CloudFront URL like:

https://d1ab2c3de4fg5.cloudfront.net

This serves your static site globally with low latency 🌍

🔐 Bonus: Use a Custom Domain (Optional)

You can use Route 53 + SSL certificate from ACM to point your domain (like yourname.com) to CloudFront.

✅ Summary

📦 S3 stores your static site files
🌐 CloudFront delivers them globally with speed and security
💡 Hosting static sites with this combo is fast, scalable, and cheap

💡 Use Cases

Developer Portfolios
Marketing Landing Pages
Resume Sites
Docs and CV pages

🧠 Today I Learned:

S3 bucket policies for public access
CloudFront caching & edge location delivery
How to connect Tooplate HTML templates with AWS

Day 52 – How to Host a Static Website using Amazon S3 and CloudFront