前言
從這篇文章的標題大概就知道是專門來推坑 Astro.js 這款網頁框架的，目前本部落格就是使用 Astro 所建構，在從正式版還沒推出之前就使用著它來創建網頁到目前算是小有心得，加上也有許多人詢問過，於是就寫這篇文章來分享一下。
在這之前我使用過很多不同的框架，像是 Next、Gatsby、Jekyll、HUGO，它們都是很好的框架，但一直沒有戳中我的需求，使用下來或多或少都感覺彆扭與遺憾，先讓我們來了解 Astro 究竟解決那些問題，才能知道這個框架究竟適不適合你手上的專案。
使用 Astro 的原因
我認為 Astro 做得最好的是它優越的開發者體驗，這是一款「選擇性加入複雜度」的框架，在許多元框架存在的前端環境，你通常需要事先學習框架像是：React、Vue、Angular……然後被鎖定在某個框架的體系之下，像是 Next、Nuxt、Analog，或是學習模板語言像是：Liquid、Go Template……，或是後端語言 😣。
但在 Astro 中還是只需要使用 HTML、CSS、JavaScript （或是你喜歡 TypeScript 也行）就可以開始了，如果你和我一樣主要是個前端工程師想要製作一些靜態為主的網站，舉例來說：行銷網站、文件網站、部落格、作品集……，那麼 Astro 就會是非常好的選擇而且體驗真的很讚！可以從簡單的靜態網頁出發，並且使用 Island 架構 在保持頁面高效能的狀態下在頁面中使用 JavaScript 擴張頁面的能力。
相比於其他框架，它的學習曲線十分的平緩，我能夠將大多經歷花在網頁的內容上，而不是在學習特定框架規則上，這是我最喜歡 Astro 的地方。
不使用 Astro 的原因
如果期望製作高互動性更像應用程式的網頁會建議使用 Next、Nuxt 或其他框架，Astro.js 的架構讓它天生適合用於生成靜態頁面並選擇性的添加互動性。
Astro 是什麼？
Astro 是一個基於 Vite （一個現代化的打包工具）用 JavaScript 編寫的一體化框架，旨在創建快速且內容為重點的網站，具備以下五個特點：
- 以內容為主：Astro 是專為豐富內容網站而設計的
- 伺服器優先：網站藉由伺服器來渲染 HTML 在執行上會更加快速
- 預設即迅速：在 Astro 中不太可能會建立出緩慢的網站
- 很容易使用：你不需要變得專業就能用 Astro 建立些東西出來
- 靈活且齊全：多達 100 種以上的 Astro 整合功能可供使用
Astro 怎麼使用？
創建專案
在安裝 Astro 之前你會需要安裝 Node.js，並且最少是 v16.12.0 版本，推薦使用官方提供的自動化的安裝精靈即可，或者是你也可以在瀏覽器上瀏覽範本：
npm create astro@latest過程中它會問你專案名稱、放置位置、使用的模板，之後進入專案並執行 npm run dev 指令就可以在瀏覽器中打開開發伺服器，所有開發中的更動都會即時的反應在上面。
或者你也可以使用建構指令npm run build，生成靜態網站，預設生成好的靜態檔案會被放置在 dist 資料夾中。你可以使用預覽指令 npm run preview 來預覽目前生成好的靜態網站。
接著就可以開始著手打造你的網站了 🥳
- 新增一個框架： 請看我們的整合指南 (EN)來學習如何用 npx astro add 來擴充 Astro 對 React, Svelte, Tailwind 等框架的支援。
- 部署網站： 請看我們的部署指南來學習如何建立並部署一個 Astro 專案到網路上。
- 了解程式庫： 請看我們的專案結構指南來了解更多有關 Astro 專案的結構。
總結
這篇文章是個起頭，我正在準備用一個比較完善且實際的專案來解說如何使用 Astro，敬請期待！在學習過程中大力推薦 Astro 本身 的文檔以及專門的文檔 AI 像是：Houston AI、Rix Astro。