# 透過 Claude Code 建立 Astro 網站：從資料夾到發布

> 逐步指南：如何透過 Claude Code 使用 Astro 建立網站，即使不會寫程式也能完成。本文說明要安裝什麼、建立專案要使用哪個指令，以及如何免費發布網站。

Source: https://ailoot.ai/blog/zh-hant-tw/astro-site-with-claude-code/
Canonical: https://ailoot.ai/blog/zh-hant-tw/astro-site-with-claude-code/
Language: zh-Hant-TW
Publisher: Ailoot (https://ailoot.ai/)
Translation: guide-149
Revision: sha256-ed93f165b532d03468549987a188ac30e73198d13738967508633e4cd655126c


從來沒寫過一行程式碼的人，也能透過 Claude Code 使用 Astro 建立網站。我很久以前就不再手動寫程式碼了；我透過 AI 用文字完成所有工作，而使用 Astro 建立網站也完全一樣：你說明自己需要什麼，Claude 就會替你寫程式碼。

通常，問題不在於建置本身，而在於整個流程被拆成好幾段。一篇文章說明安裝，另一篇介紹指令，第三篇談發布方式，完整流程卻始終無法在腦中串起來。這篇文章會帶你從空資料夾一路做到能透過連結在網路上開啟的網站：要安裝什麼、用哪個指令開始專案、如何透過 Claude Code 建立頁面，以及如何免費發布成果。我參考的是 Astro 官方文件。

關於如何使用這項服務，請參閱 [Ailoot 文件](https://ailoot.ai/docs/)。



## 用 Claude Code 建立 Astro 網站前，需要準備什麼？

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="Key takeaways">

重點摘要

你的電腦上需要準備三樣東西：較新版本的 Node.js、程式碼編輯器，以及終端機。Node.js 是這些工具執行時所需的環境；截至本文撰寫時，Astro 文件要求版本 22.12.0 或更新版本，並提醒不支援 23 這類奇數版本。編輯器通常是 VS Code，Claude Code 也會在其中運作。終端機是輸入指令的黑色視窗，VS Code 已內建終端機。你不需要為 Astro 分別安裝這些工具：如果你已經用 Claude Code 做過東西，環境就已經準備好了。

</div>

Astro 本身不需要你事先下載任何東西，下一步的指令會下載它。不過，你需要有執行這些工具的環境。Astro 將入門準備說明為需要三樣東西：

<figure>
<blockquote>
<p>Node.js — 版本 v22.12.0 或更新版本。不支援 v23 這類奇數版本。文字編輯器 — 我們建議使用安裝官方 Astro 擴充功能的 VS Code。終端機 — Astro 透過命令列管理。</p>
</blockquote>
<figcaption>— Astro 官方文件「安裝」章節，https://docs.astro.build/en/install-and-setup/</figcaption>
</figure>

接著來看看這些東西實際上各代表什麼：

1. **Node.js** — 沒有它，Astro 和大多數氛圍式編碼工具都無法執行。請從 nodejs.org 下載，並像一般應用程式一樣安裝。文件中的版本號會隨時間更新，因此開始之前，請造訪 Astro 安裝頁面確認需求。你需要偶數版本（22、24）；最好避免使用奇數版本（23、25）。
2. **VS Code** — Microsoft 提供的免費編輯器。你可以在其中開啟專案資料夾，Claude Code 也會在這裡運作並撰寫程式碼。
3. **終端機** — 輸入指令的視窗。你不需要另外安裝：從 VS Code 選單即可開啟，以下指令也都在那裡輸入。

如果你已安裝 Claude Code，而且做過任何東西，這些工具就都已經具備，可以跳過這一步。如果還沒有，我另外寫了一篇[如何安裝 Claude Code](https://ailoot.ai/blog/zh-hant-tw/install-claude-code/)的指南。

## 如何用一個指令建立 Astro 專案？

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="Key takeaways">

重點摘要

在終端機執行 `npm create astro@latest` 指令即可建立新專案。接著會啟動精靈，詢問幾個問題（安裝位置、使用哪個範本、是否安裝相依套件），然後替你建立專案骨架。如果專案資料夾尚不存在，精靈會自動建立。完成後，使用 `cd` 指令進入專案資料夾，就可以開始了。你不必事先建立空資料夾。

</div>

專案就從這裡開始，只需要一個指令。開啟終端機並輸入：

```bash
npm create astro@latest
```

安裝精靈就會啟動。文件對它的說明如下：

<figure>
<blockquote>
<p>你可以在電腦上的任何位置執行 create astro 指令，因此不需要事先建立空的專案資料夾。如果該資料夾尚不存在，精靈會協助你自動建立。</p>
</blockquote>
<figcaption>— Astro 官方文件「安裝」章節，https://docs.astro.build/en/install-and-setup/</figcaption>
</figure>

精靈會引導你完成步驟，並提出幾個問題：專案資料夾要取什麼名稱、要從哪個範本開始，以及是否要立即安裝相依套件。每個問題都可以選擇預設選項；第一個網站使用空白或精簡範本就可以。如果你在是否安裝相依套件的問題中回答「否」，之後可以在專案資料夾內執行 `npm install` 指令手動安裝。

精靈完成後，會顯示專案已建立，並建議你進行下一步：進入專案資料夾。

```bash
cd your-project-name
```

這樣就完成專案建立了。資料夾內已經有可用的網站骨架，包括建立頁面所需的幾個檔案和資料夾。你不需要手動編輯它們，但了解檔案位置很有幫助。Astro 規定只有一個資料夾是必要的：

<figure>
<blockquote>
<p>src/pages — 專案中必須存在的子資料夾。沒有它，網站就不會有頁面或路由。</p>
</blockquote>
<figcaption>— Astro 官方文件「專案結構」章節，https://docs.astro.build/en/basics/project-structure/</figcaption>
</figure>

換句話說，`src/pages` 是存放網站頁面的資料夾：首頁、「關於我們」頁面，以及聯絡頁面。附近通常還會有 `src/components`（可重複使用的部分，例如頁首和按鈕）、`src/layouts`（共用的頁面架構），以及存放圖片和檔案的 `public` 資料夾。你不必把結構背下來，只要記得頁面放在 `src/pages`，並在請 Claude「新增聯絡頁面」時參考這個位置即可。

## 如何透過 Claude Code 建立網站？

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="Key takeaways">

重點摘要

在 VS Code 開啟專案資料夾，啟動 Claude Code，接著用文字說明你希望網站有哪些內容。Claude 會自行編輯 `src/pages` 和相鄰資料夾中的檔案。把工作拆成小而明確的任務效果最好：先說「建立一個有標題、簡短說明和按鈕的首頁」，再說「新增服務頁面」，接著說「把顏色改成深色」。每次提出要求後，都在瀏覽器查看結果，並按需要補充說明。你不必在這裡寫程式。你的工作是給出明確指示，並檢查產出的結果。

</div>

專案骨架已經準備好，現在就用它來建立網站，接下來由 Claude Code 接手。在 VS Code 開啟專案資料夾，啟動 Claude Code，並用文字描述你需要什麼。它會自行編輯 `src/pages` 和附近資料夾中的檔案，你只要交代任務並查看結果即可。

依我的經驗，分小步驟進行效果最好。像是「幫我做一個公司網站」這種龐大的要求，最後往往會變得雜亂難以修改。因此，請把工作拆成簡短而明確的任務，一次交代一項：

1. 「做一個首頁：放上大型標題、幾句介紹我的工作內容，以及一個連到聯絡頁面的按鈕。」
2. 「新增一個服務頁面，列出三個區塊。」
3. 「新增聯絡頁面，放上電話號碼和 Telegram 連結。」
4. 「修改樣式：使用淺色背景和大而易讀的字體。」

進入下一步前，先檢查每個步驟的結果，這樣更容易發現問題並返回修正。小任務為什麼更可靠，以及如何讓 AI 保持正確方向，都屬於脈絡工程的一部分：任務和專案結構越清楚，結果就越容易預測。

Astro 為 AI 提供了方便的結構：頁面內容與樣式分開，頁面則依照共用規則建立。採用這種結構後，Claude 比較不容易混淆，編輯某個位置時也較不會破壞附近的內容。如果 Claude 突然看不到檔案或開始答非所問，請參閱[Claude Code 為什麼看不到專案檔案](https://ailoot.ai/blog/zh-hant-tw/claude-code-cant-see-project-files/)這篇指南。

Astro 只是使用 AI 工作的一項基礎。若要讓 Claude 持續建立你需要的內容，而不退回到看似合理的猜測，專案的完整設定包括：**AI 分身 + 第二大腦 + 脈絡工程**。



## 如何在發布前預覽網站？

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="Key takeaways">

重點摘要

要在網站上線前查看它，可以使用 Astro 開發伺服器。在專案資料夾內的終端機執行 `npm run dev`，Astro 就會啟動本機預覽，通常位於 localhost 的 4321 埠。在瀏覽器開啟這個網址，就能即時查看網站。Claude 修改檔案後，變更會隨操作即時反映：改了文字，頁面就會自動更新。這個伺服器只有你自己的電腦看得到，不會將網站發布到網際網路。

</div>

把網站公開給大家之前，先在自己的電腦上預覽。Astro 提供開發伺服器，可直接在你的電腦上即時顯示網站。請在專案資料夾內的終端機執行指令：

```bash
npm run dev
```

Astro 會啟動本機預覽，並在終端機印出網址。預設網址是 `localhost:4321`。複製網址並在瀏覽器開啟，就能看到網站。目前只有你能開啟這個網址；外界無法存取，這就是你的草稿。

方便之處在於預覽會即時更新：Claude 編輯檔案後，瀏覽器中的頁面會自動更新，不需要手動重新載入。整個過程很快：向 Claude 提出要求，在瀏覽器查看、進行修正，再看一次。你可以在這個階段完善網站。滿意後，就能在線上發布。

## 如何免費在線上發布 Astro 網站？

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="Key takeaways">

重點摘要

最簡單的免費方式是透過 GitHub。先將專案上傳到 GitHub 的儲存庫（線上程式碼儲存空間），再連接能建置 Astro 的託管服務：Netlify、Vercel，或 GitHub Pages。託管服務會辨識 Astro，使用建置指令建置網站，並透過自己的網址發布。每次你將新變更推送到儲存庫，網站就會自動重新建置和更新。你也可以用文字請 Claude Code 協助完成設定。

</div>

你需要把完成的網站放在某個地方，讓其他人能透過連結開啟。最簡單的免費方式是透過 GitHub：先將專案程式碼上傳到儲存庫，再連接會建置並發布網站的託管服務。步驟如下：

1. **在 GitHub 建立儲存庫。** 儲存庫是存放專案檔案的線上程式碼空間。你可以用自然語言指示 Claude Code 協助處理：請它「將專案上傳到新的 GitHub 儲存庫」，它就會建議所需指令。如果你從未使用過 GitHub，請先備妥註冊和登入的說明。
2. **連接託管服務。** 前往其中一項服務（Netlify、Vercel），使用 GitHub 帳戶登入，然後選擇你的儲存庫。Astro 文件如此描述這種方式：託管服務會監看你的儲存庫、建置網站，並發布網站。
3. **檢查建置設定。** 託管服務通常會辨識 Astro 並填入所需設定。如果系統要求你手動輸入，文件中的建置指令是 `astro build`（或 `npm run build`），完成的網站會放在 `dist` 資料夾中。
4. **點選「發布」。** 服務會建置網站，並提供像 `site-name.netlify.app` 這樣的連結。任何人都能透過該網址開啟網站。

以下是文件對於連接儲存庫與託管服務的原文說明：

<figure>
<blockquote>
<p>許多熱門託管服務會辨識你的專案是 Astro 網站，並自動選擇適當的建置與部署設定。託管服務會監看儲存庫的主要分支，每次有新變更時重新建置並重新部署網站。</p>
</blockquote>
<figcaption>— Astro 官方文件「部署」章節，https://docs.astro.build/en/guides/deploy/</figcaption>
</figure>

之後，發布就會自動進行：將新變更推送到儲存庫，網站就會自行重新建置並更新；你不必再點任何按鈕。

還有另一種免費方式：**GitHub Pages**。你可以透過 GitHub 自己的工具，直接從儲存庫發布網站。Astro 為此提供官方入門範本：

<figure>
<blockquote>
<p>Astro 支援官方 GitHub Action，幾乎不需要設定就能將專案部署至 GitHub Pages；這也是建議用來部署至 GitHub Pages 的方式。</p>
</blockquote>
<figcaption>— Astro 官方文件「部署至 GitHub Pages」章節，https://docs.astro.build/en/guides/deploy/github/</figcaption>
</figure>

採用這種方式，網站網址會像 `your-name.github.io/repository-name`，之後也可以連接自己的網域。你同樣可以透過 Claude Code 設定：用文字描述任務，它就會準備必要的檔案。

## 建立 Astro 網站要花多少錢？

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="Key takeaways">

重點摘要

Astro 是免費的開放原始碼軟體，不需要付費。基本託管也可以免費使用：GitHub Pages，以及 Netlify 和 Vercel 的入門方案，對輕量的 Astro 網站已經足夠。實際支出是你用來建立網站的 AI 工具（Claude），以及你選擇使用自有網域取代託管服務免費網址時的費用。因此，建立並發布網站可以完全不支付託管費用，只需要支付 AI 費用。

</div>

現在來談費用。Astro 是免費的開放原始碼工具，不另外收費。基本託管服務也提供免費選項：GitHub Pages，以及 Netlify 和 Vercel 的入門方案，通常足以託管輕量的 Astro 網站（免費方案有流量限制，但通常足以應付輕量的形象網站或登陸頁面）。

實際上可能需要付費的項目有兩種，而且都不是必須。第一種是你用來建立網站的 AI 工具。第二種是你自己的網域，用來取代 `name.netlify.app` 這類網址；這是選擇性項目，每年費用不高。你可以只支付 Claude 費用，就完成「建立網站並在線上發布」的流程。

## 大家還會問哪些關於 Astro 網站與 Claude Code 的問題？

<div class="aside" data-semantic="key-takeaway" role="note" aria-label="Key takeaways">

重點摘要

以下簡短回答常見問題。你不需要會寫程式：Claude 會寫程式碼，你用文字交代任務並檢查結果。完成的網站會保留為你的檔案，也能放在任何託管服務上，不會被綁定在別人的平台。Astro 適合內容型網站，例如形象網站、登陸頁面、部落格或展示網站；若要建立複雜的個人帳戶區域，最好考慮其他工具。完成的網站可以透過 GitHub 免費發布。

</div>

<div class="section">

### 常見問題

透過 Claude Code 使用 Astro 建立網站，需要會寫程式嗎？

不需要。我很久以前就不再手動寫程式碼了，所有事情都透過 AI 完成。你用文字交代任務，例如「做一個使用這種標題的首頁」，Claude Code 就會替你撰寫和編輯檔案。你不必懂語法，只需要了解自己想要什麼樣的網站，並在瀏覽器中檢查產出的結果。

必須事先建立專案資料夾嗎？

不必。執行 `npm create astro@latest` 指令會啟動精靈；如果資料夾尚不存在，精靈會自行建立。你可以在電腦上的任何位置執行這個指令。建立完成後，使用 `cd` 指令進入專案資料夾即可開始工作。

網站上線前要如何預覽？

在專案資料夾內執行 `npm run dev` 指令。Astro 會啟動本機預覽，通常位於 localhost:4321，你可以在自己電腦的瀏覽器開啟網站。只有你看得到這個預覽；變更會即時反映，不需要手動重新載入頁面。

可以免費發布 Astro 網站嗎？

可以。最簡單的方式是將專案上傳到 GitHub 儲存庫，並連接免費託管服務：GitHub Pages、Netlify 或 Vercel。託管服務會建置網站，並透過自己的網址發布。輕量網站不必另外支付託管費用；只有想使用自己的網域時才會產生費用。

Astro 適合每一種網站嗎？

Astro 是為內容型網站設計的：形象網站、登陸頁面、部落格、作品集，以及線上商店展示網站。這些正是它擅長的領域。如果專案的核心是具有個人帳戶區域、每個按鈕都要執行許多操作的複雜網頁應用程式，通常會用其他工具來建置那個部分。我在介紹 Astro 是什麼的文章中，更詳細地討論了 Astro 的優點和缺點。

在氛圍式編碼方面，Astro 比 Tilda 這類網站建置工具好在哪裡？

差別在於最後留在你手上的東西。Astro 網站由你的檔案組成，檔案由你保管，也可以發布在任何託管服務上；沒有第三方服務會代你保存它們。六個月後如果想搬遷或修改，你可以用任何工具開啟所有內容。選擇 Astro 或其他工具，取決於氛圍式編碼的一般原則：根據任務選工具。工具一覽請參閱 Claude Code 替代方案指南。

</div>

<div class="section" role="doc-bibliography" aria-label="Sources">

### 來源

- [Astro 官方文件：安裝與需求](https://docs.astro.build/en/install-and-setup/)
- [Astro 官方文件：命令列介面](https://docs.astro.build/en/reference/cli-reference/)
- [Astro 官方文件：專案結構](https://docs.astro.build/en/basics/project-structure/)
- [Astro 官方文件：部署網站](https://docs.astro.build/en/guides/deploy/)
- [Astro 官方文件：部署至 GitHub Pages](https://docs.astro.build/en/guides/deploy/github/)
- [Astro 官方文件：「為什麼選擇 Astro？」](https://docs.astro.build/en/concepts/why-astro/)

</div>

完整的氛圍式編碼設定：**AI 分身 + 第二大腦 + 脈絡工程**。





認識 [Ailoot](https://ailoot.ai/)。

## 常見問題：透過 Claude Code 建立 Astro 網站：從資料夾到發布

### 本機 Astro 預覽會把網站發布上網嗎？

不會。npm run dev 啟動本機開發預覽並印出地址，通常是 localhost:4321。透過託管服務或 GitHub Pages 工作流程發布，是另一個步驟。

### Astro 託管應檢查哪些建置設定？

本文靜態路徑應使用 astro build 或 npm run build，發布 dist 目錄。部署後開啟主機公開 URL 驗證頁面，本機預覽不能證明公開發布成功。


## Ailoot · 公司及其專案組合

Ailoot以累積的營運經驗、廣大的客戶群、穩定的服務及持續的KPI管理為基礎。

公司及其專案組合：數百萬客戶，每月銷售額達數十億。

Ailoot將這些營運經驗用於API存取，讓客戶的產品、代理、應用程式及自動化流程使用AI功能。