為什麼我選擇 Astro 5 來建立技術 Blog

為什麼我不再用 WordPress？

這個 Blog 的前身是一個 WordPress 網站。WordPress 很成熟、外掛豐富，我用了好幾年，但隨著時間累積，問題愈來愈多：

• 每次更新都要擔心外掛衝突
• 頁面載入時間拖累 SEO 分數
• PHP 主機費用 + 資安維護成本不低
• 寫技術文章想放程式碼區塊，格式常常跑版

我一直在找一個以開發者為核心的解決方案——自己掌控一切，部署快、效能好、寫作體驗佳。

用 Claude Code + Sonnet 4.6 一鍵搭站

讓我驚訝的不只是 Astro 本身，而是整個搭站過程只花了幾十分鐘。

我用 Claude Code 搭配 Claude Sonnet 4.6 模型，給了以下這個 prompt：

請幫我在這個資料夾建立一個 Astro 5.x 技術 Blog 專案，需求如下：
- 語言：繁體中文
- 框架：Astro 5.x + Tailwind CSS
- 文章格式：MDX（放在 src/content/blog/ 資料夾）
- 功能：首頁文章列表、單篇文章頁面、分類/標籤頁面
- SEO：sitemap、Open Graph、meta description
- 設計：乾淨的技術 blog 風格，有 Cloud/AI 科技感
- 部署：Vercel（加入 vercel.json）

請直接建立所有必要的檔案和資料夾結構。

Claude Code 直接幫我建出完整的專案結構：所有 Astro 元件、Tailwind 設定、Content Collections schema、SEO meta、sitemap 設定、Vercel 部署檔——一次到位。

這在 WordPress 時代根本無法想像。以前光是選主題、裝外掛、改樣式就要搞好幾天。

Keystatic CMS：保留 WordPress 的後台體驗

用 Git + MDX 管理文章對工程師來說很舒服，但我也不想每次寫文章都要開 VSCode、打 frontmatter、push commit。

所以我加裝了 Keystatic CMS。

Keystatic 是專為 Astro / Next.js 設計的 Git-based CMS，安裝後會在你的網站上提供一個後台介面：

https://www.michaelwu.cloud/keystatic

登入後的操作跟 WordPress 後台很像——點選文章、直接編輯、儲存後自動透過 GitHub commit 到 main，然後自動部署。

與 WordPress 後台的比較：

從 Vercel 搬到 Cloudflare Pages

最初我把 Blog 部署在 Vercel，一切運作得很好——但隨著我同時維護多個網站，Vercel 免費方案的限制開始浮現：

• 每天只能部署 100 次：debug 密集時很容易撞到上限
• 每次存到 Keystatic 就觸發一次 deploy，很快就超標

更重要的是，我的 DNS 本來就在 Cloudflare，而 Cloudflare 提供了一個完美的替代方案：Cloudflare Pages。

Cloudflare Pages vs Vercel 免費方案比較：

搬遷的好處立即顯現：

1. 不再有 deploy 限制——再多的 Keystatic 編輯也不怕
2. DNS 在同一個平台——不用在 Cloudflare 和 Vercel 之間切換
3. 更快的全球 CDN——Cloudflare 的節點遍布全球，連線速度更快
4. DDoS 防護自動啟用——不需要額外設定

搬遷過程很簡單：把 Astro adapter 從 @astrojs/vercel 換成 @astrojs/cloudflare，在 Cloudflare Dashboard 連接 GitHub repo，DNS 自動就指向對了。

遷移後的整體比較

Astro 的核心理念：Islands Architecture

Astro 最創新的概念是 Islands Architecture（群島架構）。

傳統 SPA 框架把整個頁面當成一個大型 JavaScript 應用。Astro 的思路相反：預設送純 HTML，只在真正需要互動性的地方才載入 JS。

---
// 靜態元件：編譯時渲染，零 JavaScript
import StaticHeader from "./Header.astro";

// 動態島嶼：客戶端水化
import SearchBox from "./SearchBox.tsx";
---

<StaticHeader />

<!-- 只有這個元件會載入 JS -->
<SearchBox client:load />

Content Collections：類型安全的內容管理

Astro 5 的 Content Collections 讓所有文章的 frontmatter 都有靜態型別驗證，寫錯就在建置時報錯：

// src/content/config.ts
import { defineCollection, z } from "astro:content";

const blog = defineCollection({
  type: "content",
  schema: z.object({
    title: z.string(),
    description: z.string(),
    pubDate: z.coerce.date(),
    category: z.string(),
    tags: z.array(z.string()),
    draft: z.boolean().default(false),
  }),
});

export const collections = { blog };

Contact Form：用 Web3Forms 免費收表單

如果你的網站需要聯絡表單，不需要後端也不需要資料庫，Web3Forms 是最適合靜態網站的選擇。

為什麼選 Web3Forms？

• 完全免費（每月 250 次提交）
• 無需後端，表單直接送到你的 email
• 支援多個網站、多個收件信箱
• 與 Astro 靜態網站完美相容

使用方式非常簡單：

1. 去 web3forms.com 建立帳號，填入收件 email，取得 Access Key
2. 在 Astro 頁面加入表單：

<form action="https://api.web3forms.com/submit" method="POST">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
  <input type="hidden" name="subject" value="New Contact from Your Website">
  
  <input type="text" name="name" placeholder="Your Name" required>
  <input type="email" name="email" placeholder="Your Email" required>
  <textarea name="message" placeholder="Message" required></textarea>
  
  <button type="submit">Send Message</button>
</form>

3. 表單送出後，訊息直接寄到你的 email，不需要任何伺服器。

如果要送到不同收件信箱（例如客戶的 email），只要在 Web3Forms Dashboard 建立一個新的 Access Key，綁定不同的 email 即可——每個網站可以有自己的收件信箱。

結語

從 WordPress 搬到 Astro 5，再從 Vercel 搬到 Cloudflare Pages，是我這幾年做過最值得的技術決定。

完整的現代 Blog 工作流：

1. Claude Code 幫我把架構搭起來
2. Astro + Tailwind 提供極致效能
3. Keystatic CMS 保留後台編輯體驗
4. GitHub 版本控制
5. Cloudflare Pages 無限制部署 + 全球 CDN + 免費 DDoS 防護

零主機費、零資安顧慮、零部署限制、寫作體驗不打折——這才是工程師的 Blog 應有的樣子。

這個 Blog 使用 Astro 5 + Tailwind CSS + MDX + Keystatic CMS 建立，部署在 Cloudflare Pages，DNS 和 CDN 由 Cloudflare 管理，原始碼在 GitHub 上管理。