用 Astro 和 Cloudflare Pages 架設技術部落格

這個網站（blog.top7ya.com）是用 Astro 產生的靜態網頁，放在 Cloudflare Pages 上。商店 top7ya.com 則繼續放在 Cloudways。這篇記錄整個架設流程。

為什麼用靜態網頁

技術文章不需要資料庫，也不需要後台。靜態網頁的好處：

  • 快：只是一堆 HTML 檔案，由 Cloudflare 的 CDN 直接送出。
  • 免費：Cloudflare Pages 的免費方案就夠一般部落格使用。
  • 安全：沒有 PHP、沒有資料庫，也就沒有外掛漏洞要修。
  • 好管理：文章是 Markdown 檔案，用 Git 保存每一次修改。

架構

網址 放在哪裡 用途
top7ya.com Cloudways（WordPress） 商店
blog.top7ya.com Cloudflare Pages 技術文章

兩個網址共用同一個網域，子網域只是在 Cloudflare DNS 多一筆紀錄，不另外收費。

步驟

1. 建立 Astro 專案

npm create astro@latest blog -- --template blog
cd blog
npm run dev

打開 http://localhost:4321 就能在本機預覽。

2. 寫文章

文章放在 src/content/blog/，一篇一個 .md 檔，開頭寫標題、說明和日期：

---
title: '文章標題'
description: '一句話說明'
pubDate: '2026-10-23'
---

內文從這裡開始。

3. 推到 GitHub

git add .
git commit -m "新增文章"
git push

4. 連接 Cloudflare Pages

在 Cloudflare 後台建立 Pages 專案、連結 GitHub repo，建置設定：

  • Build command：npm run build
  • Build output directory：dist

之後每次 git push，Cloudflare 就會自動重新建置並上線。

5. 綁定 blog.top7ya.com

在 Pages 專案的「自訂網域」加入 blog.top7ya.com。網域的 DNS 本來就在 Cloudflare，它會自動加好紀錄。

免費方案的限制

依 Cloudflare 官方文件（2026 年 10 月）：

  • 每個網站最多 20,000 個檔案
  • 單一檔案最大 25 MiB
  • 每月 500 次建置

影片或大型壓縮檔超過 25 MiB 時，改放 Cloudflare R2、GitHub Releases 或 YouTube，文章裡放連結即可。