Introduction
Hosting a static website is one of the simplest ways to deploy content on the web. Whether it's a personal portfolio, documentation site, product landing page, or blog, static websites consist of files such as HTML, CSS, JavaScript, and images that don't require a backend server or database.
While Amazon S3 makes it easy to host static content, simply enabling S3 Static Website Hosting requires making the bucket publicly accessible. Although suitable for demonstrations, exposing the storage layer directly isn't the most secure approach.
A more robust architecture is to keep the Amazon S3 bucket private and use Amazon CloudFront as the public entry point. CloudFront securely retrieves content from the bucket using Origin Access Control (OAC), delivers it over HTTPS, caches content closer to users, and improves both security and performance.
In this article, we'll build a secure static website using Amazon S3 and Amazon CloudFront while following AWS best practices.
Prerequisites
- Before getting started, you'll need:
- An active AWS account
- Basic familiarity with the AWS Management Console
- A static website (HTML, CSS, JavaScript, and supporting assets)
- Basic understanding of Amazon S3
What You'll Build
By the end of this project, you'll have:
- A private Amazon S3 bucket storing your website files
- An Amazon CloudFront distribution serving the website globally
- Origin Access Control (OAC) securing access between CloudFront and Amazon S3
- HTTPS-enabled website delivery
- A scalable, low-maintenance static website architecture
Architecture
Why These AWS Services?
Amazon S3
Amazon S3 is AWS's object storage service designed to provide highly durable, available, and scalable storage. Since static websites are simply collections of files, S3 provides an ideal location to store website assets without managing web servers or application infrastructure.
For this project, Amazon S3 acts as the origin that stores the website files.
Amazon CloudFront
Although Amazon S3 stores the website content, it isn't optimized to deliver that content efficiently to users across different geographic locations.
Amazon CloudFront is AWS's Content Delivery Network (CDN). Instead of every request reaching the origin bucket, CloudFront caches content at AWS edge locations around the world, allowing users to retrieve content from the nearest location.
Using CloudFront provides several benefits:
- Lower latency
- Faster page load times
- HTTPS support
- Reduced requests to the origin
Improved scalability during traffic spikes
Origin Access Control (OAC)
One of the most important design decisions in this architecture is preventing direct public access to the Amazon S3 bucket.
Origin Access Control allows CloudFront to securely access objects stored in Amazon S3 while ensuring that users cannot access the bucket directly.
This approach provides:A private Amazon S3 bucket
Controlled access through CloudFront
Reduced attack surface
Better alignment with AWS security best practices
Implementation
The solution was implemented in four simple steps.
Step 1 – Create an Amazon S3 Bucket
A new Amazon S3 bucket was created to store the website files.
To improve security, Block Public Access remained enabled so that objects could not be accessed directly from the internet.
The following website assets were uploaded:
- index.html
- styles.css
- script.js
- error.html
Step 2 – Configure Amazon CloudFront
An Amazon CloudFront distribution was created using the Amazon S3 bucket as the origin.
The following configuration was applied:
Origin Access Control (OAC) enabled
Default root object configured as index.html
HTTPS enabled
Default CloudFront domain used for testing
CloudFront automatically updated the bucket policy, allowing secure access to the private S3 bucket.
Step 3 – Deploy the Website
After the CloudFront distribution finished deploying, the generated CloudFront domain successfully served the website over HTTPS.
CloudFront caches content at edge locations, allowing future requests to be served faster while reducing requests to the origin bucket.
Security Considerations
The following AWS best practices were implemented:
- Amazon S3 Block Public Access enabled
- Private Amazon S3 bucket
- Origin Access Control (OAC) configured
- CloudFront acting as the only public entry point
- HTTPS used for all client communication Keeping the storage layer private while exposing only CloudFront significantly improves the security posture of the application.
Cost Estimate
The architecture is inexpensive to operate and is well suited for personal portfolios, documentation websites, and small business websites.
- Amazon S3 – Stores the static website files (HTML, CSS, JavaScript, images, and other assets). Estimated cost: Less than $0.50/month for a small personal website.
- Amazon CloudFront – Delivers website content globally with low latency through edge locations and HTTPS support. Estimated cost: Approximately $0–$2/month for light traffic.
- Origin Access Control (OAC) – Securely allows CloudFront to access the private Amazon S3 bucket while preventing direct public access. Estimated cost: No additional cost.
Estimated monthly cost: $0–$2 for a personal portfolio or low-traffic website.
Challenges and Lessons Learned
One of the biggest lessons from this project was understanding the difference between Amazon S3 Static Website Hosting and serving content through Amazon CloudFront.
While enabling static website hosting on Amazon S3 is straightforward, using CloudFront with Origin Access Control provides a more secure architecture by keeping the storage bucket private and allowing access only through CloudFront.
Another key takeaway was learning how CloudFront deployments work. Configuration changes require time to propagate across AWS edge locations, so it's important to wait for the distribution to finish deploying before validating the website.
Finally, this project demonstrated how combining multiple AWS managed services results in a solution that is secure, scalable, and easy to maintain without managing any servers.
Key Takeaways
This project demonstrates how AWS managed services can be combined to build a secure and scalable static website.
By completing this implementation, we achieved:
- Secure object storage using Amazon S3
- Global content delivery with Amazon CloudFront
- Private origin access using Origin Access Control (OAC)
- HTTPS-enabled website delivery
- Improved performance through edge caching
- A low-cost, highly scalable hosting solution
Resources
GitHub Repository
Project Repository
https://github.com/swaralichine/aws-projects/tree/main/01-web-hosting-and-deployment/01-static-website-s3-cloudfront
AWS Documentation
Amazon S3 User Guide-https://docs.aws.amazon.com/AmazonS3/latest/userguide/Welcome.html
Amazon CloudFront Developer Guide-
https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Introduction.html
Restrict access to an Amazon S3 origin using Origin Access Control (OAC)-https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/private-content-restricting-access-to-s3.html
Top comments (0)