【WordPress 搬家 Astro 教學】告別主機費！靜態部落格重建、R2 圖床與 Cloudflare Pages 實戰完整紀錄
經營 WordPress 部落格這幾年，Kent 一直很在意網站速度與每個月固定的主機維護費用。直到深入接觸了 Astro 這個現代化靜態站點生成（SSG）框架，才下定決心將累積了上百篇文章的部落格徹底搬家。
這篇文章將完整公開從 WordPress 遷移到 Astro 的全流程實戰紀錄：從利用 REST API 自動化抓取文章、圖片轉移至 Cloudflare R2 圖床、配置 Cloudflare Pages 免費部署，到解決過程中的各種技術坑點，分享給想打造極速網站的站長與前端開發者！
⚡ 30 秒速查：WordPress vs Astro 搬家前後全方位對比
| 比較維度 | 舊架構：WordPress 傳統動態站 | 新架構：Astro 5 + Cloudflare |
|---|---|---|
| 💰 主機費用 | 每月 NT$300 ~ 1,000+（隨流量增長） | NT$ 0 元（Cloudflare Pages 免費方案） |
| 🚀 載入速度 | PageSpeed 50~70 分（受限於 PHP/MySQL） | PageSpeed 95~100 分（極速 HTML/CDN 快取） |
| 🛡️ 資安維護 | 需持續更新核心、主題與外掛防範漏洞 | 零後端伺服器，無資料庫注入與被駭風險 |
| 🖼️ 圖片圖床 | 存放在主機空間，佔容量且耗頻寬 | Cloudflare R2（S3 相容，免收傳出流量費） |
| 🔍 站內搜尋 | 依賴資料庫查詢或重度外掛 | Pagefind 建置時預先建立離線索引（極速） |
| ✍️ 寫作方式 | 網頁後台視覺化區塊編輯器 | 本機 Markdown / MDX 檔 + Git 版本控制 |
| 🛠️ 技術門檻 | 低（外掛隨裝即用） | 中高（需具備 Node.js、Git 與前端基本概念） |
為什麼決定告別 WordPress？
WordPress 作為全球市佔率第一的 CMS，外掛生態系成熟、SEO 工具完整，後台操作也非常直覺。但隨著部落格文章數量破百，以下幾個痛點逐漸浮現：
- 網站速度與 Core Web Vitals 瓶頸：每次經過 PHP 即時運算與多個外掛的 JavaScript 渲染，首次載入時間（TTFB 與 LCP）很難維持在綠色滿分區間。
- 固定主機租用支出：對於非營利或個人科技部落格，每年幾千元的主機費雖非巨款，但累積下來也是一筆開銷，且流量暴增時還要擔心主機超載。
- 外掛維護與資安焦慮：WordPress 核心與外掛每週都有安全性更新，若不及時修補隨時有被惡意機器人掃描注入的風險。
Astro 是什麼？靜態網站的核心優勢
Astro 是一個專為「內容驅動型網站（Content-Driven Websites）」打造的現代化靜態網站框架。
- 預設零 JavaScript (Zero JS by default)：Astro 會在 Build（建置）時期直接將程式碼編譯成乾淨的靜態 HTML/CSS，訪客造訪時不需要在瀏覽器下載肥大的 JS bundle，速度自然極致飛快。
- 群島架構 (Islands Architecture)：若頁面需要互動（如站內搜尋框、深色模式切換按鈕），僅針對該區塊載入輕量 Svelte 或 Vue 元件，其餘部分維持純靜態。
- 搭配 Cloudflare Pages 實現「零主機費」：靜態檔案直接託管在 Cloudflare 的全球邊緣 CDN 節點，全球訪客都能就近秒開網頁。
佈景主題與前端技術棧選型
Kent 本次選擇了 Fuwari 作為基礎主題進行客製化二次開發，專案整體技術棧配置如下：
- Astro 5.x — 核心 SSG 靜態網站框架與檔案路由
- Svelte 5.x — 搜尋彈窗、側欄收折、深淺色外觀切換互動元件
- Tailwind CSS 3.x — 現代化原子樣式庫
- Pagefind — 建置時自動提取中英文關鍵字的靜態全文檢索
- Cloudflare Pages — 全球邊緣託管與自動化持續部署（CI/CD）
- Cloudflare R2 — 圖片專用物件儲存與 CDN 圖床
核心實戰一：文章資料無痛自動化遷移
面對上百篇既有文章，手動複製貼上極耗時間。Kent 撰寫了一套 Node.js 自動化遷移腳本，分為兩大階段：
Step 1：透過 WordPress REST API 抓取原始文章
WordPress 內建開放的 REST API，不需要額外安裝外掛即可透過端點抓取：
https://你的網域/wp-json/wp/v2/posts抓取腳本的關鍵設計：
- 分頁處理：讀取 Response Header 中的
X-WP-TotalPages決定總頁數（每頁抓取 100 筆）。 - 自動重試機制 (Retry)：加入 3 次失敗重試與每次 1 秒間隔，避免網路短暫抖動導致中斷。
- 請求節流 (Rate Limiting)：每頁抓取間隔 300ms，保護源站伺服器不被觸發限流。
- 關聯資源打包：同步抓取
media（媒體庫）、categories（分類）與tags（標籤）存為 JSON。
node fetch-all.jsStep 2：將 JSON 轉為 Astro Markdown (.md)
取得原始資料後，透過 convert.js 腳本批次轉換為帶有 YAML Frontmatter 的 Markdown 檔案：
- HTML 轉 Markdown：採用 turndown 套件，將 WordPress 的複雜 HTML 標籤精準轉換為語意化 Markdown。
- 精選圖片 (Featured Image) 判定：優先提取文章的
featured_media，若無則自動提取內文第一張圖片做為封面圖。 - SEO 描述清理：優先使用 WordPress 摘要，自動過濾 HTML 殘留符號，並控制在 120~160 字元內。
- 自動產生 Frontmatter：動態組成包含
title、published、updated、image、category、tags的標準格式。
node convert.js腳本執行完畢後，產生的 .md 檔案直接放入 src/content/posts/ 即可被 Astro Content Collections 自動讀取。
核心實戰二：圖片遷移至 Cloudflare R2 圖床
原本 WordPress 圖片存放在主機 /wp-content/uploads/ 目錄。遷移至靜態站點後，將所有圖片移至 Cloudflare R2 物件儲存，不僅釋放本機儲存空間，更能享有全球 CDN 快取。
💡 為什麼選擇 Cloudflare R2？與 AWS S3 相比，Cloudflare R2 完全不收取對外傳輸流量費用（Zero Egress Fees，即讀取/下載圖片免流量費）！每個月還提供 10GB 免費儲存空間，對於個人部落格與技術圖片庫來說幾乎零成本。
1. 建立 R2 儲存貯體 (Bucket)
- 登入 Cloudflare Dashboard ➔ 點選 《 R2 物件儲存 》 ➔ 《 建立儲存貯體 》（如：
blog3c-assets）。 - 進入 Bucket 設定 ➔ 綁定 自訂網域（如：
img.blog3c.net）。 - 於 R2 API 頁面建立 Token，取得
Access Key ID與Secret Access Key。
2. 使用 rclone 批次同步圖片
rclone 支援 S3 相容協定，設定檔 ~/.config/rclone/rclone.conf 設定如下：
[r2]type = s3provider = Cloudflareaccess_key_id = YOUR_ACCESS_KEY_IDsecret_access_key = YOUR_SECRET_ACCESS_KEYendpoint = https://<ACCOUNT_ID>.r2.cloudflarestorage.com執行同步腳本並設定一年靜態快取標頭：
rclone sync ./images r2:blog3c-assets --progress \ --header-upload "Cache-Control: public, max-age=31536000, immutable"核心實戰三：Cloudflare Pages 部署與全自動化流程
部落格建置完成後，透過 Wrangler CLI 部署至 Cloudflare Pages：
npm run deploy此指令自動完成的流水線：
astro build— 編譯產出極速靜態 HTML/CSS/JS 檔案於dist/。pagefind --site dist— 掃描生成站內離線搜尋索引庫。wrangler pages deploy dist --branch master— 將靜態資源同步至 Cloudflare Pages 正式環境。node scripts/purge-cache.js— 呼叫 Cloudflare API 清理邊緣快取，確保訪客立即看到最新文章。
核心實戰四：SEO、結構化資料與 GA 追蹤優化
WordPress 搬到 Astro 最大的挑戰在於失去 SEO 外掛（如 Rank Math/Yoast）。在 Astro 中需自行於版型確保符合現代 SEO 規範：
1. Google Analytics (Partytown 非同步載入)
在 src/layouts/Layout.astro 中結合 Partytown，將 GA 追蹤腳本移至背景 Web Worker 執行，避免阻礙主執行緒，確保 Core Web Vitals 保持綠色滿分。
2. Schema.org 結構化資料 (JSON-LD)
為每篇文章注入符合 Google 複合式結果（Rich Results）規範的 BlogPosting 與 BreadcrumbList 麵包屑結構化資料：
<script type="application/ld+json">{ "@context": "https://schema.org", "@graph": [ { "@type": "BlogPosting", "headline": "文章標題", "image": ["https://img.blog3c.net/cover.webp"], "datePublished": "2026-04-28T00:00:00.000Z", "dateModified": "2026-08-18T00:00:00.000Z", "author": { "@type": "Person", "name": "Kent" }, "publisher": { "@type": "Organization", "name": "攻城濕不說的秘密" } }, { "@type": "BreadcrumbList", "itemListElement": [...] } ]}</script>3. Open Graph 與 Twitter 社群預覽卡片
為每篇文章動態計算絕對圖片網址，並設定預設 Fallback 分享縮圖，確保在 LINE、Facebook 與 Twitter 分享時呈現吸睛的卡片。
搬家過程踩過的「坑」與解決方案
⚠️ 必看避坑指南搬家過程中幾個容易讓人卡關的問題與正確解法：
- Wrangler 部署後顯示「Cloudflare Pages not deploying」
- 原因：Wrangler 初始化時若未明確指定分支，Cloudflare Pages 正式環境分支與本地推送分支對不上。
- 解法：在 deploy 指令強制加入
--branch master（wrangler pages deploy dist --branch master）。
- 舊網址 301 轉址無限迴圈 (Redirect Loop)
- 原因：舊網址為
/blog/*，若在_redirects使用萬用字元會誤匹配到新網址/blog/post/*。 - 解法：改用具名參數規則
/blog/:slug /blog/post/:slug 301精準比對單層路徑。
- 原因：舊網址為
- robots.txt 誤封鎖靜態資源
- 原因：主題預設若含有
Disallow: /_astro/，會導致 Googlebot 與 PageSpeed 無法讀取編譯後的 CSS/JS 檔案。 - 解法：在
src/pages/robots.txt.ts明確設定Allow: /並放行各大 AI 搜尋爬蟲。
- 原因：主題預設若含有
- HTML 實體字元殘留
- 原因：WordPress REST API 導出的 JSON 可能含有
–、’等符號。 - 解法：在轉換腳本中使用正則表達式或 HTML 解碼套件先做字串清理。
- 原因：WordPress REST API 導出的 JSON 可能含有
搬家後的真實心得總結
部落格從 WordPress 遷移至 Astro 靜態站點後，帶來的改善非常顯著：
- 速度有感提升：首頁與內文頁面在各國測試均能實現「秒開」，PageSpeed 效能分數穩居 95 分以上。
- 維護成本歸零：徹底告別每月的主機帳單，Cloudflare Pages 與 R2 的免費額度對個人技術部落格綽綽有餘。
- 寫作更專注：改用本機 VS Code / Markdown 寫作搭配 Git 版本控制，排版乾淨且不用擔心線上編輯器當機遺失內容。
如果你也正為 WordPress 速度緩慢或主機支出感到困擾，Astro + Cloudflare Pages 絕對是 2026 年最值得投入的部落格重構方案！