I recently deployed my developer portfolio on AWS using Amazon S3 and CloudFront without making the bucket public!
Most tutorials make you disable public access on the S3 bucket, but I wanted a secure, production-ready setup. So instead, I kept S3 private and used CloudFront as the only public entry point.
Here’s the exact process I followed, step by step.
*Prerequisites *
AWS account (Free Tier works)
Static website build (React/Vite or plain HTML/CSS/JS)
Basic familiarity with AWS Console
Step 1: Build & Upload Portfolio Files to S3
Before uploading, I created an optimized production build:
For React/Vite:
npm run build
This created a dist/build folder containing:
- index.html
- vite
- assets(Folder)
This is what should be deployed and NOT your source code.
Then:
- Create a bucket
- Keep "Block Public Access" ON
- Open S3 Console
- Upload the dist/build files into the bucket root
Step 2 : Enable Static Website Hosting (Optional)
This helps with file access.
Go to the bucket Properties
Scroll to Static Website Hosting
Enable it
Set:
index.html
Step 3 : Create CloudFront Distribution
- Open CloudFront Console
- Click Create Distribution
- Select your S3 bucket as the origin
- For Origin Access, choose:
- Origin Access Control (OAC)
- CloudFront generates permissions
- Apply them to your bucket
This keeps your S3 bucket private and protected, while CloudFront handles public routing.
Step 4 : Restrict Direct S3 Access
CloudFront gives you a policy to paste into your bucket permissions.
This ensures:
- S3 is not publicly readable
- Only CloudFront can serve content
- This is the secure approach, unlike making S3 public.
Step 5 :Set Default Root Object
In CloudFront distribution settings:
Default Root Object: index.html
This makes the portfolio load without typing index.html.
Step 6 : Wait for Deployment & Test
It takes a few minutes for CloudFront to deploy.
Then you get a domain like:
d37dnhohvgt3x2.cloudfront.net
I opened mine and…
Portfolio LIVE & SECURE!
I love this setup because it keeps your s3 bucket private, follows production best practices, is still free tier friendly and CloudFront boosts performance globally.
If you're deploying a portfolio or static site, S3 + CloudFront is a powerful and scalable solution.
Feel free to drop questions 😀 I’m actively learning Cloud Engineering and happy to help!
aws #cloud #cloudfront #s3 #webdev #portfolio #tutorial
If you found this helpful, please leave a ❤ ️ or bookmark it!
Top comments (0)