跳到內容

透過自動化命令列安裝 Astro

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

事前準備

標題為 事前準備
  • Node.js - v18.17.1 或 v20.3.0 或更高版本。（不支援 v19。）
  • 文字編輯器 - 我們推薦使用 VS Code 搭配我們的官方 Astro 延伸模組.
  • 終端機 - Astro 可透過命令列（CLI）來使用。

安裝

標題為 安裝

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

1. 執行安裝嚮導

標題為 1. 執行安裝嚮導

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

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

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

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

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

2. 啟動 Astro ✨

標題為 2. 啟動 Astro ✨

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

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

Terminal window
npm run dev

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

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

在瀏覽器檢視開發中的網站時，你可以使用 Astro 開發工具列，它能協助你檢視島嶼、檢查無障礙設計等等。

如果你無法在瀏覽器開啟你的專案，回到你執行 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>

預設情況下，這個指令會使用範例儲存庫的 main 分支。若要使用其他分支，請透過 --template 參數一併傳遞分支名稱：<github-username>/<github-repo>#<branch>。

你可以到佈景主題與入門專案展示中心瀏覽部落格、作品集、文件、登陸頁面等等！或者，也可以在 GitHub 搜尋更多入門專案。

接下來

標題為 接下來

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

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

了解你的程式碼庫 在專案結構指南中進一步了解 Astro 的檔案結構。
新增框架 在整合指南中學習如何讓 Astro 支援 React、Svelte、Tailwind 等框架。
部署網站 在部署指南中學習如何建立並部署 Astro 專案到網路上。