iT邦幫忙

鐵人檔案

2026 iThome 鐵人賽
回列表
Modern Web

用 Astro 打造 Content-first 前端網站:30 天從靜態內容到會員、資料庫與選型 系列

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,哪些不適合。

參賽天數 7 天 | 共 7 篇文章 | 0 人訂閱 訂閱系列文 RSS系列文
DAY 1

已經會 React/Vue,為什麼還要看 Astro?

如果你已經會 Vue、Nuxt,也碰過 React 或 Next,聽到「內容站可以用 Astro」,會先想問兩件事:這跟我已經會的框架到底差在哪?做 SEO 用...

2026-08-03 ‧ 由 stca 分享
DAY 2

建立 Astro 專案時,Node 與套件版本要怎麼管理?

建立 Astro 專案前,先確認本機的 Node 符合 Astro 要求,再執行 npm create astro@latest。專案建立後,Astro 與其他...

2026-08-04 ‧ 由 stca 分享
DAY 3

沒有 router 設定檔,Astro 怎麼靠資料夾決定網址?

用 React Router 或 Vue Router 的時候,路由是一份要自己維護的清單:在某個檔案裡把網址和元件一條條註冊起來。換到 Astro,官方說「不...

2026-08-05 ‧ 由 stca 分享
DAY 4

每一頁都要 header、footer,Astro 怎麼讓我只寫一次?

Day 3 的結尾留了一個問題:檔案變成網址之後,每一頁都要 header、footer、同一套外框。如果每個 .astro 檔案都複製一遍,改個導覽列連結,就...

2026-08-06 ‧ 由 stca 分享
DAY 5

Astro 元件跟 React 元件差在哪?為什麼它預設不送 JavaScript?

Day 4 一直在講 .astro:layout 是 .astro、頁面是 .astro、被包進去的東西也是 .astro。但它到底是什麼?如果你寫過 Reac...

2026-08-07 ‧ 由 stca 分享
DAY 6

元件裡的 CSS 會不會漏出去污染別頁?Astro 樣式怎麼分 scoped、global、utility?

會做零 JS 的 .astro 元件之後(Day 5),接著就會碰到樣式問題。如果你從 React 轉過來,可能會擔心:CSS 是全域的,我在這個元件寫 .ti...

2026-08-08 ‧ 由 stca 分享
DAY 7

只想加一顆按鈕、一點互動,需要動用框架嗎?Astro 頁面裡的原生 `script`

Day 5 講過 .astro 元件不在瀏覽器裡跑,互動可以交給 framework island。只想加一顆計數按鈕或一個展開收合時,載入整包 Vue 或 R...

2026-08-09 ‧ 由 stca 分享