跳到內容

開發與建置

一旦你有 Astro 專案，就準備好使用 Astro 打造網站了！🚀

編輯專案

要修改專案，請在程式編輯器開啟專案資料夾。在開發模式下有開發伺服器運作，讓你可以看到程式碼修改對網站的更新。

你也可以自訂開發環境的各方面，例如設定 TypeScript 或安裝官方 Astro 編輯器延伸模組。

啟動 Astro 開發伺服器

Astro 附帶內建的開發伺服器，有專案開發所需的所有東西。astro dev CLI 指令會啟動本地的開發伺服器，讓你首次看到新網站的實際運作結果。

每個起始模板都帶有預先設定的腳本為你執行 astro dev。瀏覽至專案資料夾後，使用你喜歡的套件管理器開始 Astro 開發伺服器吧。

npm run dev

如果一切順利，Astro 會在 http://localhost:4321/ 供應網站。在瀏覽器拜訪那個連結，看看你的新網站吧！

使用開發模式

Astro 會監視 src/ 資料夾內的即時檔案變更，並在你打造網站時更新網站預覽，這樣在開發中做變更時，你就不需要重新啟動伺服器。開發伺服器執行時，你都可以在瀏覽器看到最新版本的網站。

在瀏覽器檢視網站時，你可以存取 Astro 開發工具列 (EN)。在你打造網站時，它會協助你檢查群島、發現無障礙設計問題等等。

如果啟動開發伺服器後，還是不能在瀏覽器開啟專案，請回到執行 dev 指令的終端機，檢查上面顯示的訊息。它應該會告訴你有沒有發生錯誤，或是專案是否正在別的網址上供應，而不是在預設的 http://localhost:4321/。

建置並預覽網站

要檢查網站在建置時會建立的版本，請停止開發伺服器（Ctrl + C），並根據你使用的套件管理器，在終端機上執行對應的建置指令：

npm run build

Astro 會建置可供部署版本的網站在單獨的資料夾（預設在 dist/），你可以在終端機查看進度。這會在部署到生產環境前提醒你專案裡的所有建置錯誤。如果 TypeScript 設定為 strict 或 strictest，build 腳本也會檢查專案的型別錯誤。

當建置完成時，在終端機執行合適的 preview 指令（如 npm run preview），然後你就可以在同一個瀏覽器預覽視窗中，於本地檢視已建置版本的網站。

請注意這預覽的是上次執行建置指令時的程式碼，用意是預覽給你看部署到網路時網站的樣子。任何建置後對程式碼的修改都不會反映在網站預覽上，直到你再次執行建置指令為止。

使用（Ctrl + C）來停止預覽並執行別的終端機指令，例如重新啟動開發伺服器以回去使用開發模式，它會在你編輯時更新以顯示程式碼變更的即時預覽。

閱讀更多關於 Astro CLI (EN) 還有使用 Astro 打造網站會用到的終端機指令。

:::tip你可能希望立刻部署新網站，在你新增或修改太多程式碼之前。這有益於讓最小可運作版本的網站發佈，也能節省多餘的時間和心力在之後對你的部署除錯上。:::

接下來

大功告成！你現在準備好開始使用 Astro 打造網站了！🥳

這邊有幾個頁面是我們推薦後續探索的。你可以照任意順序閱讀，也可以先暫時離開我們的文件，在新的 Astro 專案 codebase 試一下，當你遇到問題或有疑問再回來這邊。

設定開發環境

探索下面的指南以自訂你的開發體驗。

編輯器設定 自訂你的程式編輯器來改善 Astro 的開發體驗並啟用新功能。
開發工具列 探索開發工具列的有用功能。
TypeScript 設定 設定用於啟用型別檢查、IntelliSense 等功能的選項。

探索 Astro 的特點

理解 codebase 在我們的專案結構指南學習 Astro 的檔案結構。
建立內容合集 透過 frontmatter 驗證與自動型別安全，為新網站加入內容。
加入 view transition 建立流暢的頁面轉場與動畫。
學習群島 閱讀 Astro 的群島架構介紹。

開始入門教學

在我們的入門教學 (EN)中，從一個空白頁面開始打造功能完善的 Astro 部落格。

這是了解 Astro 如何運作的好方法，它帶你走過頁面、版面、元件、路由、群島等的基礎。它也包含一個非必須、對初學者友善的單元，適合還不太熟悉網頁開發概念的人，它會引導你在電腦安裝必要的應用程式、建立 GitHub 帳號，並部署你的網站。

貢獻 社群 贊助