In one of my previous posts, I walked you through how I hosted a basic static website on Amazon S3 using just two humble files: an index.html and an image. It was simple, effective, and honestly kind of magical seeing my HTML come to life on the web.
But as with most things in tech, I got curious - what if I could make it faster? More secure? Professional-grade?
That curiosity led me to CloudFront, AWS's content delivery network (CDN). And in this post, I'll show you how I transformed that basic site into a globally distributed, supercharged web experience - and learned a ton in the process.

🧠 What Is CloudFront Anyway?

CloudFront is like a worldwide relay race for your content. Instead of loading your site from one location (like S3 in a specific region), CloudFront caches it across edge locations around the world.
So when someone visits your site, they're served content from the nearest AWS data center - not halfway across the globe. The result? Faster load times and a more responsive experience.

💡 Why I Switched from Just S3 to CloudFront

When I first hosted my site on S3, I was thrilled to get it live. But I noticed:

  • It was a bit slow to load when I shared it with friends abroad.
  • There was no HTTPS support out-of-the-box for the S3 static site URL.
  • I wanted my site to feel more real - like a proper website with a custom domain and secure connection.

CloudFront fixed all of that.

🛠️ How I Did It - Step-by-Step

1.Uploaded My Site to S3
If you missed my first post - I had a simple static website with:

  • index.html: a clean landing page.
  • output.png: just a single image for now. I uploaded both files to an S3 bucket and made them publicly readable.

Image description

2. Created a CloudFront Distribution
Now for the fun part.
I went to the CloudFront console, clicked "Create Distribution," and selected Web as the delivery method.

Here's how I set it up:

  • Origin Domain: I selected my S3 bucket (make sure it's the static website hosting endpoint, not just the bucket URL).

Image description

  • Viewer Protocol Policy: I set it to Redirect HTTP to HTTPS to ensure secure access.
  • Default Root Object: I entered index.html - this tells CloudFront what to load by default.

  1. (Optional) Set Up a Custom Domain and SSL
    If you want your site to feel real, you can buy a domain and configure it with Route 53, AWS's DNS service.
    Using AWS Certificate Manager (ACM) you can request an SSL certificate for your domain and then attache it to any CloudFront distribution so that your would load over HTTPS with a shiny padlock 🔒.I didnt have a domain so I skipped this step.

  2. Waited for Propagation (and Grabbed Coffee)
    CloudFront takes a few minutes to deploy a distribution - in my case, about 10 minutes. I used the time to check my GitHub stars and pretend I wasn't hitting refresh every 30 seconds.

Image description

🌐 The Moment of Truth

Once deployed, I visited my CloudFront URL (or my custom domain), and there it was - my static site, loading faster than ever, over HTTPS, looking legit.

Image description

It felt like leveling up. No longer just a student experiment or weekend project - it looked like something real companies use.

🧼 Bonus: Invalidation & Updates

One thing I learned the hard way: CloudFront caches everything. So when I updated my HTML or image file, the changes didn't appear instantly.
To fix that, I used Invalidations:

  • I went to the distribution, clicked Invalidations, and added /* to clear the cache.
  • Next time I made updates, I used versioning (e.g., img-v2.png) to avoid repeated invalidations.

💸 Important Note

  • The first 1,000 invalidation paths per month are free. After that, AWS charges per invalidation request - so don't overuse /* unless necessary.
  • A smarter approach is to version your files (e.g., app-v2.js, style-v3.css) so you don't need to invalidate older files.

🤓 What I Learned

  • HTTPS is essential for modern web apps (and CloudFront makes it easy).
  • AWS has a learning curve, but once you get through the weeds, it's super powerful.

**

🎯 Final Thoughts

**
What started as a tiny index.html and an image has evolved into a full-blown global delivery setup with HTTPS and blazing performance. And honestly? It felt empowering.

Whether you're building a personal site, a portfolio, or just experimenting - I highly recommend giving CloudFront a shot. You'll learn, improve your site's UX, and start thinking like a real-world web architect.

And if I could figure it out with a two-file website… so can you.