透過自動化命令列安裝 Astro
準備好安裝 Astro 了嗎?跟隨我們的自動化或手動設定指南來開始吧。
改為閱讀我們的手動安裝指南。
事前準備
標題為 事前準備- Node.js -
v18.17.1
或v20.3.0
或更高版本。(不支援v19
。) - 文字編輯器 - 我們推薦使用 VS Code 搭配我們的官方 Astro 延伸模組.
- 終端機 - Astro 可透過命令列(CLI)來使用。
安裝
標題為 安裝create astro
是從頭打造新 Astro 專案的最快方式。它將帶你完成建立新 Astro 專案的每一步。它允許你從幾個不同的官方入門模板中選擇,或是你可以透過 --template
參數使用 GitHub 上的任何現有專案。
想在瀏覽器中嘗試 Astro 嗎?造訪 astro.new 來瀏覽我們的入門模板,不需離開瀏覽器也能啟動一個新的 Astro 專案。
1. 執行安裝嚮導
標題為 1. 執行安裝嚮導在你的終端機中執行以下指令來啟動我們方便的安裝嚮導:
你可以在你裝置的任何地方執行 create astro
,事前並不需要為你的專案額外建立新的空目錄。如果執行前沒有空的目錄來存放你的專案,嚮導會自動幫你建立一個。
如果一切順利,你應該會在一些建議的步驟後看到「Liftoff confirmed. Explore your project!」。cd
進你的新專案目錄來開始使用 Astro。
如果你在執行命令列嚮導時略過了 npm install
步驟,繼續之前請先確認你已經安裝了依賴項。
2. 啟動 Astro ✨
標題為 2. 啟動 Astro ✨Astro 內建的開發伺服器帶有開發專案時所需的一切功能。astro dev
指令將啟動本地開發伺服器,以便讓你看到你的新網站第一次運作。
每個入門模板都附帶一個事先設定好的腳本,可為你執行 astro dev
指令。使用你喜好的套件管理器執行此指令來啟動 Astro 開發伺服器。
若一切順利,Astro 現在應該會在 http://localhost:4321/ 上執行你的專案!
Astro 會監聽 src/
目錄下的即時檔案變動,因此在開發過程中更動時你不需要重啟伺服器。
在瀏覽器檢視開發中的網站時,你可以使用 Astro 開發工具列,它能協助你檢視島嶼、檢查無障礙設計等等。
如果你無法在瀏覽器開啟你的專案,回到你執行 dev
指令的終端機查看是否發生了錯誤,或是你專案運作的 URL 運作與上方的連結不同。
入門模板
標題為 入門模板你也可以透過向 create astro
指令傳遞 --template
參數來從官方範例或 GitHub 儲存庫的 main
分支來開始一個新的 Astro 專案。
預設情況下,這個指令會使用範例儲存庫的 main
分支。若要使用其他分支,請透過 --template
參數一併傳遞分支名稱:<github-username>/<github-repo>#<branch>
。
你可以到佈景主題與入門專案展示中心瀏覽部落格、作品集、文件、登陸頁面等等!或者,也可以在 GitHub 搜尋更多入門專案。
接下來
標題為 接下來成功!你現在已經準備好開始用 Astro 進行建構了!🥳
以下是我們建議接著探索的主題。你可以按照任意順序閱讀。你甚至可以暫時離開我們的文件並把玩你的新 Astro 專案程式碼庫,當你遇到任何困難或問題時再回到這裡。