Hey there! 👋 I am Farhan, and in this blog, I’ll walk you through how I deployed my personal portfolio website farhanahmed.pro using simple tools from AWS and Cloudflare.
This guide is beginner-friendly. If you're just starting out with web hosting and cloud stuff, you’re in the right place. Let’s go step by step. 🛠️
🌐 What This Project Is
What I wanted for my portfolio:
- Fast and secure hosting
- My own domain name
- Free SSL (HTTPS)
- Professional email like
hello@farhanahmed.pro
So, I used:
- AWS S3 to store my site files (HTML, CSS, JS, images)
- AWS CloudFront to serve those files globally (CDN)
- AWS ACM (certificate) for free HTTPS
- Cloudflare for domain DNS + email routing
✈️ Steps Overview
- Host your site files in an S3 bucket (private)
- Set up CloudFront (to make the site fast and use HTTPS)
- Use ACM (for free HTTPS certificate)
- Set up Cloudflare (for DNS and custom email)
- Point Cloudflare to AWS
📦 What Are These Tools (In Simple Terms)
🪣 S3 (Simple Storage Service)
- Think of it as an online folder where you keep all your website files.
- It’s secure and reliable. But by default, files are private.
- You upload files like
index.html, images, videos, and they stay there until someone requests them via a browser.
💡 Tip: If you're using React or any frontend framework, first run npm run build and upload the dist/ or build/ folder contents.
✅ Steps:
- Go to AWS S3 Console
- Create two buckets:
-
yourdomain.com(main site) -
www.yourdomain.com(redirect bucket)
-
- Go to the main domain bucket →
farhanahmed.pro - Under Properties, scroll down
- Enable Static Website Hosting
- Upload your website files (
index.html, images, CSS, etc.)
🚀 CloudFront (CDN)
CloudFront = Content Delivery Network (CDN)
- Speeds up your website and protects your S3 bucket
- Delivers your content fast anywhere in the world
- Enables HTTPS via SSL certificate
🛡️ OAI = Origin Access Identity
Allows only CloudFront to fetch content from your private S3 bucket.
✅ Steps:
- Go to CloudFront Console
- Click Create Distribution
- Choose origin as your main S3 bucket (not the www one)
- For Origin Access, select Legacy Access Identity → Create new OAI
- CloudFront will update S3 permissions automatically
- Choose Redirect HTTP to HTTPS
- Attach an ACM Certificate (next step 👇)
🔒 ACM (AWS Certificate Manager)
- Provides the lock icon in browsers (HTTPS)
- It's free when used with AWS
- Boosts trust & security
✅ Steps:
- Go to ACM Console
- Choose us-east-1 region (Important!)
- Click Request a certificate
- Add:
-
yourdomain.com -
*.yourdomain.com(Wildcard*lets you add subdomains in future)
-
- Choose DNS Validation
- Copy the CNAME records ACM gives
- Paste them into Cloudflare DNS settings
Example DNS record for validation:
| Type | Name | Target | Proxy |
|---|---|---|---|
| CNAME | _xxxx.yourdomain.com |
_yyy.acm-validation.aws |
Not Proxied |
Wait for status to change to ✅ Issued
Go back to CloudFront and attach this certificate.
🌐 Setup DNS in Cloudflare
✅ Steps:
- Go to your Cloudflare dashboard
- Add 2 CNAME records like below:
| Type | Name | Value | Proxy |
|---|---|---|---|
| CNAME | @ |
your-cloudfront-domain.com |
Not Proxied |
| CNAME | www |
@ |
Not Proxied |
- Set SSL/TLS to Full or Off (Let AWS handle HTTPS)
📧 Setup Free Email with Cloudflare
Want a professional email like hello@yourdomain.com?
✅ Steps:
- Go to Email → Email Routing
- Add sender address:
hello@yourdomain.com - Set the destination as your personal Gmail (or any inbox)
- Cloudflare gives you MX records
- Copy-paste those into the DNS tab
- Enable Catch-All to receive all mail
Now you’ll receive all emails to your personal inbox!
☁️ Bonus: Using Cloudflare with Domains Bought Elsewhere
Say you bought a domain from Namecheap:
- Go to your domain settings
- Under Nameservers, set it to
Custom DNS - Add Cloudflare’s nameservers:
-
xxx.ns.cloudflare.com -
yyy.ns.cloudflare.com
-
- Save the settings
Cloudflare now manages your domain!
🎉 That’s a Wrap!
This was the full journey of hosting my website from scratch using:
- ✅ S3 for file storage
- 🚀 CloudFront for performance & HTTPS
- 🌐 Cloudflare for DNS and email routing
Thanks for reading 🙏
Drop by 👉 https://farhanahmed.pro and feel free to reach out.
Happy building! 💻✨
Top comments (0)