Why Amazon S3 for Static Hosting
Amazon S3 is one of the simplest ways to host a static website: no servers to patch, no OS to manage, and pricing that scales with actual usage. If your site is built from HTML, CSS, JavaScript, and client side frameworks like React or Vue (no server side rendering), S3 is often all the compute you need.
Below is the architecture this article walks through.
How It Works
- S3 bucket: your site's files (HTML, CSS, JS, images) live in a bucket configured for static website hosting.
- CloudFront: sits in front of the bucket as a CDN, caching content at edge locations closer to your visitors and enabling HTTPS.
- Origin Access Control (OAC): lets CloudFront read from the bucket while the bucket itself stays private; visitors never hit S3 directly.
- ACM: issues a free TLS certificate for your custom domain, attached to the CloudFront distribution.
- Route 53: points your domain (example.com) at the CloudFront distribution using an alias record.
Setting It Up
- Create the bucket and enable static hosting Create an S3 bucket (the name does not need to match your domain unless you are skipping CloudFront), then enable Static website hosting under the Properties tab. Set an index document (index.html) and, optionally, an error document.
- Upload your site files Upload your build output to the bucket, keeping the folder structure your site expects.
- Lock the bucket down Rather than making the bucket public, keep Block Public Access enabled and use Origin Access Control so only your CloudFront distribution can read the objects. This keeps the origin private while the site stays publicly accessible through the CDN.
- Add CloudFront, ACM, and Route 53 Request a certificate in ACM for your domain (in us east 1, since CloudFront requires it there), create a CloudFront distribution with the S3 bucket as the origin and OAC enabled, then create a Route 53 alias record pointing your domain at the distribution.
Why Add CloudFront Instead of Using S3 Alone
S3 alone can serve a static site over HTTP on an S3 website endpoint, but it cannot terminate HTTPS on a custom domain by itself. Putting CloudFront in front gets you: a free managed TLS certificate through ACM, lower latency through edge caching, a private origin bucket, and a single place to attach things like custom headers or a Lambda@Edge function later on.
Cost and Scaling
You pay for storage, requests, and data transfer, all of which are usually a few dollars a month for a typical portfolio or documentation site, and it scales automatically to traffic spikes without any provisioning on your part.
Wrap Up
For any site that does not need server side logic, S3 plus CloudFront gives you a secure, fast, and low maintenance hosting setup with a real custom domain and HTTPS, all without managing a single server.
Enjoyed reading this content? Let the author know!
Your likes, comments, shares, and saves help creators reach more builders.
Loading recommendations
Loading article