手動安裝 Astro
本指南將逐步帶你手動安裝並設定新的 Astro 專案。
事前準備
標題為 事前準備- Node.js -
v18.17.1
或v20.3.0
或更高版本。(不支援v19
。) - 文字編輯器 - 我們推薦使用 VS Code 以及我們的 官方 Astro 延伸模組.
- 終端機 - Astro 可藉由命令列(CLI)來使用。
安裝
標題為 安裝如果你偏好不使用我們自動化的 create astro
CLI 工具,你可以自己跟著下列指南來設定你的專案。
1. 建立你的目錄
標題為 1. 建立你的目錄建立一個空目錄並為你的專案命名,接著進到該目錄底下。
當你進到你的新目錄後,建立你專案的 package.json
檔。這將會用來管理你專案的依賴模組包括 Astro。如果你不熟悉這個檔案的格式,可執行下列的指令來建立一個。
2. 安裝 Astro
標題為 2. 安裝 Astro首先,安裝 Astro 專案的依賴模組到你的專案內。
Astro 必須安裝在本地,而不是全域。請不要執行 npm install -g astro
、pnpm add -g astro
或 yarn add global astro
。
然後在你的 package.json
檔案內,將 “scripts” 的內容取代如下:
在這份指南中,你等等將會使用這些腳本來啟動 Astro 以及執行其他不同的指令。
3. 建立你的第一個頁面
標題為 3. 建立你的第一個頁面在你的文字編輯器中,建立一個新檔案 src/pages/index.astro
到你的目錄中。這將會是你專案的第一個 Astro 頁面。
接著,複製並貼上以下的程式片段(包括 ---
三個破折號)到上述新增的檔案中:
4. 建立你的第一個靜態資源
標題為 4. 建立你的第一個靜態資源當然你也會想建立一個 public/
目錄來儲存你的靜態資源。Astro 必會將這些資源帶到你最後的成品當中,所以你可以在你的元件範本(component templates)裡安心地引用這些資源。
在你的文字編輯器中,建立一個新檔案 public/robots.txt
到你的目錄中。robots.txt
是一個簡單檔案,大多數的網站會將其用來告訴像 Google 的搜尋機器人如何處理你的網站。
接著,複製並貼上以下的程式片段到上述的新增的檔案中:
5. 建立 astro.config.mjs
標題為 5. 建立 astro.config.mjs你可以透過 astro.config.mjs
調整 Astro 設定。如果不需要設定 Astro 那此檔案並非必須,但你可能會希望現在就建立好它。
在你專案的根目錄下建立 astro.config.mjs
,接著複製下列程式碼到該檔案中:
如果你想要引入像是 React, Svelte 等 UI framework components 或使用其它工具像是 Tailwind 或 Partytown 到你的專案中,在這裡你可以手動引入並設定整合。
6. 新增 TypeScript
標題為 6. 新增 TypeScript透過 tsconfig.json
設定 TypeScript。就算你不寫 TypeScript,這個檔案也很重要。它讓像 Astro 和 VS Code 這些工具知道如何理解你的專案。缺乏 tsconfig.json
的話,有些功能便無法完整支援(像 npm 套件匯入)。
如果你想要寫 TypeScript,建議使用 Astro 的 strict
或 strictest
模板。所有樣板設定的詳細比較可以參考 astro/tsconfigs/。
在專案的根目錄下建立 tsconfig.json
,接著複製下列程式碼到該檔案中(設定 TypeScript 模板時,你可以使用 base
、strict
或 strictest
):
最後,新增 src/env.d.ts
,讓 TypeScript 知道 Astro 專案裡可用的 ambient type:
7. 接下來
標題為 7. 接下來如果你有跟著上述步驟,那你的專案應該看起來像這樣:
Directorynode_modules/
- …
Directorypublic/
- robots.txt
Directorysrc/
Directorypages/
- index.astro
- env.d.ts
- astro.config.mjs
- package-lock.json 或
yarn.lock
、pnpm-lock.yaml
等。 - package.json
- tsconfig.json
恭喜!你現在已經設定好 Astro 了!
如果你完整跟著這份指南,你可以直接跳到開始著手 Astro 來繼續並學習如何第一次啟動 Astro。
Learn