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」,會先想問兩...
核心概念 ⬆️ 點上方縮圖或影片連結即可播放。 建立 Astro 專案前,先確認本機的 Node 符合 Astro 要求,再執行 npm create ast...
核心概念 ⬆️ 點上方縮圖或影片連結即可播放。 用 React Router 或 Vue Router 的時候,路由是一份要自己維護的清單:在某個檔案裡把網址...
核心概念 ⬆️ 點上方縮圖或影片連結即可播放。 Day 3 的結尾留了一個問題:檔案變成網址之後,每一頁都要 header、footer、同一套外框。如果每個...
核心概念 ⬆️ 點上方縮圖或影片連結即可播放。 Day 4 一直在講 .astro:layout 是 .astro、頁面是 .astro、被包進去的東西也是...
核心概念 ⬆️ 點上方縮圖或影片連結即可播放。 會做零 JS 的 .astro 元件之後(Day 5),接著就會碰到樣式問題。如果你從 React 轉過來,可...
核心概念 ⬆️ 點上方縮圖或影片連結即可播放。 Day 5 講過 .astro 元件不在瀏覽器裡跑,互動可以交給 framework island。只想加一顆...
核心概念 ⬆️ 點上方縮圖或影片連結即可播放。 想加一顆「收藏」按鈕,元件寫好、import 進頁面、貼上去、重整。按了沒反應,元件沒壞,是你還沒告訴 Ast...
核心概念 ⬆️ 點上方縮圖或影片連結即可播放。 前面幾天談的是元件和互動,這篇改看內容本身怎麼寫。.md 和 .mdx 長得很像,該怎麼選?是不是一律用能力比...
核心概念 ⬆️ 點上方縮圖或影片連結即可播放。 在 Astro 中,把 .md 丟進 src/pages 就能直接產生對應網址。頁面只有三五篇時,這種檔案即路...