Migrating VuePress Blog to Cloudflare Pages with Blue-Green Deployment

The blog was originally hosted on GitHub Pages, accessed through Cloudflare CDN. This migration moves build output directly to Cloudflare Pages, eliminating the GitHub Pages middle layer for faster edge delivery and better cache control. A blue-green deployment strategy ensures zero-downtime migration.

Project Info

Item	Value
Blog URL	https://blog.example.com
CF Pages green env	https://your-project.pages.dev
Workflow file	.github/workflows/deploy-cloudflare.yml

Migration Steps

1. Update GitHub Actions Workflow

Modify .github/workflows/deploy-cloudflare.yml to set --project-name to the CF Pages project name.

2. Configure GitHub Secrets

Add in repo Settings -> Secrets and variables -> Actions:

• CLOUDFLARE_API_TOKEN: Create in Cloudflare Dashboard -> My Profile -> API Tokens using the "Cloudflare Pages" template
• CLOUDFLARE_ACCOUNT_ID: Your Cloudflare account ID

3. Create CF Pages Project

In Cloudflare Dashboard -> Workers & Pages -> Create -> Pages -> Connect to Git, link the GitHub repo.

4. Commit and Verify Green Environment

git add .github/workflows/deploy-cloudflare.yml
git commit -m "feat: deploy to Cloudflare Pages"
git push

GitHub Actions runs both workflows (GH Pages + CF Pages) simultaneously. Access the green environment URL to verify after deployment.

5. DNS Switch (Blue-Green Cutover)

After verifying the green environment, change the blog's CNAME record in Cloudflare Dashboard -> DNS from GitHub Pages to CF Pages.

6. Keep Both Workflows Running in Parallel

After DNS switch, keep both workflows running for 1-2 weeks. Disable the GitHub Pages workflow only after confirming CF Pages stability, serving as a rollback safety net.

Browser Test Results (Green Environment)

Test	Result	Notes
Homepage	✅	Article cards render correctly
English site	✅	English titles display properly
Search	✅	slimsearch returns results
Article detail	✅	H1/code blocks/TOC/images all normal
404 handling	✅	Custom 404 page works
Mobile	✅	375px viewport, no horizontal overflow
Console errors	✅	Zero errors, zero warnings

CDN Cache Test Results (Production)

Resource	cf-cache-status	cache-control	Notes
CSS (hashed)	HIT	-	age increments, edge cache stable
JS (hashed)	HIT	-	age increments, edge cache stable
Article HTML	DYNAMIC	max-age=14400	Origin fetch, 4h TTL
RSS	DYNAMIC	max-age=0	Origin fetch
Sitemap	DYNAMIC	max-age=0	Origin fetch
404 page	BYPASS	-	Direct origin

Hashed CSS/JS files change names with content changes, achieving high CF edge cache hit rates. HTML pages are DYNAMIC; CF Pages edge functions have near-zero latency to the origin (same datacenter), so user experience is close to cached.

Rollback Plan

If CF Pages has critical issues:

1. Change the blog CNAME back to GitHub Pages in Cloudflare Dashboard -> DNS
2. DNS propagation takes ~1-5 minutes (with Cloudflare proxy)
3. GitHub Pages workflow has been running continuously, immediately available after rollback

Notes

• During parallel workflow runs, each push triggers two deployments — this is expected
• CF Pages free tier: 500 builds/month, 20-minute build timeout — more than sufficient for a blog