Cloudflare Pages Architecture

Mở đầu

leduykhuong.com deploy trên Cloudflare Pages — platform hosting static sites và fullstack apps. Tại sao chọn CF Pages thay vì Vercel (Next.js creator), Netlify, hoặc GitHub Pages? Bài này giải thích architecture, trade-offs, và cách CF Pages ảnh hưởng tới SEO/analytics.

Mục tiêu: Hiểu CF Pages infrastructure, deploy workflow của leduykhuong.com, và tại sao static export + CF Pages = strong SEO foundation.

CF Pages vs Alternatives

Edge PoP locations:

Free tier bandwidth comparison:

Tại sao CF Pages cho leduykhuong.com?

1. Unlimited bandwidth — Không lo traffic spike. Vercel/Netlify giới hạn 100GB.
2. 300+ edge locations — Cloudflare có PoPs ở Vietnam (Hà Nội, HCM) → fast response cho Vietnamese audience.
3. DNS integration — Domain đã dùng Cloudflare DNS → add Pages = zero config.
4. Cloudflare ecosystem — Web Analytics, Workers, R2 Storage — cùng platform.
5. No vendor lock-in — Static HTML deploy anywhere. Không depend vào Vercel-specific features.

Architecture — How CF Pages Serves leduykhuong.com

Key points:

• No origin server — Static files stored in Cloudflare's distributed storage. Không có server để maintain, scale, hoặc crash.
• Edge caching — HTML cached tại edge PoP gần user nhất. Vietnamese users hit HCM/Hanoi PoP → ~50ms TTFB.
• Auto SSL — Cloudflare issue SSL cert tự động. HTTPS enforced.
• Brotli compression — Cloudflare compress response tự động. HTML/CSS/JS size giảm ~60-80%.

Deploy Workflow

leduykhuong.com dùng manual deploy (không có CD):

# 1. Build locally
cd ACE-component/ACE-leduykhuong-site
npm run build
# → Output: out/ directory (static HTML)
 
# 2. Deploy to CF Pages
npx wrangler pages deploy out --project-name=leduykhuong-site
 
# 3. Verify
curl -I https://leduykhuong.com
# → HTTP/2 200, cf-cache-status: HIT

Tại sao manual, không CD?

1. Control — Deploy khi anh quyết định, không phải mỗi commit
2. Preview — Build local, verify trước khi deploy
3. Cost — Không dùng build minutes trên CF (build local = free)
4. Speed — Local build fast hơn CF build (deps cached local)

Wrangler CLI

wrangler là Cloudflare's CLI tool:

# Login (one-time)
npx wrangler login
 
# Deploy
npx wrangler pages deploy <directory> --project-name=<name>
 
# List deployments
npx wrangler pages deployment list --project-name=leduykhuong-site

SEO Impact — Tại sao CF Pages tốt cho SEO

1. Speed (Core Web Vitals)

Google dùng Core Web Vitals như ranking signal:

leduykhuong.com actual vs target:

Static HTML + edge CDN = consistently fast metrics.

2. Uptime

CF Pages: 99.99% uptime SLA. No server to crash. Google bots always find site available → positive crawl signal.

3. HTTPS Everywhere

Google prefers HTTPS sites. CF Pages enforce HTTPS automatically.

4. Geographic Coverage

Cloudflare edge ở 300+ cities → fast response globally. Google measures page speed per region → consistent fast globally.

CF Pages Features cho Static Sites

Preview Deployments

Mỗi deployment tạo unique URL:

Production: leduykhuong.com
Preview: abc123.leduykhuong-site.pages.dev

Preview URLs cho phép test trước production deploy. Useful cho:

• Verify SEO changes (metadata, structured data)
• Test new blog posts rendering
• Share with reviewers

Custom Headers

CF Pages cho phép custom response headers qua _headers file:

# _headers file in out/ directory
/*
  X-Content-Type-Options: nosniff
  X-Frame-Options: DENY
  Referrer-Policy: strict-origin-when-cross-origin

Security headers cải thiện Lighthouse security audit.

Redirects

_redirects file cho URL redirects:

# Old URL → New URL
/blog/old-slug  /vi/blog/new-slug  301

301 redirects preserve SEO value (ranking signals transfer to new URL).

Limitations

Impact assessment — limitations vs blog requirements:

▲ Impact score (0–100) — tất cả đều LOW impact cho static blog use case

Thực hành

Bài tập 1: Check CF cache status

curl -I https://leduykhuong.com/vi/blog/learning-in-public
# Look for: cf-cache-status: HIT/MISS/DYNAMIC

Câu hỏi: Page đã cached? cf-cache-status là gì?

Bài tập 2: Measure TTFB

# Time to First Byte
curl -o /dev/null -s -w "TTFB: %{time_starttransfer}s\n" \
  https://leduykhuong.com/vi/blog/learning-in-public

So sánh TTFB từ Vietnam vs từ nước khác (dùng VPN nếu có).

Bài tập 3: Deploy workflow

cd ACE-component/ACE-leduykhuong-site
npm run build
ls -la out/ | head -10
# Verify: sitemap.xml, robots.txt, index.html tồn tại?

Tóm tắt

• CF Pages = static hosting trên Cloudflare edge network (300+ PoPs, unlimited bandwidth free)
• Manual deploy — wrangler pages deploy out/ — control khi nào deploy
• SEO advantage — Fast TTFB (edge cache), 99.99% uptime, auto HTTPS, global coverage
• No server — Static files only, no maintenance, no scaling concerns
• Limitations — No SSR/ISR, no server logs — acceptable cho static blog
• Preview deployments — Unique URL per deploy cho testing

Bài tiếp theo

Bài 21: Environment Variables & Secrets — Cách quản lý API keys (GA4 ID, PostHog key, GSC verification) trên CF Pages. Environment variables trong build vs runtime, và security considerations.