How I Hosted a Static Website on AWS with S3 and CloudFront

If you have a portfolio or small project built with plain HTML, CSS, and JavaScript, you don't need a server to host it. Here's how to host it on Amazon S3 and serve it securely through Amazon CloudFront.

How it works: S3 stores your files, and CloudFront caches them worldwide and serves them over HTTPS. The S3 bucket stays private, and only CloudFront can read from it.

Step 1: Create the bucket. In the S3 console, choose Create bucket, give it a unique name, pick your nearest Region, and leave "Block all public access" turned on.

Step 2: Upload your files. Upload index.html and your other files, with index.html at the top level.

Step 3: Create the CloudFront distribution. Select your bucket as the origin, choose Origin access control (OAC), set the default root object to index.html, and set the viewer protocol to Redirect HTTP to HTTPS. Then copy the bucket policy CloudFront offers and apply it under Permissions → Bucket policy.

Step 4: Test it. Once deployed, open the distribution domain name (like d1234abcd.cloudfront.net). Your site should load over HTTPS, while the direct S3 URL should return access denied, confirming the bucket is private.

Updating the site: CloudFront caches files, so after uploading changes, create an invalidation with the path.

Custom domain (optional): Request a certificate in AWS Certificate Manager in us-east-1, attach it to the distribution, and point your domain to it with Route 53 or your DNS provider.

Cost: For a small site it's usually very low, but pricing and free tiers change, so check the current pricing pages and set up an AWS Budgets alert.

Lessons learned: Keep the bucket private with OAC, set the default root object, invalidate the cache after updates, and never show access keys or account IDs in screenshots.

Conclusion: S3 and CloudFront give you a fast, HTTPS-enabled site with no servers to manage. A good next step is automating deployments with GitHub Actions or AWS CodePipeline.