HOW TO HOST YOUR STATIC WEBSITE ON AWS S3 AND CLOUDFRONT (STEP-BY-STEP GUIDE)

How to Host Your Static Website on AWS S3 and CloudFront (Step-by-Step Guide)

🌍 Day 1 — Host a Static Website on AWS (S3 + CloudFront)

When I started my 30 Days of AWS Projects Challenge, I wanted to begin with something simple but powerful — a project that gives you a real-world AWS feel. So, I decided to host my first static website on AWS S3 and CloudFront.

This tutorial walks you through every step — from setting up your S3 bucket to making your site live worldwide with CloudFront and HTTPS. And yes, I’ll also show you how I fixed a 504 Gateway Timeout error that almost stopped me. 😅

🪣 Step 1: Create an S3 Bucket for Your Website

Amazon S3 is AWS’s storage service — but it can also serve as a simple web server for static files (HTML, CSS, JS).

Steps: - Go to the S3 console → Create bucket - Give it a unique name, like joy-static-site-demo - Uncheck Block all public access - Create the bucket - Upload your website files — for example, a simple index.html

HTML example (save as index.html):

<html>
  <body style="text-align:center; font-family:sans-serif;">
    <h1>🚀 Hello from AWS S3 + CloudFront!</h1>
    <p>My first website hosted on Amazon S3</p>
  </body>
</html>

Now enable static website hosting: - Go to Properties → Static website hosting - Enable hosting and set index.html as the index document - Copy the S3 website endpoint, e.g.:

http://joy-static-site-demo.s3-website.ca-central-1.amazonaws.com/

If you open this link, your site should load — public and live! 🎉

☁️ Step 2: Add CloudFront for Global Speed and HTTPS

CloudFront is AWS’s global CDN (Content Delivery Network). It caches your website content at edge locations around the world for faster delivery.

Steps: - Go to CloudFront → Create Distribution - Set Origin domain to your S3 website endpoint (not the bucket name!) - Choose Origin protocol policy → HTTP only - Name it something like s3-static-website - Create distribution - Wait 10–15 minutes until the status changes to ✅ Deployed.

Then open your CloudFront domain — something like:

https://dxxxxx.cloudfront.net

⚠️ Step 3: Fixing the 504 Gateway Timeout Error

When I tried to open my CloudFront link for the first time, I got this scary message:

504 Gateway Timeout ERROR

It turns out, CloudFront couldn’t talk to my S3 origin.

Cause: - I had used the wrong S3 domain (the bucket URL instead of the website endpoint).

Solution: 1. Go to CloudFront → Origins → Edit Origin 2. Replace the origin with your S3 website endpoint (should include s3-website) 3. Set Origin protocol policy → HTTP only 4. Save, then go to Invalidations → Create invalidation → /* 5. Wait 5–10 minutes and refresh

Result: Boom 💥 — site live globally with HTTPS.

💰 AWS Cost and Free Tier Tips

  • Amazon S3: free tier includes 5 GB storage + 20,000 GET requests — for small demos costs are typically $0–$0.50/month.
  • CloudFront: free tier includes 1 TB data transfer (first 12 months) — small tests often cost <$1/month; remember to delete distributions after testing to avoid background charges.
  • IAM: always free — use it for permission control.

Pro Tip: Delete your CloudFront distribution after the demo to avoid small background charges.

🧩 Architecture Diagram

User → CloudFront (CDN) → S3 Static Website

💡 Key Takeaways

  • S3 static hosting is great for fast, low-cost websites.
  • CloudFront gives you global speed + HTTPS.
  • Always use the S3 website endpoint, not the default bucket URL.
  • Invalidate CloudFront cache after updates.

🙋‍♂️ FAQ (Highlighted)

  • Q: Why did I get a 504 Gateway Timeout error on CloudFront?

  • A: You likely used the wrong S3 origin or HTTPS setting. Use your S3 website endpoint (with s3-website in the URL) and set Origin Protocol Policy to HTTP only.

  • Q: Is this really free?

  • A: Yes. Both S3 and CloudFront have free tiers generous enough for small projects.

  • Q: Can I add my own domain (like www.imjoy.me)?

  • A: Absolutely! You can connect your domain through Route 53 and get automatic SSL. I’ll cover that later in the challenge.

  • Q: How can I update my website?

  • A: Upload a new index.html to S3 and create a CloudFront invalidation (/*) to refresh.

NOTE: The FAQ above is presented as quick bullets for readability — perfect for a README-style view.

🏁 Final Thoughts

Hosting your static website on AWS is the perfect starting point for anyone learning cloud. It’s simple, visual, and gives you that “I just deployed something real” feeling.

This was Day 1 of my AWS 30-Day Challenge — Next up → Day 2: Launching a Web Server on EC2 🖥️

By joy 4 weeks, 1 day ago
×