前言
前面提到 Astro 是如何建構頁面的，像是將網頁拆分成「元件」以及透過 Astro Island 的方式來建構網頁，接著本章節就要來實際創建一個 Astro 專案囉！
建構專案
前置準備
Astro 提供了自動建構專案的 CLI 工具，在建構專案之前會需要以下環境：
透過自動建構工具創建 Astro
npm create astro@latest# 安裝以下套件 [email protected]？ 輸入 y 繼續Need to install the following packages:Ok to proceed? (y) y
# 要在哪裡創建您的新專案？ dir Where should we create your new project? ./專案名稱
# 要使用專案模板嗎？ 1. 使用專案模板（推薦） 2. 使用部落格模板 3. 不使用 tmpl How would you like to start your new project? > Include sample files (recommended) — Use blog template — Empty
# 要安裝依賴套件嗎（推薦）？ deps Install dependencies? (recommended) ● Yes ○ No
# 要使用 TypeScript 嗎？ ts Do you plan to write TypeScript? ● Yes ○ No
# TypeScript 設定上應該多嚴格？ 1. 嚴格（推薦） 2. 最嚴格 3. 鬆散 use How strict should TypeScript be? > Strict (recommended) — Strictest — Relaxed
# 初始化 Git Repo 嗎？git Initialize a new git repository? (optional) ● Yes ○ No這樣一個完整的 Astro 便完成了，整體專案會是這樣的架構：
專案├── .git # Git 相關檔案├── .vscode # vscode 相關檔案├── node_modules # NPM 依賴套件├── public # 任何不希望經由 Astro 處理的檔案│ └── favicon.svg├── src # 專案的代碼│ ├── pages│ │ └── index.astro│ └── env.d.ts├── .gitignore├── astro.config.mjs # Astro 的設定文件├── package.json # NPM 相關紀錄├── README.md # 專案描述文件└── tsconfig.json # TypeScript 設定文件public/ 資料夾
用於存放非原始碼不想被 Astro 處理的檔案，內容會被原封不動的放置到渲染出來的資料夾中。
src/ 資料夾
用於存放與專案原始碼有關的文件，可以在這裡透過資料夾來分類專案原始碼。資料夾名稱可以自由命名，常見的 src 資料夾結構會像是這樣子：
src/├── components # 元件├── content # 存放與 Content Collections 相關的文件├── layouts # 布局用元件├── pages # 頁面用元件└── styles # 專案樣式除了 src/pages/ 與 src/content/ 之外資料夾名稱都可以隨自己偏好命名，並且只有 pages 資料夾是必要存在的，因為該資料夾內的文件會被用於創建頁面，稍後章節會介紹它們個別的用途，目前大致知道專案結構即可。
啟動 Astro
常見會用到三個指令：開啟開發伺服器、渲染網頁、預覽已渲染網頁。網頁渲染出來預設會被存放到一個 dist 資料夾中。
# 開啟開發伺服器npm run dev
# 渲染網頁npm run build
# 預覽已渲染網頁npm run preview總結
建構 Astro 專案非常簡單，透過 CLI 工具很快就能設定好一個可運作的專案。如果你熟悉 Vite 的話這樣的架構或許對你來說非常的熟悉，因為 Astro 底層實際上底層就是使用 Vite 來製作的！
延伸閱讀
- The Astro CLI - Astro DOCS
- Install Astro with the Automatic CLI - Astro DOCS
- Day3 - 建構新專案 - 相同文章同步發布於 iThome 鐵人賽中