跳到內容

透過自動化命令列安裝 Astro

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

  • Node.js - v18.14.1 或更高版本。
  • 文字編輯器 - 我們推薦使用 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 步驟,繼續之前請先確認你已經安裝了依賴項。

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 專案程式碼庫,當你遇到任何困難或問題時再回到這裡。