用 Cloudflare Pages 零成本部署靜態網站

Cloudflare Pages 提供免費的靜態託管 + 全球 CDN，且與 GitHub 深度整合：Push 即部署。下面是完整流程。

前置條件

• 一個 GitHub 倉庫（站點原始碼）
• 一個 Cloudflare 帳號（免費版就夠）
• 建構指令與產物目錄（如 Astro：npm run build → dist）

部署步驟

1. 推送程式碼到 GitHub

git init
git add -A
git commit -m "init"
git remote add origin https://github.com/crazynotesman-svg/markdown-pdf-studio.git
git push -u origin main

2. 在 Cloudflare Pages 關聯倉庫

1. 登入 Cloudflare 控制台 → Workers & Pages → Create → Pages。
2. 選擇 Connect to Git，授權並選中你的倉庫。
3. 設定建構：
   • Build command：npm run build
   • Build output directory：dist
4. 點擊 Save and Deploy。

3. 每次更新自動上線

此後只要 git push，Cloudflare 會自動拉取、建構並發布，還會保留每次部署的預覽連結。

配置自訂網域（可選）

在 Pages 專案的 Custom domains 中加入你的網域，依提示把 DNS 的 CNAME 指向 Pages。Cloudflare 會自動簽發 SSL 憑證，HTTPS 開箱即用。

常見坑

• 站點絕對連結錯誤：記得在設定檔裡把 site 設成你的正式網域，否則 sitemap/canonical 會是佔位位址。
• 建構逾時：免費額度足夠小站點；依賴過多時精簡依賴。
• 環境變數：純靜態站點通常不需要，但如需可在 Pages 的 Settings → Environment variables 配置。

小結

GitHub 管內容，Cloudflare Pages 管交付——這套組合零成本、全球加速、自動部署，是個人專案與技術部落格的理想選擇。

本文所講的部署方式，正是本站點上線的方式。