靜態架站導航 (The SSG Compass)

這是一份為現代開發者與 AI 代理設計的架站座標系。我們關注的不是瑣碎的指令,而是如何選擇最適合的引擎與路徑,建立長期穩健的資訊棲息地。

🚀

選擇框架:設定您的動力來源

選對框架即完成了一半。不同的引擎決定了內容的呈現深度與效能上限。

內容與 SEO 先行 (Content-First)

追求極致載入速度與搜尋引擎友好度。

  • Astro (群島架構)
  • Hugo (極速構建)

技術文檔與 Wiki (Docs-Focused)

專為層級化知識庫與 API 參考手冊設計。

  • Starlight (基於 Astro)
  • VitePress (Vue 生態)

全棧與動態擴展 (App-Hybrid)

具備強大後端整合與即時更新的能力。

  • Next.js (React 王者)
  • Nuxt (Vue 全能型)

極簡與經典 (Minimalist)

最單純的文件轉換,與 GitHub 原生結合。

  • Jekyll (傳統首選)
  • Hexo (Node.js 經典)
🤖

AI 協作開發

利用 AI 進行腳手架建立、代碼審查與內容蒸餾。將其視為您的架構副駕駛。

Scaffolding / Pair Programming
🐙

GitHub 版本控制

建立知識的單一真相來源。透過 CI/CD 確保每次 Push 都是一次穩定部署。

Git Workflow / CI-CD
☁️

發布平台四強

根據框架選型決定託管地。GitHub/Vercel 美感佳,Cloudflare 性能王,Netlify 功能全。

GH Pages / Cloudflare / Vercel / Netlify
🌐

身分標識與網域

設定 CNAME 與 DNS,為您的資訊棲息地掛上專屬門牌,累積長期數位資產。

DNS Management / Identity
Step-by-Step Guide

📖 實戰地圖詳解

架站最常見的錯誤順序,是先選好平台和框架,才回頭想自己到底要什麼。結果不是功能過剩、維護痛苦,就是做到一半發現架構撐不住要的需求,整站重來。

順序反過來就順了:需求 → 架構 → 平台。這篇是這條路徑的地圖。

第一步:先把需求講清楚

動手之前,先回答得出這五個問題:

  • 網站的內容是什麼? 文章、作品、商品、課程,還是工具?
  • 需要多少互動? 只要能讀就好,還是要計算、搜尋、抽牌這類當下操作?
  • 要不要收資料? 報名表單、會員登入、付款、訂單——有任何一項,架構就不一樣。
  • 多久更新一次、誰來更新? 天天發文和一年改兩次,需要的維護方式完全不同。
  • 預算與維護意願? 願意自己顧主機,還是一切越省事越好?

答不出來就先不要選工具。需求不清楚的時候選什麼都是猜的。

第二步:跟 AI 討論架構

需求清單列好,交給 AI 當架構副駕駛:請它對照「這個需求需要哪一層能力」,提出最小架構與取捨。這正是 AI 在架站裡最有價值的位置——比較選項、列出代價、產生範本、幫你檢查,而不是替你做決定。

能力層級可以對照 Astro 四層能力 那篇的判準:純內容是靜態 HTML 就夠;要互動加原生 JavaScript 或 Islands;要收資料、會員、付款,才需要接外部服務或後端。原則只有一句:用最少的能力滿足需求——多出來的每一層,都是日後要維護的東西。

討論時請 AI 把「為什麼這樣選、放棄了什麼」寫下來。這份紀錄之後就是你的架構文件,換工具、換 AI 接手時都用得上。

第三步:依架構選部署平台

架構定了,平台就只剩配不配的問題,看四件事:支不支援你的架構(純靜態/需要伺服器功能)、有沒有預覽流程(上線前先看)、流量與費用的上限、需不需要表單這類內建功能。

平台 適合的情況 要注意
GitHub Pages 純靜態、內容已放在 GitHub、要最簡單的上線 沒有內建的預覽部署,功能最精簡
Cloudflare Pages 純靜態為主、重視速度與流量成本,要預覽連結 設定選項較多,第一次要花點時間
Vercel 要順手的預覽流程與框架整合 免費額度有限,流量大了費用上升快
Netlify 需要內建表單等附加功能 免費額度近年收緊,先確認現行方案

各家的額度與價格會變,選之前以官方頁面為準;上表看的是定位與取捨,這些變動得慢。

第四步:網域與上線

最後才處理門面:買好網域,用 CNAME 把它指向部署平台;正式發布前,先用平台的預覽連結把整站看過一遍再上線。平台隨時能換、網域跟著你走——這也是為什麼順序上平台放最後:它是最容易替換的一層。

順序就是重點

需求決定架構,架構決定平台。反過來做,每換一次需求就重做一次站;照這個順序,需求變了通常只動架構的一層,平台多半不用換。


延伸閱讀

📚 深度導讀與研究指南

針對特定技術點的實踐筆記與決策路徑。

靜態架站地圖:先想需求,再選架構與平台

架站的順序不該從選平台開始:先把需求講清楚,跟 AI 討論出最小架構,最後才依架構選部署平台。

#靜態架站#Astro#教學#工作流程

Astro 四層能力:從靜態網站到互動應用

用簡單的例子理解 Astro 靜態 HTML、原生 JavaScript、Islands,以及資料保存與線上服務各能做到什麼,並認識常見框架與術語。

#Astro#靜態架站#架構#教學#框架