Hosting a Static Website on AWS S3 & CloudFront for $0
Learn how to host any static website, portfolio, or Single Page Application (React/Vue/HTML) on AWS for $0 using Amazon S3 and Amazon CloudFront. This step-by-step beginner guide walks you through setting up secure Origin Access Control (OAC), enforcing HTTPS redirection, and configuring bucket policies to keep your files private while serving them globally at lightning-fast speeds within the AWS Free Tier. Zero command line or server maintenance needed.
Why Pay for Web Hosting?
Hosting a personal portfolio, documentation site, or frontend app (React, Vue, or HTML/CSS) does not require a paid hosting service or an active EC2 instance.
Combining Amazon S3 with Amazon CloudFront delivers free SSL/HTTPS, global low latency, and zero server maintenance—100% within the AWS Free Tier.
Architecture Flow
1
User (Browser) ──[HTTPS]──> CloudFront (CDN Edge) ──[OAC]──> S3 Bucket (Private)
Security First: Keep your S3 bucket private. Traffic routes exclusively through CloudFront using Origin Access Control (OAC) to prevent direct public scraping.
1) Create and Populate the S3 Bucket
- Open Amazon S3 Console and click Create bucket.
- Set a unique Bucket name (e.g., my-portfolio-build-2026).
- Keep Block all public access enabled.
- Leave defaults as SSE-S3 and create the bucket.
- Open the bucket, click Upload, and add your website files (index.html, CSS, JS)
- 2) Set Up CloudFront Distribution
- Open CloudFront Console and click Create distribution.
- Origin domain: Select your S3 bucket.
- Origin access: Choose Origin access control settings (recommended) and click Create new OAC.
- Viewer protocol policy: Select Redirect HTTP to HTTPS.
- Default root object: Type index.html.
- Click Create distribution.
3) Attach the S3 Bucket Policy
Click Copy policy from the yellow banner on the CloudFront screen.
Click Copy policy from the yellow banner on the CloudFront screen.
Go to your S3 bucket > Permissions tab > Bucket policy > Edit.
Paste the copied policy and click Save changes:
{
"Version": "2012-10-17",
"Statement": {
"Sid": "AllowCloudFrontReadOnly",
"Effect": "Allow",
"Principal": { "Service": "cloudfront.amazonaws.com" },
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::YOUR-BUCKET-NAME/*",
"Condition": {
"StringEquals": {
"AWS:SourceArn": "arn:aws:cloudfront::ACCOUNT-ID:distribution/DISTRIBUTION-ID"
}
}
}
}
"Version": "2012-10-17",
"Statement": {
"Sid": "AllowCloudFrontReadOnly",
"Effect": "Allow",
"Principal": { "Service": "cloudfront.amazonaws.com" },
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::YOUR-BUCKET-NAME/*",
"Condition": {
"StringEquals": {
"AWS:SourceArn": "arn:aws:cloudfront::ACCOUNT-ID:distribution/DISTRIBUTION-ID"
}
}
}
}
4) Test Your Site
Copy your Distribution domain name (e.g., d1234.cloudfront.net) from CloudFront and open it in your browser. Your site is live with HTTPS!
Copy your Distribution domain name (e.g., d1234.cloudfront.net) from CloudFront and open it in your browser. Your site is live with HTTPS!
Free Tier Specs
- Amazon S3: 5 GB storage, 20,000 GET requests/month.
- Amazon S3: 5 GB storage, 20,000 GET requests/month.
-Amazon CloudFront: 1 TB data transfer out, 10,000,000 requests/month (Always Free).
If this quick walkthrough helped, drop a like and comment with what you're hosting on AWS!
Enjoyed reading this content? Let the author know!
Your likes, comments, shares, and saves help creators reach more builders.
Loading recommendations
Loading article