為什麼我選擇 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 後台的比較：

2026 更新：後來我把 Keystatic 移除了，改回直接編輯 MDX 檔案（搭配 Claude Code 寫作）。原本的 /keystatic 後台已經下線，上面那段網址不再有效——這一節保留作為當時的選型紀錄。

部署：Vercel + Cloudflare

Blog 部署在 Vercel——把 GitHub repo 接上去，push 到 main 就自動建置、上線，免費方案對個人 Blog 綽綽有餘。

網域的 DNS 和 CDN 則放在 Cloudflare：全球節點負責解析與加速，還附帶免費的 DDoS 防護。部署歸 Vercel、流量入口歸 Cloudflare，兩邊各司其職。

遷移後的整體比較

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，是我這幾年做過最值得的技術決定。

完整的現代 Blog 工作流：

1. Claude Code 幫我把架構搭起來
2. Astro + Tailwind 提供極致效能
3. MDX 直接寫，內容即程式碼
4. GitHub 版本控制
5. Vercel 自動部署，Cloudflare 全球 CDN + 免費 DDoS 防護

零主機費、零資安顧慮、零維運負擔、寫作體驗不打折——這才是工程師的 Blog 應有的樣子。

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