Cloudflare Pages 靜態網站效能極限優化指南

1. 為什麼選擇極簡靜態架構？

在現代 Web 開發中，很多人習慣預設使用 Next.js 或 React 建造任何網站。然而對於以內容傳播為核心的個人 Blog，JavaScriptbundle 大小與 Client-side Hydration 往往會降低手機端的加載速度，並對 SEO 造成額外負擔。

透過使用乾淨的原生 HTML5、動態 CSS Token 系統與少量 Vanilla JavaScript，我們可以在 Cloudflare Pages 上達到：

• Lighthouse 效能分數 100/100。
• TTFB (Time to First Byte) < 50ms（在全球 Cloudflare 300+ Edge 節點完全快取）。
• 零伺服器維運代價，支援自訂網域與免費 SSL 憑證。

2. CSS Token 與零依賴設計

使用 CSS 自訂屬性 (CSS Variables)，我們可以在單一 `.css` 檔案中同時實現深色/淺色主題管理，完全不需要引入外部 Tailwind 打包工具：

:root {
  --bg-main: #0B0F17;
  --accent-cyan: #00F0FF;
  --font-mono: 'JetBrains Mono', monospace;
}

:root[data-theme="light"] {
  --bg-main: #F8FAFC;
  --accent-cyan: #0284C7;
}

3. Cloudflare Pages 一鍵部署 CLI

部署只需兩行簡短指令，透過 wrangler 工具秒級上線：

# 1. 建立專案 (僅需一次)
npx wrangler pages project create jason-tech-blog --production-branch=main

# 2. 部署靜態檔案
npx wrangler pages deploy . --project-name=jason-tech-blog --branch=main

4. 常見問題解答 (FAQ)