需要一個資訊內容網站
從去年底開始，我跟朋友就在為之後要接案開始準備。這個的第一步就是我們需要一個專業資訊型的內容網站，有部落格功能，有聯絡表單，不需要會員系統，也不想碰資料庫。比起功能很多，我更在意安全性、效能，以及後續維護會不會很麻煩。最好還能免費 Hosting、有 SSL、有 CDN、可以綁自己的網址，Contact Us 表單送出的訊息也能直接寄到 Email。
這些需求如果放在以前，我大概還是會直接做 WordPress。但這幾年 WordPress 的維護成本越來越高，Plugin 更新、PHP 相容性、後台安全性，每一項都需要時間處理。尤其 /wp-admin 登入頁幾乎是全球駭客首選攻擊目標，外掛一多就開始拖慢速度，加上主機費用、SSL、資安外掛，每個月的維護成本其實不低。
我們想找一個從架構底層就安全的解法。
最後選擇的是 Jamstack 架構 —— 一種「靜態優先」的網站建置方式，沒有資料庫、沒有後端伺服器在跑，網頁在部署時就已經預先渲染好，駭客找不到入口可以進入。整套工具鏈全部使用免費方案，唯一花錢的只有網域購買費用。
「Jamstack 架構」 —— Jamstack 的全稱是 JavaScript, APIs, 及 Markup。它是一種現代 Web 開發架構，目的在讓網站更快速、更安全、更易於擴展。它透過預先渲染 Pre-rendering 靜態檔案並透過 CDN 發佈，利用 JavaScript 和 API 處理動態功能，讓網站不再依賴傳統伺服器。
最後整個架構選擇了 Astro、Sanity.io、Cloudflare Pages、Web3Forms，再搭配 GitHub 做版本管理。Hosting 放在 Cloudflare Pages，因為免費方案就已經包含 SSL、全球 CDN 跟 DDoS Protection，對內容型網站來說很夠用了。
四個挑戰
挑戰一：Vibe Coding 的風格跑掉問題
整個建站流程採用 AI「Vibe Coding」方式進行。設計階段我在 Canva 找到喜歡的 PPT 模板，將它上傳給 Google Stitch，請 AI 根據這個風格幫我產生網站 Prototype。這裡花了不少時間把每個網頁各區塊的內容與視覺調整到接近理想狀態。
問題出在轉換到開發工具時。當我把 Stitch 的 Prototype 連到 Google Antigravity，請它以 Astro 框架重新生成網頁時，整個視覺風格全部跑掉，在 Stitch 裡調整的工全部白費。
我只好把 Stitch 裡每個頁面區塊截圖，直接上傳給 Antigravity，讓它「照圖施工」。這個方法非常有效，區塊一個一個拼，連網頁上的文字都全部到位（網頁上的內容 AI 通常會自己發揮），速度反而比 Prompt 直接描述更快。
「Vibe Coding」—— 用自然語言描述需求，讓 AI 負責產出程式碼，人只負責確認方向與調整細節。
「Google Stitch」—— Google 推出的 AI Prototype 設計工具，支援語音與圖片指令，可快速生成網頁雛形。
「Google Antigravity」—— Google 於 2025 年 11 月推出的 AI 驅動整合開發環境（AI Agent IDE），基於 VS Code 改造，可以自主完成規劃、寫碼、執行終端、測試等任務。
挑戰二：GitHub 推送卡關
網站在本地端架設完成後，要把程式碼推到 GitHub 讓 Cloudflare Pages 部署。這個步驟本來應該透過 Antigravity 的 MCP 來完成，但一直無法成功，最後只好讓 Antigravity 改用手動方式 code push 到 GitHub。
「MCP（Model Context Protocol）」—— 一種讓 AI 工具串接外部服務的標準協議，Antigravity 透過它連接 Sanity、GitHub 等平台，自動完成環境設定。
挑戰三：Cloudflare Workers vs Pages 混淆
部署環節踩了一個很容易犯的錯：把網站部署到 Cloudflare Workers 而不是 Cloudflare Pages。只好刪掉重來，花了不少時間。
補充一個 UI 上的小提醒：Cloudflare Pages 的建立入口有點難找，要從 Dashboard 右上角的 +ADD 下拉選單才能選到「Pages」。
部署完成的網址格式應該是 https://xxxxx.pages.dev，這才代表部署正確。
「Cloudflare Workers」—— 適合有功能邏輯的應用程式或 API。
「Cloudflare Pages」—— 純靜態網站的 hosting 平台，提供免費無限流量、自動 SSL 與 DDoS 防護。
挑戰四：上線後首頁 404
這是整個過程最讓人崩潰的部分。網站成功部署到 Cloudflare Pages 之後，首頁卻一直顯示 404 錯誤。Antigravity 來回 debug 都沒辦法解決，然後我的每週 credit 額度也在這時候用完了（Antigravity 目前提供免費固定額度，超出後需要等到下週重置）。
等了整整一週，我先去問 Cloudflare 自家的 AI，請它給出 troubleshooting 步驟，再把這些步驟交給 Antigravity 執行，才終於找到問題根源並修復。
技術架構選擇
整套架構的核心邏輯是：
讓網站在部署時就把所有頁面都產生成靜態檔案，伺服器上沒有在執行的程式，也沒有資料庫，攻擊面幾乎為零。
前端框架選用 Astro.build、CMS 內容管理系統選用 Sanity.io、聯絡表單使用 Web3Forms。
由於 Web3Forms 免費版只支援一個收件信箱，我另外用 Google Groups 建立一個群組信箱，讓多個 Email 帳號都能收到聯絡表單的訊息，統一管理。
「Astro.build」—— 它是 2026 年目前針對部落格類型網站效能表現最佳的前端框架，內建 Tailwind CSS 支援，可快速實現響應式設計。
「Sanity.io」—— 免費 Headless CMS，提供類 WordPress 的後台介面來撰寫與管理文章，文章發布時才會把資料送到網站，不像 WordPress 是即時查詢資料庫。
「Web3Forms」—— 免費表單服務，只需要 API Key 就能把訪客訊息送到指定 Email，不需要自己架後端。
Vibe Coding 工作流程
整個建站是 AI 全程主導的。設計階段靠 Google Stitch 把視覺雛形確定好，開發階段由 Google Antigravity 接手，透過 MCP 自動串接 Sanity CMS、設定環境、生成每個頁面。使用 Antigravity 時我會使用「Plan」模式，當 AI 接到比較複雜的任務時，它會先輸出一份詳細的執行計畫讓我確認，確認後才開始動工。
為了節省每週的免費 credit，我習慣先用 Gemini 3 Flash 模組處理一般任務，等到這個模組額度用完才切換到更耗資源的模型。遇到卡關的問題，我也會平行使用 Gemini 直接問 step-by-step 的操作流程，交叉確認再交給 Antigravity 執行。
SEO 與上線前準備
網站在本地測試完成後，Antigravity 協助完成全站 SEO 優化。接著安裝 Google Tag Manager 與 Google Analytics，測試無誤後才推上線。
域名方面，我在 GoDaddy 購買自訂網址，Cloudflare Pages 部署完成後提供兩組 Nameservers，只需要到 GoDaddy 的 DNS 設定頁面修改，幾分鐘內完成切換。最後把網站提交到 Google Search Console 完成收錄。
防垃圾郵件設計
網站所有表單都先用 Honeypot 做第一層過濾。上線後覺得傳統 CAPTCHA 使用體驗太差，又加上了 Cloudflare Turnstile。設定流程是先請 Cloudflare 自己的 AI 在帳戶裡完成配置，再到 Antigravity 裡做前端整合 —— 這個步驟的 debug 時間花得比預期長，在本地與正式環境之間來回了不少次。
「Honeypot」—— 一種讓真實使用者看不見、但機器人會自動填寫的隱藏欄位，填了就直接擋掉，不影響真人使用。
「Cloudflare Turnstile」—— Cloudflare 推出的免費 Invisible 驗證服務，大多數情況下訪客完全感覺不到它的存在，背後自動判斷是否為機器人。
結果 & 心得
全部架站到上線差不多花了三週時間。這三週不是每天都在工作 —— Antigravity 每週有固定的免費額度，用完了就要等，下午時段伺服器負載高也容易斷線，後來索性只在早上使用它。
整個專案唯一的花的錢是網域購買費用，其他全部使用免費方案。最終上線的網站具備自訂網域、免費 SSL、免費 CDN、DDoS 防護、Headless CMS 後台、聯絡表單、SEO 優化，以及雙層防垃圾郵件機制。
回頭看這三週，幾次真的想放棄 —— 尤其是首頁 404 那段，Antigravity credit 用完的時間點偏偏和問題卡住的時間點重疊。但每次重新來過的關鍵，不是等 AI 變更聰明，而是換一個角度問問題：去問 Cloudflare AI 要 troubleshooting 步驟，再把步驟交給 Antigravity 執行，這個「拆解問題、換工具接力」的思路，比一直盯著同一個 AI 死磕有效得多。
Vibe Coding 不是魔法，它是一種需要你理解工具邊界的工作方式。AI 寫程式的速度快，但「把對的問題問對 AI」這件事，仍然是你的工作。