前言
前面提到 Astro 是如何建構頁面的,像是將網頁拆分成「元件」以及透過 Astro Island 的方式來建構網頁,接著本章節就要來實際創建一個 Astro 專案囉!
建構專案
前置準備
Astro 提供了自動建構專案的 CLI 工具,在建構專案之前會需要以下環境:
透過自動建構工具創建 Astro
這樣一個完整的 Astro 便完成了,整體專案會是這樣的架構:
public/
資料夾
用於存放非原始碼不想被 Astro 處理的檔案,內容會被原封不動的放置到渲染出來的資料夾中。
src/
資料夾
用於存放與專案原始碼有關的文件,可以在這裡透過資料夾來分類專案原始碼。資料夾名稱可以自由命名,常見的 src
資料夾結構會像是這樣子:
除了 src/pages/
與 src/content/
之外資料夾名稱都可以隨自己偏好命名,並且只有 pages
資料夾是必要存在的,因為該資料夾內的文件會被用於創建頁面,稍後章節會介紹它們個別的用途,目前大致知道專案結構即可。
啟動 Astro
常見會用到三個指令:開啟開發伺服器、渲染網頁、預覽已渲染網頁。網頁渲染出來預設會被存放到一個 dist
資料夾中。
總結
建構 Astro 專案非常簡單,透過 CLI 工具很快就能設定好一個可運作的專案。如果你熟悉 Vite 的話這樣的架構或許對你來說非常的熟悉,因為 Astro 底層實際上底層就是使用 Vite 來製作的!
延伸閱讀
- The Astro CLI - Astro DOCS
- Install Astro with the Automatic CLI - Astro DOCS
- Day3 - 建構新專案 - 相同文章同步發布於 iThome 鐵人賽中
2023 iThome 鐵人賽 - Astro 系列
- Astro 系列文第三十日:系列回顧與反省
- Astro 系列文第二十九日:製作作品集參考
- Astro 系列文第二十八日:近期與資源雜談
- Astro 系列文第二十七日:視圖過度
- Astro 系列文第二十六日:建構網頁概念篇
- Astro 系列文第二十五日:基礎指令與設定
- Astro 系列文第二十四日:添加 ESLint 與 Prettier
- Astro 系列文第二十三日:路徑別名
- Astro 系列文第二十二日:環境變數
- Astro 系列文第二十一日:部屬升空
- Astro 系列文第二十日:實作搜尋功能
- Astro 系列文第十九日:RSS 端點
- Astro 系列文第十八日:實作集合分類功能
- Astro 系列文第十七日:頁籤
- Astro 系列文第十六日:內容集合
- Astro 系列文第十五日:基礎布局
- Astro 系列文第十四日:圖片最佳化
- Astro 系列文第十三日:Markdown 與 MDX
- Astro 系列文第十二日:基礎路由
- Astro 系列文第十一日:全域狀態管理
- Astro 系列文第十日:整合 UI 框架
- Astro 系列文第九日:腳本
- Astro 系列文第八日:實作整合 Tailwind
- Astro 系列文第七日:實作按鈕元件
- Astro 系列文第六日:樣式
- Astro 系列文第五日:基礎元件
- Astro 系列文第四日:基礎指令與設定
- Astro 系列文第三日:建構新專案
- Astro 系列文第二日:現有問題與解方
- Astro 系列文第一日:起飛前置準備