DEV Community

Cover image for How I Deployed My Portfolio Using AWS S3 + CloudFront + Cloudflare (Free SSL & Email!)
AWS Community Builders profile image Farhan Ahmed
Farhan Ahmed for AWS Community Builders

Posted on • Edited on

How I Deployed My Portfolio Using AWS S3 + CloudFront + Cloudflare (Free SSL & Email!)

#programming #tutorial #aws #webdev

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

  1. Host your site files in an S3 bucket (private)
  2. Set up CloudFront (to make the site fast and use HTTPS)
  3. Use ACM (for free HTTPS certificate)
  4. Set up Cloudflare (for DNS and custom email)
  5. Point Cloudflare to AWS

S3 to CloudFront

📦 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:

  1. Go to AWS S3 Console
  2. Create two buckets:
    • yourdomain.com (main site)
    • www.yourdomain.com (redirect bucket)
  3. Go to the main domain bucket → farhanahmed.pro
  4. Under Properties, scroll down
  5. Enable Static Website Hosting
  6. Upload your website files (index.html, images, CSS, etc.)

S3 Bucket Config

🚀 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:

  1. Go to CloudFront Console
  2. Click Create Distribution
  3. Choose origin as your main S3 bucket (not the www one)
  4. For Origin Access, select Legacy Access Identity → Create new OAI
  5. CloudFront will update S3 permissions automatically
  6. Choose Redirect HTTP to HTTPS
  7. 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:

  1. Go to ACM Console
  2. Choose us-east-1 region (Important!)
  3. Click Request a certificate
  4. Add:
    • yourdomain.com
    • *.yourdomain.com (Wildcard * lets you add subdomains in future)
  5. Choose DNS Validation
  6. Copy the CNAME records ACM gives
  7. 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:

  1. Go to your Cloudflare dashboard
  2. Add 2 CNAME records like below:
Type Name Value Proxy
CNAME @ your-cloudfront-domain.com Not Proxied
CNAME www @ Not Proxied
  1. 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:

  1. Go to Email → Email Routing
  2. Add sender address: hello@yourdomain.com
  3. Set the destination as your personal Gmail (or any inbox)
  4. Cloudflare gives you MX records
  5. Copy-paste those into the DNS tab
  6. 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:

  1. Go to your domain settings
  2. Under Nameservers, set it to Custom DNS
  3. Add Cloudflare’s nameservers:
    • xxx.ns.cloudflare.com
    • yyy.ns.cloudflare.com
  4. 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)