How to Host a Static Website Using Amazon S3 and CloudFront
Learn how to host a static website on AWS using Amazon S3 and CloudFront. This beginner-friendly guide covers website deployment, HTTPS, custom domains, caching, security, and a path toward automated CI/CD deployment.
Introduction
Deploying a website doesn't always require a traditional web server. For static websites containing HTML, CSS, JavaScript, images, and other frontend assets, AWS provides a simple and scalable approach using Amazon S3.
In this article, we will explore how to host a static website using Amazon S3 and improve its delivery using Amazon CloudFront.
This setup is useful for portfolio websites, landing pages, documentation sites, and frontend applications.
1. What Are We Building?
We will deploy a simple static website containing:
- HTML
- CSS
- JavaScript
- Images and other assets
The basic architecture will be:
User → CloudFront → Amazon S3
Amazon S3 will store the website files, while CloudFront will deliver those files through its global content delivery network.
2. AWS Services Used
The main services used in this setup are:
Amazon S3: Stores the static website files.
Amazon CloudFront: Delivers website content through edge locations closer to users.
AWS Certificate Manager: Can provide an SSL/TLS certificate for HTTPS when using a custom domain.
Amazon Route 53: Can be used to connect a custom domain name to the CloudFront distribution.
3. Prepare the Website
Start with a simple website structure:
1
2
3
4
5
my-website/
├── index.html
├── style.css
├── script.js
└── images/The
index.html file acts as the main entry point for the website.Before uploading the files to AWS, test the website locally in your browser and make sure all CSS, JavaScript, and image paths work correctly.
4. Create an S3 Bucket
Create an S3 bucket that will contain the website files.
When choosing the bucket configuration, consider the security model carefully.
A recommended modern approach is to keep the S3 bucket private and allow CloudFront to access the objects using Origin Access Control (OAC).
This means users don't need direct access to the S3 bucket.
5. Upload the Website Files
Upload:
index.html- CSS files
- JavaScript files
- Images
- Other required assets
Maintain the same folder structure that you tested locally.
For example:
1
2
3
4
index.html
style.css
script.js
images/logo.pngIncorrect file paths are one of the most common reasons for CSS or images not loading after deployment.
6. Create a CloudFront Distribution
Create a CloudFront distribution and configure the S3 bucket as the origin.
CloudFront will act as the public entry point for the website.
A simplified request flow looks like this:
Browser → CloudFront → S3
When a user requests a website file, CloudFront can serve it from an edge location. If the object isn't cached, CloudFront retrieves it from the S3 origin.
7. Configure the Default Root Object
Set the CloudFront default root object to:
1
index.htmlThis allows users visiting the CloudFront domain without specifying a filename to receive the main page.
For example:
1
https://example.cloudfront.net/can return
index.html.8. Enable HTTPS
HTTPS is important for protecting communication between users and your website.
If you're using the default CloudFront domain, CloudFront provides HTTPS support.
For a custom domain, you can request a certificate through AWS Certificate Manager and associate it with the CloudFront distribution.
The architecture then becomes:
User → HTTPS → CloudFront → S3
9. Add a Custom Domain
For a professional website, you may want to use a custom domain such as:
1
www.example.comAmazon Route 53 can be used for DNS management.
The overall architecture becomes:
User → Route 53 → CloudFront → S3
This creates a clean architecture for hosting a portfolio or production frontend.
10. Improve Performance
CloudFront provides caching that can reduce the number of requests reaching the S3 origin.
For static assets such as:
- CSS
- JavaScript
- Images
- Fonts
appropriate cache-control settings can improve performance.
For frequently changing files, cache invalidation or versioned filenames can be used when deploying updates.
For example:
1
2
app.v1.js
app.v2.jsUsing versioned assets can help browsers and CDNs recognize when a new version should be downloaded.
11. Security Considerations
Security should be considered during deployment rather than added later.
Some important practices include:
- Keep the S3 bucket private when using CloudFront OAC.
- Avoid exposing unnecessary AWS credentials.
- Use HTTPS.
- Follow least-privilege IAM permissions.
- Enable appropriate logging and monitoring.
- Review S3 bucket policies carefully.
Never put AWS access keys or secret credentials inside frontend JavaScript code.
Anything included in client-side JavaScript should be considered visible to users.
12. Deploying Updates
When the website changes, upload the updated files to S3.
For example:
1
2
3
index.html
style.css
script.jsAfter updating the files, CloudFront may continue serving cached versions until the cache expires or an invalidation is performed.
A simple deployment workflow can therefore be:
Local Development → Upload to S3 → CloudFront Cache → Users
For larger projects, this process can be automated using CI/CD.
13. Automating Deployment
Once the manual deployment works, the next step can be automation.
A CI/CD pipeline can automatically:
- Detect a new code commit.
- Build the frontend.
- Upload the generated files to S3.
- Invalidate the CloudFront cache when necessary.
- Make the updated website available to users.
This removes repetitive manual deployment steps and makes the workflow more suitable for real-world development.
14. Cost Considerations
AWS services can incur charges depending on usage.
For a small personal website, traffic may be relatively low, but it's still important to understand the pricing of S3, CloudFront, Route 53, and related services.
Before deploying, review the current AWS pricing and configure appropriate billing alerts.
Also remember to remove resources that are no longer required.
Final Architecture
A production-style architecture can look like:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
┌──────────────┐
│ Users │
└──────┬───────┘
│
▼
┌──────────────┐
│ Route 53 │
└──────┬───────┘
│
▼
┌──────────────┐
│ CloudFront │
└──────┬───────┘
│
▼
┌──────────────┐
│ Amazon S3 │
│ Website │
└──────────────┘Conclusion
Amazon S3 and CloudFront provide a straightforward way to host and distribute static websites without managing traditional web servers.
S3 provides durable object storage, while CloudFront improves content delivery through caching and a global edge network.
For beginners, this is also a useful project for understanding how cloud storage, CDNs, DNS, HTTPS, security, and deployment workflows work together.
Once the basic setup is working, you can extend it with a custom domain, automated CI/CD deployment, monitoring, and additional AWS services.
Enjoyed reading this content? Let the author know!
Your likes, comments, shares, and saves help creators reach more builders.
Loading recommendations
Loading article