Deploy Your Portfolio Website: GitHub Pages + Cloudflare Custom Domain

Talent Forge Program · Project 1 | Beginner → Intermediate

The exact project that proves you can ship. Tie it to you, your resume, and your brand, all in one afternoon.

Why This Project Matters

Before you can list "built production infrastructure" on your CV, you need somewhere to list it from. Your portfolio website is not a vanity project, it is proof of work. It demonstrates:

• You can version-control a codebase on GitHub


• You understand Cloudflare Pages, a real edge deployment platform used at scale in production


• You can configure DNS, custom domains, and SSL, skills that appear in every infrastructure job posting


• You have a working CI/CD pipeline: every git push to main triggers an automatic global deployment

For my talk at AWS Student Community Day on Learning DevOps the Right Way: Building in Public and Gaining Real Experience, this is what I pointed students to. Not because it is the flashiest, but because it is the one you can finish in a weekend, deploy publicly, and put at the top of your CV immediately.

This is the complete implementation guide for Talent Forge Program 1, the portfolio website project. I am walking you through exactly how I built and deployed

Part 1: Build Your Static Portfolio Site

Step 1.1 — Create Your Project Structure

mkdir my-portfolio

cd my-portfolio



# Create the folder structure

mkdir css js img fonts



# Create your main files

touch index.html css/style.css js/main.js

Your directory tree:

my-portfolio/

├── index.html          ← entry point (Cloudflare Pages serves this)

├── css/

│   └── style.css

├── js/

│   └── main.js

├── img/

│   └── (your photos and project screenshots)

└── fonts/

    └── (any custom font files)

💡 This is exactly the structure used at

Repository name: my-portfolio

Visibility: Public

Do NOT initialise with a README — you already have files

Click Create repository

Step 2.3 — Push

CODE Kopieren

git remote add origin https://github.com/YOUR_USERNAME/my-portfolio.git

git branch -M main

git push -u origin main

Confirm:

CODE Kopieren

git log --oneline

# Should show: feat: initial portfolio site

Part 3: Connect GitHub to Cloudflare Pages

This is where the CI/CD magic happens. Cloudflare Pages connects directly to your GitHub repository and automatically deploys on every push to main. No pipeline YAML to write — Cloudflare handles the deployment infrastructure for you.

Step 3.1 — Create a New Cloudflare Pages Project

