1The Jamstack Revolution
Modern web development has shifted heavily toward Jamstack (JavaScript, APIs, Markup) architectures using frameworks like React, Vue, and Angular. Because these frameworks compile down to static HTML/JS/CSS bundles, they don't require expensive EC2 web servers. S3 provides the perfect, infinitely scalable storage layer for these bundles, serving millions of users at a fraction of the cost of traditional hosting.
2Why CloudFront is Mandatory
While S3's built-in static website hosting feature is great for quick development previews, it lacks enterprise features. It serves traffic over unencrypted HTTP when using custom domains, and all requests hit a single AWS region. Pairing S3 with CloudFront solves both issues: CloudFront terminates SSL/TLS connections at the edge using free AWS Certificate Manager (ACM) certificates and caches content globally, reducing latency to single-digit milliseconds for users worldwide.
3Step-by-Step Breakdown
Static vs Dynamic Hosting. S3 can host static websites (HTML, CSS, JS, images) with zero server management. It cannot execute server-side scripts like PHP, Node.js, or Python.
Enabling Website Hosting. You enable static website hosting at the bucket level, specifying an Index document (e.g. index.html) and an optional Error document (e.g. 404.html).
Website Endpoint. Once enabled, S3 generates a dedicated website endpoint. Unlike standard S3 API endpoints, website endpoints support root document redirection and error page handling.
Bucket Permissions. To make a direct S3 website accessible to visitors, you must disable Block Public Access and attach a public read Bucket Policy allowing s3:GetObject for *.
Custom Domains (Route 53). To use a custom domain like example.com with direct S3 hosting, your S3 bucket name MUST exactly match the domain name (example.com). You then create a Route 53 Alias record pointing to the S3 website endpoint.
Knowledge Check. If you want to host a static website on S3 accessible via 'www.mycompany.com' using direct Route 53 DNS routing (without CloudFront), what MUST the S3 bucket be named?
- →Any unique name (e.g., mycompany-web-bucket)
- →www.mycompany.com (Must match exactly)
- →mycompany.com (Root domain only)
The HTTPS Limitation. Direct S3 website endpoints do NOT support HTTPS for custom domains. To enable HTTPS, you must place an Amazon CloudFront distribution in front of your S3 bucket.
CloudFront + S3 Origin. CloudFront acts as a global CDN, caching your static assets at Edge Locations worldwide, providing SSL/TLS certificates via ACM, and protecting your site against DDoS attacks.
Origin Access Control (OAC). When using CloudFront, you should keep your S3 bucket fully private (Block Public Access enabled) and use Origin Access Control (OAC) so only CloudFront can fetch objects.
Summary & Best Practices. For enterprise static sites, never make S3 public directly. Always combine a private S3 bucket with CloudFront OAC and Route 53.
