跳转到内容

手動安裝 Astro

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

  • Node.js - v18.14.1 或更高版本。
  • 文字編輯器 - 我們推薦使用 VS Code 以及我們的 官方 Astro 延伸模組.
  • 終端機 - Astro 可藉由命令行介面(CLI)來使用。

如果你偏好不使用我們自動化的 create-astro CLI 工具,你可以自己跟著下列指南來設定你的專案。

1. 建立你的目錄

標題為 1. 建立你的目錄

建立一個空目錄並為你的專案命名,接著進到該目錄底下。

Terminal window
mkdir my-astro-project
cd my-astro-project

當你進到你的新目錄後,建立你專案的 package.json 檔。這將會用來管理你專案的依賴模組包括 Astro。如果你不熟悉這個檔案的格式,可執行下列的指令來建立一個。

Terminal window
npm init --yes

首先,安裝 Astro 專案的依賴模組到你的專案內。

Terminal window
npm install astro

然後在你的 package.json 檔案內,將 “scripts” 的內容取代如下:

package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "astro dev",
"start": "astro dev",
"build": "astro build",
"preview": "astro preview"
},

在這份指南中,你等等將會使用這些腳本來啟動 Astro 以及執行其他不同的指令。

3. 建立你的第一個頁面

標題為 3. 建立你的第一個頁面

在你的文字編輯器中,建立一個新檔案 src/pages/index.astro 到你的目錄中。這將會是你專案的第一個 Astro 頁面。

接著,複製並貼上以下的程式片段(包括 --- 三個破折號)到上述新增的檔案中:

src/pages/index.astro
---
// Welcome to Astro! Everything between these triple-dash code fences
// is your "component frontmatter". It never runs in the browser.
console.log('This runs in your terminal, not the browser!');
---
<!-- Below is your "component template." It's just HTML, but with
some magic sprinkled in to help you build great templates. -->
<html>
<body>
<h1>Hello, World!</h1>
</body>
</html>
<style>
h1 {
color: orange;
}
</style>

4. 建立你的第一個靜態資源

標題為 4. 建立你的第一個靜態資源

當然你也會想建立一個 public/ 目錄來儲存你的靜態資源。Astro 必會將這些資源帶到你最後的成品當中,所以你可以在你的元件範本(component templates)裡安心地引用這些資源。

在你的文字編輯器中,建立一個新檔案 public/robots.txt 到你的目錄中。robots.txt 是一個簡單檔案,大多數的網站會將其用來告訴像 Google 的搜尋機器人如何處理你的網站。

接著,複製並貼上以下的程式片段到上述的新增的檔案中:

public/robots.txt
# Example: Allow all bots to scan and index your site.
# Full syntax: https://developers.google.com/search/docs/advanced/robots/create-robots-txt
User-agent: *
Allow: /

5. 建立 astro.config.mjs

標題為 5. 建立 astro.config.mjs

Astro 利用 astro.config.mjs 這個檔案來配置設定。如果你不需要設定 Astro 那此檔案並非必須,但你可能會希望現在就建立好它。

在你專案的根目錄下建立 astro.config.mjs,接著複製下列程式碼到該檔案中:

astro.config.mjs
import { defineConfig } from 'astro/config';
// https://astro.build/config
export default defineConfig({});

如果你想要引入像是 React, Svelte 等 UI framework components (EN) 或使用其它工具像是 Tailwind 或 Partytown 到你的專案中,在這裡你可以手動引入並配置整合 (EN)

📚 更多資訊請閱讀 Astro 的 API configuration reference (EN)

如果你有跟著上述步驟,那你的專案應該看起來像這樣:

├── node_modules/
├── src/
│ └── pages/
│ │ └── index.astro
├── public/
│ ├── robots.txt
├── astro.config.mjs
├── package.json
└── package-lock.json (or: yarn.lock, pnpm-lock.yaml, etc.)

恭喜!你現在已經設定好 Astro 了!

如果你完整跟著這份指南,你可以直接跳到開始著手 Astro 來繼續並學習如何第一次啟動 Astro。