1. Log in to — search for your domain with NS record type.
   
   
   
   
   
   

   
   
   
   Part 5: Connect Your Custom Domain to Cloudflare Pages
   

   
   
   

   
   
   
   Step 5.1 — Add the Custom Domain
   

   
   
   
   
   
   1. Go to Workers & Pages → your Pages project
   
   
   2. Click the Custom domains tab
   
   
   3. Click Set up a custom domain
      
   
   
   4. Enter: yourdomain.com
      
   
   
   5. Click Continue
      
   
   
   
   
   

   Cloudflare will check if your domain is managed in your account. Since you added it in Part 4, it will be found automatically.

   
   
   

   
   
   
   Step 5.2 — Cloudflare Creates the DNS Record Automatically
   

   
   
   

   This is one of the best parts of using Cloudflare Pages with a Cloudflare-managed domain: Cloudflare automatically creates the CNAME record pointing your domain to your Pages project. You do not touch DNS manually.

   
   
   

   Cloudflare creates:
   
   

   
   
   
   
   

   CODE Kopieren

   CNAME  yourdomain.com  →  my-portfolio-abc.pages.dev  (Proxied ✅)
   
   

   
   
   
   
   
   
   
   

   Click Activate domain to confirm.

   
   
   

   
   
   
   Step 5.3 — Add www Redirect (Recommended)
   

   
   
   

   To make www.yourdomain.com also work:

   
   
   
   
   
   1. Go to Custom domains → Set up a custom domain again
   
   
   2. Enter: www.yourdomain.com
      
   
   
   3. Cloudflare adds a second CNAME automatically
   
   
   
   
   

   To redirect www to apex permanently:

   
   
   
   
   
   1. Go to Rules → Redirect Rules
      
   
   
   2. Create a rule: if Hostname equals www.yourdomain.com → redirect to https://yourdomain.com (301 permanent)
   
   
   
   
   
   
   
   

   
   
   
   Part 6: Configure SSL and Security
   

   
   
   

   Cloudflare Pages handles SSL automatically — your site gets HTTPS the moment the custom domain is activated. No certificate purchasing, no Let's Encrypt commands, no renewal reminders. Cloudflare renews it automatically, forever.

   
   
   

   Tighten these settings to production standard:

   
   
   

   
   
   
   Step 6.1 — SSL/TLS Mode
   

   
   
   
   
   
   1. Go to your domain in Cloudflare → SSL/TLS → Overview
      
   
   
   2. Set encryption mode to Full (strict)
      
   
   
   
   
   

   Cloudflare Pages serves over HTTPS natively, so Full (strict) works without any issue and is the most secure mode available.

   
   
   

   
   
   
   Step 6.2 — Force HTTPS
   

   
   
   
   
   
   1. 
      SSL/TLS → Edge Certificates
      
   
   
   2. 
      Always Use HTTPS → ON
   
   
   3. 
      Automatic HTTPS Rewrites → ON
   
   
   
   
   

   Any visitor hitting http://yourdomain.com is now redirected to https:// at Cloudflare's edge — before a request even touches your site.

   
   
   

   
   
   
   Step 6.3 — HSTS (Advanced — Optional)
   

   
   
   

   For maximum security, enable HTTP Strict Transport Security:

   
   
   
   
   
   1. 
      SSL/TLS → Edge Certificates → HTTP Strict Transport Security (HSTS)
      
   
   
   2. Enable HSTS → set Max Age to 6 months
   
   
   3. Check Include subdomains if you have subdomains
   
   
   
   
   

   
   

   ⚠️ HSTS tells browsers to never connect over HTTP for the specified period. Only enable this when HTTPS is fully confirmed and working.

   
   

   
   
   
   
   
   

   
   
   
   Part 7: Performance Settings
   

   
   
   

   These take under five minutes and have real-world impact:

   
   
   

   Speed → Optimization:

   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

   Setting	Value
   Auto Minify — HTML	ON
   Auto Minify — CSS	ON
   Auto Minify — JavaScript	ON
   Brotli compression	ON
   Early Hints	ON

   
   
   

   Caching → Configuration:

   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

   Setting	Value
   Caching Level	Standard
   Browser Cache TTL	4 hours

   
   
   

   Security → Settings:

   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   

   Setting	Value
   Security Level	Medium
   Bot Fight Mode	ON
   Email Address Obfuscation	ON

   
   
   

   
   

   💡 Bot Fight Mode silently challenges known bad bots at the edge. It is free, requires zero maintenance, and you should enable it on every site you run.

   
   

   
   
   
   
   
   

   
   
   
   Part 8: Verify the Full Setup
   

   
   
   
   
   
   
   

   CODE Kopieren

   # 1. Site loads over HTTPS with Cloudflare headers
   
   curl -I https://yourdomain.com
   
   
   
   # Expected:
   
   # HTTP/2 200
   
   # server: cloudflare
   
   # content-type: text/html; charset=utf-8
   
   # cf-ray: <id>-<datacenter>
   
   
   
   # 2. HTTP redirects to HTTPS
   
   curl -I http://yourdomain.com
   
   
   
   # Expected:
   
   # HTTP/1.1 301 Moved Permanently
   
   # location: https://yourdomain.com/
   
   
   
   # 3. www redirects to apex
   
   curl -I https://www.yourdomain.com
   
   
   
   # Expected: 301 to https://yourdomain.com
   
   
   
   # 4. SSL certificate is valid
   
   openssl s_client -connect yourdomain.com:443 -brief 2>/dev/null | grep -E "Verification|subject"
   
   
   
   # 5. Check which Cloudflare PoP is serving you
   
   curl -s -o /dev/null -w "Status: %{http_code} — CF-Ray: %header{cf-ray}\n" https://yourdomain.com
   
   

   
   
   
   
   
   
   
   

   In the Cloudflare dashboard you now have:

   
   
   
   
   
   • 
     Analytics → real-time requests, bandwidth, unique visitors, cache hit ratio
   
   
   • 
     Security → threats blocked, bot traffic, firewall events
   
   
   • 
     Pages → Deployments → full deployment history, build logs, preview URLs for every branch
   
   
   
   
   
   
   
   

   
   
   
   Part 9: Your Ongoing Deployment Workflow
   

   
   
   

   Every future update follows this pattern:
   
   

   
   
   
   
   

   CODE Kopieren

   # 1. Make your change locally
   
   vim index.html        # add a new project, update bio, etc.
   
   
   
   # 2. Commit with a meaningful message
   
   git add .
   
   git commit -m "feat: add HashiCorp Vault HA project card"
   
   
   
   # 3. Push to GitHub
   
   git push
   
   
   
   # 4. Cloudflare Pages detects the push and deploys automatically
   
   # Monitor at: dash.cloudflare.com → Workers & Pages → your project → Deployments
   
   

   
   
   
   
   
   
   
   

   Deployment completes in under 30 seconds. The new version is live globally across 300+ Cloudflare edge locations simultaneously.

   
   
   

   This is exactly how production static sites are deployed at scale. You just built the same pipeline engineering teams use at startups and enterprises. Write it on your CV.

   
   
   
   
   
   

   
   
   
   Part 10: What Content to Put On It
   

   
   
   

   Now that infrastructure is running, populate it with real content in this priority order:

   
   
   

   
   
   
   Projects Section
   

   
   
   

   For each project:

   
   
   
   
   
   • One-sentence description of the problem it solves
   
   
   • Technologies used — be specific: "Cloudflare Pages" not just "CDN"
   
   
   • Link to the GitHub repository
   
   
   • Link to your dev.to write-up if you published one
   
   
   
   
   

   
   
   
   Troubleshooting
   

   
   
   

   
   
   
   Site shows a Cloudflare error instead of your portfolio
   

   
   
   
   
   
   • Confirm the custom domain is activated: Workers & Pages → Custom domains → green checkmark
   
   
   • Check DNS has propagated: dig yourdomain.com CNAME
     
   
   
   • Wait 5–10 minutes and hard refresh
   
   
   
   
   

   
   
   
   Build fails in Cloudflare Pages
   

   
   
   
   
   
   • Go to Deployments tab → click the failed deployment → View build log
     
   
   
   • For a static site with no build command, the most common cause is a misconfigured output directory
   
   
   • Ensure Build output directory is empty (not dist or build — those are for frameworks)
   
   
   
   
   

   
   
   
   Custom domain not activating
   

   
   
   
   
   
   • Confirm nameservers are on Cloudflare: dig NS yourdomain.com
     
   
   
   • Check your domain shows Active status under Websites in Cloudflare
   
   
   • The domain must be active in Cloudflare before Pages custom domain recognition works
   
   
   
   
   

   
   
   
   Mixed content warnings
   

   
   
   
   
   
   • All src= and href= attributes must use https:// or protocol-relative //
     
   
   
   • Cloudflare's Automatic HTTPS Rewrites handles most of these automatically
   
   
   
   
   

   
   
   
   Changes not appearing after push
   

   
   
   
   
   
   • Check the Deployments tab — did the build succeed?
   
   
   • Hard refresh: Ctrl + Shift + R (Windows/Linux) / Cmd + Shift + R (Mac)
   
   
   • Go to Caching → Purge Everything in Cloudflare if the old version persists
   
   
   
   
   
   
   
   

   
   
   
   Architecture Summary
   

   
   
   
   
   
   
   

   CODE Kopieren

   You (developer)
   
         │
   
         │  git push origin main
   
         ▼
   
   GitHub Repository (source of truth)
   
         │
   
         │  Cloudflare Pages webhook detects push
   
         ▼
   
   Cloudflare Pages Build Pipeline
   
     ├── Pulls latest code from GitHub
   
     ├── Runs build (instant for static HTML/CSS/JS)
   
     └── Deploys to Cloudflare edge network
   
         │
   
         ▼
   
   Cloudflare Edge (300+ PoPs globally)
   
     ├── Serves yourdomain.com
   
     ├── SSL/TLS — Full (strict)
   
     ├── CDN caching
   
     ├── Always-HTTPS redirect
   
     ├── DDoS protection (always-on)
   
     ├── Bot Fight Mode
   
     └── Brotli compression
   
         │
   
         ▼
   
   End User — fast, secure, globally distributed ✅
   
   

   
   
   
   
   
   
   
   
   
   
   

   
   
   
   What This Proves on Your CV
   

   
   
   

   
   

   Personal Portfolio Website — Deployed static site via Cloudflare Pages with GitHub CI/CD integration. Configured custom domain, Full (strict) SSL, HSTS, DDoS protection, bot filtering, Brotli compression, and edge caching. Site globally distributed across 300+ Cloudflare PoPs with automated deployments triggered on every commit to main.

   
   

   
   
   

   That is seven production skills in a project that costs $10/year to run.

   
   
   
   
   
   

   
   
   
   Next Steps
   

   
   
   
   
   
   1. 
      Add Cloudflare Web Analytics — Analytics → Web Analytics → add your site. Free, privacy-respecting, no cookie banner needed
   
   
   2. 
      Add a contact form — work without any backend
   
   
   3. 
      Write your first blog post and link it from the writing section — closes the loop on building in public
   
   
   4. 
      Add a Projects page — every Talent Forge project you complete gets a card here
   
   
   5. 
      Project 2: Containerise a real application with Docker and deploy via a full CI/CD pipeline
   
   
   
   
   
   
   
   

   
   
   
   Resources
   

   
   
   
   
   
   
   
   
   
   • Reference Implementation:
     
   
   
   
   
   
   
   
   

   
   
   
   About the Talent Forge Program
   

   
   
   

   This article is the official solution guide for Project 1 of the .

   
   
   

   The program takes you from zero to a portfolio that gets you hired — through real projects, real infrastructure, and real documentation you can point employers at.

   
   
   

   Join the program:

   
   
   

   The GitLab variant (GitLab Pages + custom domain) is the companion article.

   Vollständiger Original-Bericht

   Ausführliche Details, Code-Beispiele & Hersteller-Stellungnahme auf dev.to.

   ↗ Original-Artikel auf dev.to lesen