鐵人檔案
30 天做一個 content-first 網站：從零 JavaScript 的靜態頁，做到有登入、資料庫與購物車。中間經過檔案式路由、Content Collections、Vue island、Actions 與 Drizzle + Turso。寫給已經會 Vue 或 React、還在猶豫內容站要不要換 Astro 的前端工程師。易變的 API 都查當天官方文件並標註查證基準，也附 JavaScript 傳輸量等實測數字。每天都有可跑的程式碼，放在公開 repo app-steps，一天一個 commit，Day N 對應 step-N。最後一天回答哪些專案適合 Astro，哪些不適合。
Astro 用 loader 把不同來源接進同一個 Content Layer：glob() 掃一批本地檔案、file() 拆開單一 JSON／YAML／TOM...
用 Content Collection 的 schema 驗證 frontmatter。內容進入 Astro Content Layer 時，會先經過 Zod...
Content Collection 的 reference() 會把文章欄位從任意字串變成跨 entry 關係。frontmatter 只填作者或分類的 ID...
文章一多，列表很快就翻不完：該用分頁、無限滾動，還是加一個搜尋框？ 分頁與無限滾動都在處理列表太長：把列表切開或分段載入。它們解決不了「我知道我要找哪一篇，只是...
前一篇用 getCollection() 把全部文章撈出來，做了 /blog 列表和一個純前端的搜尋 island。從列表點進單篇文章時，對應的檔案是 blog...
先把三件事分開。paginate() 把同一批資料切成多個 build-time 頁面；redirect 把讀者從舊網址送到新網址，地址列會跟著改；rewrit...
先補讀者路徑，再補元件。Astro 專案骨架至少要讓讀者知道網站在做什麼、從哪開始、怎麼找到內容，以及走到不存在的網址時怎麼回來。nav、hero、cards、...
原生 <img> 會照你提供的 URL 顯示圖片。Astro 的 <Image> 則把本地圖變成可檢查的 buildinput：讀取原始...
<Picture> 會先依 <source> 順序與瀏覽器支援度選格式，再由該格式的 srcset、sizes與裝置像素比（DPR）決定...
目前這個網站交給瀏覽器的，都是 build 時預先產生、給「人」看的 HTML 頁面。只看這些頁面，很容易把 Astro 當成純靜態網站產生器。 但 Astro...
