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,哪些不適合。
如果你已經會 Vue、Nuxt,也碰過 React 或 Next,聽到「內容站可以用 Astro」,會先想問兩件事:這跟我已經會的框架到底差在哪?做 SEO 用...
建立 Astro 專案前,先確認本機的 Node 符合 Astro 要求,再執行 npm create astro@latest。專案建立後,Astro 與其他...
用 React Router 或 Vue Router 的時候,路由是一份要自己維護的清單:在某個檔案裡把網址和元件一條條註冊起來。換到 Astro,官方說「不...
Day 3 的結尾留了一個問題:檔案變成網址之後,每一頁都要 header、footer、同一套外框。如果每個 .astro 檔案都複製一遍,改個導覽列連結,就...
Day 4 一直在講 .astro:layout 是 .astro、頁面是 .astro、被包進去的東西也是 .astro。但它到底是什麼?如果你寫過 Reac...
會做零 JS 的 .astro 元件之後(Day 5),接著就會碰到樣式問題。如果你從 React 轉過來,可能會擔心:CSS 是全域的,我在這個元件寫 .ti...
Day 5 講過 .astro 元件不在瀏覽器裡跑,互動可以交給 framework island。只想加一顆計數按鈕或一個展開收合時,載入整包 Vue 或 R...