文章目錄

我一直用 Hugo 經營這個部落格,用得很習慣也很穩定。這次突然想試試讓 GPT-6 Astra 把網站重寫成 Astro,從修改程式到調整 Cloudflare Pages、正式部署都交給 Agent 處理。我只負責提出要求和快速審查,最後直接打開 Preview 確認使用感受。
結果很順利。首頁、分類列表、文章內頁與分頁的操作感受都和 Hugo 版本一樣。框架換了,訪客感覺不到差別,就是我想要的結果。
我的網站本來就架在 Cloudflare Pages。2026 年 1 月,Cloudflare 宣布 Astro 公司與團隊加入,讓我開始留意這個框架。最近使用 GPT-6 Astra 的感受也不錯,就想試試它能不能把現有網站無縫換過去。
從 Hugo 重寫成 Astro
我的要求是「從訪客角度看,外觀、SEO 網址和功能都要與原本對齊」,其他技術設計採官方建議與最佳實踐。元件怎麼拆、文章怎麼讀取等細節,就由 Agent 查官方文件並分析現有程式後決定。
開始實作前,我先讓 Agent 盤點專案並整理規則、發佈流程與原站驗收基準。都確定好後再開實驗分支進行重寫,後續也用這份基準比對新舊網站。
Agent 保留 Markdown 文章與圖片,主要改寫產生網站的程式:
| 部分 | 實際處理 |
|---|---|
| 頁面版型 | 把 Hugo 模板改成 Astro 元件,重建首頁、列表與文章頁 |
| 文章資料 | 讓 Astro 讀取既有文章、日期、分類、標籤與指定網址 |
| 外觀與操作 | 沿用 CSS 和互動 JavaScript,保留選單、目錄、搜尋與燈箱 |
| 文章呈現 | 對齊圖片尺寸、表格、程式碼行號與段落連結 |
| SEO 與訂閱 | 保留 canonical、sitemap、RSS 與舊網址轉址 |
Astro 建置成功後,Agent 繼續比對原站輸出並逐項修正標題尺寸、導覽文案、圖片與分頁別名的差異。
像網站的 C#、CI/CD 標籤就有原本的網址,不能直接套用新框架的預設轉換方式。部分舊文章的 Markdown 表格用了較短的表頭,換解析器後連手機上的表格寬度也需要調整。Agent 都是在程式裡處理這些差異,文章原檔保留不動。
Cloudflare Pages 組建設定
網站繼續用同一個 Pages 專案和正式網域部署靜態網頁,只需要調整建置環境與輸出位置:
| 設定 | Hugo 版本 | Astro 版本 |
|---|---|---|
| 組建命令 | hugo --minify |
npm run build |
| 輸出目錄 | public |
dist |
| 版本管理 | HUGO_VERSION |
移除 Hugo 設定,以 .node-version 固定 Node.js 版本,套件由 lockfile 鎖定 |
npm run build 與 dist 也是 Cloudflare Pages 官方 Astro 文件列出的設定。
當時實驗分支已經改成 Astro,正式分支還在用 Hugo。Agent 先讓組建命令判斷分支用哪個框架,讓兩邊都能正常建置。等正式切換完成後才改成 npm run build。
這些設定也由 Agent 修改,我最多快速看一下 Pages 上的組建命令和合併請求的 diff 有沒有怪怪的。
Preview 驗收與發佈
我直接打開 Cloudflare Pages Preview 並快速操作首頁、分類列表、文章內頁與分頁,感覺都和原站一樣。
細節則交給 Agent 自動檢查,當時的 Preview 驗收結果如下:
| 檢查 | 結果 |
|---|---|
| 九種頁型,各比對桌面與手機尺寸 | 十八組主要元素的位置、尺寸,沒有超過 1px 的差異 |
| 選單、搜尋、目錄、RSS 複製與燈箱 | 已測操作與原站一致 |
| 舊網址轉址 | 911 條核對完成 |
| 頁面與資源 | 36 個頁面/端點、310 個資產檢查通過 |
確認 Preview 操作正常且檢查結果沒問題後,我就讓 Agent 正式發佈了。部署也順利完成。
總結
至少在這個部落格上,GPT-6 Astra 順利完成了 Hugo 到 Astro 的切換。從重寫、相容性修正到部署都由 Agent 處理,我提出要求並確認結果,訪客操作起來仍和原本一樣。
換成 Astro 後,我最有感的是換電腦時不用再另外安裝 Hugo、處理版本差異。準備好專案指定的 Node.js 後,執行 npm ci 就能依 lockfile 安裝套件,再用 npm run dev 啟動網站。