跳转到内容
Astro Astro

透過自動化命令列安裝 Astro

準備好安裝 Astro 了嗎？跟隨我們的自動化或手動設定指南來開始吧。

事前準備

  • Node.js - v18.14.1 或更高版本。
  • 文字編輯器 - 我們推薦使用 VS Code 搭配我們的官方 Astro 延伸模組.
  • 終端機 - Astro 可透過命令列（CLI）來使用。

安裝

create-astro 是從頭打造新 Astro 專案的最快方式。它將帶你完成建立新 Astro 專案的每一步。它允許你從幾個不同的官方入門模板中選擇，或是你可以透過 --template 參數使用 GitHub 上的任何現有專案。

1. 執行安裝嚮導

在你的終端機中執行以下指令來啟動我們方便的安裝嚮導：

Terminal window
# 使用 npm 建立新專案
npm create astro@latest

你可以在你裝置的任何地方執行 create-astro，事前並不需要為你的專案額外建立新的空目錄。如果執行前沒有空的目錄來存放你的專案，嚮導會自動幫你建立一個。

如果一切順利，你應該會在一些建議的步驟後看到「Liftoff confirmed. Explore your project!」。cd 進你的新專案目錄來開始使用 Astro。

如果你在執行命令列嚮導時略過了 npm install 步驟，繼續之前請先確認你已經安裝了依賴項。

2. 啟動 Astro ✨

Astro 內建的開發伺服器帶有開發專案時所需的一切功能。astro dev 指令將啟動本地開發伺服器，以便讓你看到你的新網站第一次運作。

每個入門模板都附帶一個事先配置好的腳本，可為你執行 astro dev 指令。使用你喜好的套件管理器執行此指令來啟動 Astro 開發伺服器。

Terminal window
npm run dev

若一切順利，Astro 現在應該會在 http://localhost:4321/ 上執行你的專案！

Astro 會監聽 src/ 目錄下的即時檔案變動，因此在開發過程中更動時你不需要重啟伺服器。

如果你無法在瀏覽器開啟你的專案，回到你執行 dev 指令的終端機查看是否發生了錯誤，或是你專案運作的 URL 運作與上方的連結不同。

入門模板

你也可以透過向 create astro 指令傳遞 --template 參數來從官方範例或 GitHub 儲存庫的 main 分支來開始一個新的 Astro 專案。

Terminal window
# 使用官方範例建立一個新專案
npm create astro@latest -- --template <example-name>


# 基於 GitHub 儲存庫的主分支建立一個新專案
npm create astro@latest -- --template <github-username>/<github-repo>

接下來

成功！你現在已經準備好開始用 Astro 進行構建了！🥳

以下是我們建議接著探索的主題。你可以按照任意順序閱讀。你甚至可以暫時離開我們的文檔並把玩你的新 Astro 專案代碼庫，當你遇到任何困難或問題時再回到這裡。

📚 新增一個框架： 在我們的整合指南 (EN)中學習如何用 npx astro add 來擴充 Astro 以支援 React、Svelte 和 Tailwind 等框架。

📚 部署你的網站： 在我們的部署指南中學習如何建立並部署一個 Astro 專案到網路上。

📚 了解你的代碼庫： 在我們的專案結構指南中了解更多有關 Astro 專案結構的資訊。