This content originally appeared on DEV Community and was authored by Kachi
Introduction
Hosting a static website on AWS is a cost-effective and scalable solution. In this article, we’ll cover three different ways to deploy a static website using S3 and CloudFront, including step-by-step instructions for:
- AWS Console (Manual setup)
- AWS CLI (Command-line automation)
- Terraform (Infrastructure as Code)
We’ll also explore alternative methods for hosting an S3-based website without CloudFront, such as Route 53, ACM, and API Gateway.
Architectural Diagram
Method 1: AWS Console (Manual Setup)
This method is ideal for beginners who want to quickly deploy a static site.
Steps:
-
Create an S3 Bucket
- Go to AWS S3 Console → Click Create Bucket
- Enter a unique name (e.g.,
my-static-site) - Uncheck Block all public access
- Enable Static website hosting
-
Upload Website Files
- Upload your
index.htmland other static files.
- Upload your
-
Set Permissions
- Update the bucket policy to allow public read access.
-
Create a CloudFront Distribution
- Set Origin as your S3 Bucket
- Enable OAI (Origin Access Identity) for security
- Configure caching and SSL settings
-
Copy CloudFront Distribution URL
- This is your website’s final HTTPS-enabled URL.
Method 2: AWS CLI (Command-Line Automation)
For those who prefer automation, the AWS CLI simplifies deployment.
Steps:
- Create an S3 Bucket
aws s3 mb s3://my-static-site
- Upload Website Files
aws s3 cp index.html s3://my-static-site --acl public-read
- Enable Static Website Hosting
aws s3 website s3://my-static-site --index-document index.html
- Create a CloudFront Distribution
aws cloudfront create-distribution --origin-domain-name my-static-site.s3.amazonaws.com
-
Copy the CloudFront URL
- This is your new secure website URL.
Method 3: Terraform (Infrastructure as Code)
Using Terraform, you can define your website’s infrastructure in code and deploy it instantly.
Terraform Configuration (main.tf)
provider "aws" {
region = "us-east-1"
}
resource "aws_s3_bucket" "static_site" {
bucket = "my-static-site"
}
resource "aws_s3_bucket_website_configuration" "website" {
bucket = aws_s3_bucket.static_site.id
index_document {
suffix = "index.html"
}
}
resource "aws_cloudfront_distribution" "cdn" {
origin {
domain_name = aws_s3_bucket.static_site.bucket_domain_name
origin_id = "S3Origin"
}
}
Deploy with Terraform
terraform init
terraform apply -auto-approve
Get the Website URL
- Terraform will output the CloudFront distribution URL.
Alternative Ways to Host an S3 Website Without CloudFront
If you don’t want to use CloudFront, here are three other ways to host a static website with S3:
1. S3 Static Website Hosting (Public Access - No CloudFront)
This is the simplest way, but it does not support HTTPS.
Steps:
- Enable Static Website Hosting in the S3 Bucket Properties.
-
Upload website files (
index.html,style.css, etc.). - Update Bucket Policy to allow public access:
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::my-static-site/*"
}
]
}
- Copy the S3 Website Endpoint URL.
✅ Pros: Simple, fast setup.
❌ Cons: No HTTPS (only HTTP), not recommended for production.
2. S3 + Route 53 + ACM (Custom Domain with HTTPS - No CloudFront)
This method uses Route 53 and AWS Certificate Manager (ACM) to enable HTTPS without CloudFront.
Steps:
-
Create an S3 Bucket named after your domain (e.g.,
example.com). - Enable Static Website Hosting and upload files.
- Request an SSL Certificate from AWS Certificate Manager (ACM).
- Create an Alias Record in Route 53 pointing to the S3 Website Endpoint.
- Verify the SSL Certificate and use it with your domain.
✅ Pros: Supports HTTPS and custom domains.
❌ Cons: More setup required, still no CDN for caching.
3. S3 + API Gateway (Secure Static Hosting with HTTPS & Caching)
This method uses Amazon API Gateway to serve content from S3 with HTTPS support.
Steps:
- Create an S3 Bucket, upload website files.
- Create an API Gateway REST API integrating with S3.
- Enable CORS and CloudWatch logging.
- Deploy the API and get the endpoint URL.
- Map a custom domain (Optional) using Route 53.
✅ Pros: Supports HTTPS, better security, throttling & caching.
❌ Cons: More complex, might have additional costs.
Conclusion
AWS provides multiple ways to host static websites on S3. Using CloudFront ensures faster performance, security, and HTTPS support, but you can also use Route 53 + ACM or API Gateway for different use cases.
Comparison Table
For production websites, S3 + CloudFront remains the best choice.
Let me know if you have any questions! 🚀
This content originally appeared on DEV Community and was authored by Kachi
Kachi | Sciencx (2025-02-23T16:43:23+00:00) Deploying a Static Website Using S3 and CloudFront. Retrieved from https://www.scien.cx/2025/02/23/deploying-a-static-website-using-s3-and-cloudfront/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.