B CareerByteCode
Cloud Beginner 🎁 Free preview 👋 CareerByteCode

Host a Static Site on AWS S3 and CloudFront

Publish a static website on S3, serve it fast and secure over HTTPS with CloudFront, all inside the AWS free tier.

Problem statement

You have a static site (HTML/CSS/JS or a built frontend) and need it live on the internet, fast and over HTTPS, without running a server.

Why we need this realtime usecase

S3 plus CloudFront gives you a globally cached, HTTPS static host with almost no operational overhead and a very low bill on the free tier.

When we need this realtime usecase

Use this for a portfolio, a docs site, a landing page, or any built single-page app that does not need a backend of its own.

Prerequisites for the lab

An AWS account, the AWS CLI configured, and a folder of static files (an index.html at minimum).

Step by step implementation

Create the bucket and deliver it

bash
aws s3 mb s3://cbc-static-demo
aws s3 website s3://cbc-static-demo --index-document index.html
aws s3 sync ./site s3://cbc-static-demo --acl private
# then create a CloudFront distribution with the bucket as origin (OAC),
# and point it at index.html as the default root object

Sync your files to the bucket, front it with a CloudFront distribution using Origin Access Control so the bucket stays private, and set index.html as the default root object. Your site is now served over HTTPS from edge locations.

Conclusion

You now have a fast, HTTPS static site on AWS for a few rupees a month. This is the base pattern for every static frontend you ship on AWS.

🎉 That was the first lab, free

You just ran the full first lab end to end. The rest of the bundle unlocks when you enrol once - and every lab you finish earns XP and counts toward your ByteLabs certificate.

Get "Cloud and DevOps Realtime Starter" · ₹589
← Back to all usecases