Introduction

Static website hosting is one of the most common and practical use cases in cloud computing. Applications such as portfolios, documentation sites, landing pages, and frontend builds often consist only of HTML, CSS, JavaScript, and images.

AWS is a popular choice for hosting static websites because it offers highly scalable, secure, and cost-effective services. By combining Amazon S3 and Amazon CloudFront, we can build a production-ready solution that delivers content quickly to users across the globe.

In this blog, you will learn:

• What Amazon S3 and CloudFront are

• How they work together

• How to host a static website using private S3 + CloudFront

• A real-world architecture used in production

What is Amazon S3?

Amazon S3 (Simple Storage Service) is an object storage service provided by AWS. It is used to store and retrieve any amount of data from anywhere on the internet.

Key Points:

• S3 stores data as objects inside buckets

• Commonly used to store HTML, CSS, JavaScript, images, and files

• Highly scalable – can store unlimited data

• Extremely durable with 99.999999999% (11 nines) durability

• Cost-effective – pay only for the storage you use

• Widely used for static website hosting

• Integrated easily with other AWS services like CloudFront, Lambda, and EC2

What is Amazon CloudFront?

Amazon CloudFront is a Content Delivery Network (CDN) service provided by AWS. It delivers content to users with low latency and high performance.

Key Points:

• CloudFront caches content at edge locations around the world

• Delivers content from the nearest edge location to the user

• Improves website performance and loading speed

• Reduces load on the origin server (S3 bucket)

• Provides built-in security with HTTPS and AWS Shield

• Works seamlessly with Amazon S3 as an origin

Important Note:

CloudFront reduces latency by serving content from the nearest edge location instead of the original server.

Architecture Explanation

This architecture ensures all user traffic goes through CloudFront, improving performance and security.

How It Works:

• The user accesses the website through a browser.

• The request first reaches Amazon CloudFront, which acts as a Content Delivery Network (CDN).

• CloudFront checks if the requested content is already cached at the nearest edge location.

• If cached, CloudFront serves the content immediately, reducing latency.

• If not cached, CloudFront fetches the content from the Amazon S3 bucket.

• The S3 bucket stores static files such as HTML, CSS, JavaScript, and images.

• CloudFront then caches the content and delivers it securely to the user.

Why This Architecture Is Effective:

• High performance due to edge caching

• Global availability using CloudFront edge locations

• Secure access with HTTPS

• Scalable and cost-effective static hosting

• Reduced load on the S3 bucket

Step-by-Step Implementation

Step-1 : Create an S3 Bucket

• Log in to the AWS Management Console S3 buckets | S3 | us-east-1 .

• Navigate to S3 → Buckets.

• Click on the create Bucket.

• Enter the name of the Bucket.

  (Note: Bucket names are globally unique)

• Keep Block Public Access enabled, The bucket remains private because CloudFront will be the only service accessing it.

• Leave the remaining settings as default.

• click on Create bucket.

Step-2 : Now Upload Website Files

• Click on the Created Bucket.

• Click upload.

• Upload your static website files.

• Typical files include:

  • index.html

  • style.css

  • JavaScript files

  • Images etc

Step-3: Create CloudFront distribution (OAC)

1. Create the distribution.

• Log in to AWS Management Console Distributions | CloudFront | Global.

• Go to CloudFront → Distributions.

• Click on create distribution.

2. Configure the CDN.

• Choose Plan (Free).

• Click on Next.

• Enter a name for the distribution.

• Click on the next.

• Specify Amazon S3 as the origin.

• Define the S3 Bucket name below in S3 origin.

• Click Next.

• Leave the remaining settings as default.

• Click Next.

• Click create distribution.

  CloudFront distribution deployment may take a few minutes.

• Note: Bucket Policy When Using CloudFront (OAC)

  When using Amazon CloudFront with Origin Access Control (OAC), there is no need to manually configure a public bucket policy for the S3 bucket.

  CloudFront automatically updates the S3 bucket policy to allow only CloudFront to access the bucket objects. This ensures that the S3 bucket remains private, while CloudFront securely serves the content to end users.

  Because of this:

  • The S3 bucket does not require public access

  • Block Public Access remains enabled

  • Users cannot directly access S3 objects

  • All traffic flows securely through CloudFront

  • This follows AWS-recommended production best practices

This approach improves security and is the most commonly used architecture in real-world production environments.

3. Access the Website

Once the distribution status shows Deployed:

1. Copy the CloudFront Domain Name

2. Paste it into a browser

3. Your static website will be live globally 🌍

Conclusion

Hosting a static website using Amazon S3 and CloudFront is a simple yet powerful production-ready solution. By keeping the S3 bucket private and serving content through CloudFront, we achieve better security, performance, and scalability.

This architecture is widely used in real-world applications to deliver fast and secure static websites globally.

In future blogs, I plan to extend this setup by automating deployments using CI/CD pipelines.