Claude Code x 部落格架設(二)：安裝 Astro 與 Git 存檔
AI 文章延伸
選擇平台後可直接帶入閱讀脈絡，快速整理重點、補齊盲點，並延伸到同站相關文章。
上一篇我們搞懂了 Astro、Git、Cloudflare 這三個名詞，概念有了，這篇直接動手——讓 Claude Code 幫你安裝 Astro，建立你的第一個部落格專案，然後在瀏覽器裡親眼看到它跑起來。
整個過程你不需要記任何指令，你要做的只有兩件事：跟 Claude Code 說話，然後看它幫你搞定。
動手之前，確認兩件事
在讓 Claude Code 安裝 Astro 之前，你的電腦需要兩樣東西：
第一，Claude Code 已經裝好。 如果還沒裝，先照著這篇安裝指南走完流程，大概十分鐘。
第二，Node.js 已經裝好。 Node.js 是讓 Astro 能在你電腦上運作的底層引擎。你不需要知道它的細節，只需要確認有裝就好。打開 Warp，輸入：
node -v如果看到類似下圖的版本號，代表已經裝好了：
如果看到「command not found」之類的訊息，別緊張——直接跟 Claude Code 說「幫我安裝 Node.js」，它會幫你處理。
讓 Claude Code 建立 Astro 專案
準備好了，我們分四步走：
第一步，建立專案資料夾 在桌面上按右鍵，新增一個資料夾，命名為 my-blog。這個資料夾就是你部落格的家，所有檔案都會放在裡面。
第二步，打開 Warp 終端機 如果你照著安裝指南走過一遍，電腦裡應該已經有 Warp 了。直接打開它就好。
第三步，進入你的專案資料夾 在 Warp 裡輸入 cd （cd 後面加一個空格），然後把桌面上的 my-blog 資料夾用滑鼠直接拖曳到 Warp 視窗裡，它會自動填入資料夾的完整路徑，按下 Enter 就進去了。Windows 使用者如果拖曳沒反應，可以手動輸入路徑：cd C:\Users\你的使用者名稱\Desktop\my-blog。
第四步，啟動 Claude Code 在 Warp 裡輸入 claude，按下 Enter。你會看到 Claude Code 的互動介面出現——現在你可以直接跟它對話了。
跟它說：
幫我用 Astro 在目前的資料夾建立一個部落格專案Claude Code 會開始執行一連串操作，你會看到畫面上跑出很多文字，像下面這樣：
那是它在背後幫你做這些事：
- 用 Astro 的官方工具產生部落格的初始檔案
- 安裝所有需要的套件
- 設定好基本的專案結構
整個過程大概一到兩分鐘，跑完之後，Claude Code 會告訴你專案建好了。
這時候你可以繼續跟它說：
幫我啟動開發伺服器等幾秒鐘，它會回你一個網址，像下圖中的 http://localhost:4323（數字可能不同，不影響）：
把這個網址貼到瀏覽器裡——你會看到一個有模有樣的部落格頁面：
沒錯，你的網站已經跑起來了。
Astro 專案裡面有什麼？
你不需要另外開 Finder 或檔案總管來看專案內容。在 Warp 的頂部工具列，點選左邊數過來第二個 icon（File explorer），側邊欄就會展開目錄結構：
第一眼看到這麼多檔案可能會有點慌，但其實結構很清楚。我們用一個比喻來理解：把整個專案想像成一間餐廳。
my-blog/
├── src/
│ ├── pages/ ← 菜單（每一頁對應網站上的一個頁面）
│ ├── layouts/ ← 餐廳裝潢（頁面的整體版型）
│ ├── components/ ← 餐具和擺盤（可重複使用的小元件）
│ └── content/ ← 食材倉庫（你寫的文章放這裡）
├── public/ ← 門口的招牌和裝飾（圖片、favicon 等靜態檔案）
├── astro.config.mjs ← 餐廳的營業登記（Astro 的設定檔）
└── package.json ← 食材供應商清單（專案用了哪些套件）不用全部記住。日常寫部落格，你最常碰的只有一個地方。
你真正需要關心的：content 資料夾
src/content/ 是你放文章的地方。Astro 的部落格模板通常會在裡面建一個 blog 資料夾，結構像這樣：
src/content/blog/
├── first-post.md
├── second-post.md
└── third-post.md每個 .md 檔就是一篇文章。打開其中一個，長這樣：
---
title: "我的第一篇文章"
description: "這是文章的簡短描述"
pubDate: 2026-04-13
---
文章內容寫在這裡。
用 # 表示大標題，用 ** 表示粗體。上面用 --- 包起來的區塊叫「frontmatter」，你可以把它想成文章的「基本資料卡」——標題、描述、發布日期都寫在這裡。下面就是文章本文，用 Markdown 格式書寫。
要新增一篇文章？建一個新的 .md 檔就好。或者更簡單——跟 Claude Code 說「幫我新增一篇文章，標題是 XXX」，它會幫你建好檔案、填好 frontmatter，你只要寫內容。
其他資料夾快速導覽
雖然日常不太會碰，但知道它們的用途，遇到問題時比較不會慌。
pages（菜單）：這個資料夾裡的每一個檔案，對應網站上的一個頁面。index.astro 就是首頁，about.astro 就是「關於」頁面。Astro 會自動根據檔案名稱產生對應的網址——你不需要設定任何路由規則。
layouts（裝潢）：定義頁面的整體架構。頂部的導覽列、底部的頁尾、側邊欄——這些每一頁都長一樣的部分，就放在 layout 裡。寫文章時不用管它，但如果你想改網站的整體外觀，跟 Claude Code 說一聲，它知道該改哪裡。
components（餐具）：可以重複使用的小零件。像是文章列表的卡片、社群分享按鈕、標籤雲。你不需要自己寫這些，Claude Code 很擅長處理元件。
public（招牌）：放圖片、網站圖示（favicon）這類不需要被 Astro 處理的靜態檔案。你丟一張 logo.png 進去，網站上就能直接用 /logo.png 存取它。
選一個好看的主題
Astro 預設的部落格模板功能完整，但外觀比較素，好消息是 Astro 有大量免費的部落格主題可以選擇，從極簡風到功能豐富的都有。
挑選主題的方式很簡單：在主題頁面上瀏覽，左側已經幫你篩選好 Blog 類別和免費條件，看到喜歡的點進去，每個主題都有 Demo 可以預覽實際效果。
確定喜歡之後，找到主題頁面上的 GitHub 連結，複製它的網址。
然後回到 Claude Code，跟它說：
幫我用這個 Astro 主題重新建立部落格專案：https://github.com/satnaing/astro-paperClaude Code 會幫你把主題的原始碼下載下來，安裝好所有套件，你只需要再跑一次開發伺服器，就能在瀏覽器裡看到新的樣子。不滿意？換一個主題的 GitHub 連結再說一次就好，整個過程不到五分鐘。
把網站名稱換成你自己的
專案建好之後，網站上顯示的名稱、描述還是模板預設的內容，第一件想做的事，大概就是把它改成自己的名字。
不需要知道設定檔在哪裡，直接跟 Claude Code 說：
把網站名稱改成「我的學習筆記」，網站描述改成「記錄我的學習心得和生活觀察」Claude Code 會自動找到存放這些設定的檔案——通常在 astro.config.mjs 或主題自己的設定檔裡——然後幫你改好。重新整理瀏覽器，你就會看到新的名稱出現在網站標題和瀏覽器分頁上。
如果你用的主題有 logo，也可以說「幫我把 logo 換成這張圖片」，把圖片丟進專案資料夾就好。
調整選單內容
大部分主題預設的選單會有幾個連結：首頁、文章列表、關於頁面。你可能想加一個「聯絡我」，或者把不需要的項目拿掉。
跟 Claude Code 說：
幫我把導覽列的選單改成：首頁、文章、關於我、聯絡我它會去找主題中負責選單的設定或元件，幫你調整項目和連結。不同的主題處理選單的方式不太一樣——有些用設定檔，有些直接寫在元件裡——但這些差異 Claude Code 都能自己判斷，你不需要管。
想調整選單的順序？想讓某個連結另開分頁？說一聲就好。
新增你的第一篇文章
選單調好了，網站名稱也改了，接下來最重要的事——寫一篇文章。
跟 Claude Code 說：
幫我新增一篇部落格文章，標題是「我的第一篇文章」，內容先寫一段自我介紹它會在 src/content/blog/（或主題指定的文章資料夾）底下建一個新的 Markdown 檔案，幫你填好 frontmatter 裡的標題、日期、描述，甚至會幫你起個草稿。你只需要打開檔案，把內容改成你想寫的東西。
想要更進階一點？你可以一次給它更多資訊：
幫我新增一篇文章，標題是「搬家到新城市的第一個月」，
描述是「記錄搬到台北之後的生活適應」，
標籤是「生活」和「台北」Claude Code 會根據主題支援的 frontmatter 欄位，自動幫你填進去。存檔後重新整理瀏覽器，新文章就會出現在文章列表裡。從跟 Claude Code 說話到看到文章上線，不到一分鐘。
之後要修改文章也一樣簡單：「幫我把那篇搬家的文章標題改成……」「幫我在第二段後面加一張圖片」。Claude Code 知道檔案在哪裡，直接幫你改。
如果你打算認真經營部落格，不只是偶爾發一篇，Claude Code 還有一個更強的玩法：用 Skill 把你的寫作流程變成一套可重複執行的指令。你可以教它「每次寫文章前先做關鍵字研究、用什麼語氣、文章結構怎麼安排」，之後只要一句「幫我寫一篇關於 XX 的文章」，它就會按照你定義好的流程走完全部步驟。我們在這篇文章有完整的實作紀錄，等你熟悉基本操作之後，值得回來看看。
用 Git 幫你的專案存檔
到目前為止，所有修改都只存在你的電腦上。如果不小心刪錯檔案、改壞設定，沒有任何備份可以回復。這時候就需要 Git 了——上一篇提到的那個「時光機」。
為什麼不用 iCloud 或 Dropbox 備份？
你可能會想：「我把專案資料夾放到 iCloud Drive 或 Dropbox 裡，不就自動備份了嗎？」
聽起來合理，但實際上會出問題。一個 Astro 專案裡有一個叫 node_modules 的資料夾，裝著幾萬個小檔案（你在 Warp 的 File explorer 裡有看到它）。iCloud 和 Dropbox 會試圖同步這些檔案，結果就是：同步速度慢到不行、佔用大量上傳頻寬，有時候還會因為檔案鎖定衝突，導致專案跑不起來。
Git 的做法不一樣。它只追蹤你真正需要的檔案（原始碼和文章），自動忽略 node_modules 這類可以隨時重新安裝的東西。而且 Git 不只是備份——它記錄每一次修改的差異，你可以隨時回到任何一個版本，看看當時改了什麼。雲端硬碟做不到這件事。
安裝 Git 並初始化專案
如果你照著安裝指南走過一遍，Git 應該已經裝好了。確認一下：
git --version看到版本號就代表沒問題。接下來跟 Claude Code 說：
幫我初始化 Git，然後把目前的檔案都做第一次存檔Claude Code 會幫你執行三件事：
- 初始化 Git 倉庫 — 在專案裡建立 Git 的追蹤系統
- 設定忽略規則 — 自動排除
node_modules等不需要追蹤的檔案 - 建立第一個 commit — 把目前所有檔案存成第一個版本
「commit」你可以理解成 Word 或 Excel 裡的「另存新檔」，但更聰明——它不會產生一堆 v1、v2、最終版 的副本，而是在同一個檔案上記錄每一次修改的差異。每做一次 commit，Git 就記住你的專案在那個當下長什麼樣子。
改完之後：存檔的流程
之後每次你改了東西——修改文章、調整選單、換了主題——都可以跟 Claude Code 說：
幫我把這次的修改存檔Claude Code 會幫你做一次 commit，附上一句簡短的說明，描述這次改了什麼，這些存檔會累積成一條時間線，你隨時可以回頭看。
推到 GitHub：雲端備份
存檔只在你的電腦上。如果電腦壞了，存檔也跟著消失，所以我們要把這些存檔「推」到 GitHub——上一篇介紹過的雲端程式碼倉庫。
在推之前，你需要一個 GitHub 帳號，如果還沒有，先到 github.com/signup 註冊，流程跟一般網站註冊差不多：填 email、設定密碼、選使用者名稱，然後到信箱點確認連結就好，免費帳號就夠用了，不需要付費方案。
帳號準備好之後，跟 Claude Code 說：
幫我在 GitHub 上建立一個私有倉庫，然後把專案推上去這裡特別提醒：記得說「私有倉庫」。GitHub 的倉庫分公開和私有兩種，公開倉庫任何人都能看到你的程式碼和文章內容，私有倉庫只有你自己（和你授權的人）看得到。部落格在正式上線之前，沒有理由讓全世界看到你的草稿。
第一次推的時候，Claude Code 會請你登入 GitHub 帳號進行授權，照著它的提示走就好，通常會打開瀏覽器讓你點一下「授權」，完成之後，你會看到類似這樣的畫面：
看到最後一行顯示你的 GitHub 倉庫網址，就代表專案已經有了一份雲端備份。
之後每次做完修改，想同步到 GitHub，只要說：
幫我把修改推到 GitHub一句話搞定。整個「修改 → 存檔 → 推到雲端」的流程，你不需要記任何 Git 指令，全部交給 Claude Code。
改東西不需要怕
有了 Git 當靠山，這個心理關卡就不存在了。
假設你請 Claude Code 改了網站的配色，結果改完之後整個版面歪掉了。不用慌，跟它說：
剛才的修改把版面弄壞了，幫我還原到上一次存檔的狀態Claude Code 會用 Git 把所有檔案回復到上一次 commit 的樣子，就像什麼事都沒發生過。
如果你想回到更早之前的版本——比如三天前的狀態——也可以說：
幫我看一下最近的存檔紀錄Claude Code 會列出每一次 commit 的時間和說明，你挑一個想回去的版本，告訴它「幫我回到那個版本」就好，就像 Word 裡的「復原」按鈕，但不只能回到上一步——你可以回到任何一個存檔過的版本。
還有一種情況：你只想還原某一個檔案，其他修改要保留，比如你改了三個檔案，其中一個改壞了：
幫我把 src/pages/index.astro 還原到上一次存檔的版本，其他檔案不要動Claude Code 知道怎麼只復原指定的檔案。
記住一個原則：改東西之前先存檔，改壞了就還原。養成這個習慣，你就可以大膽嘗試任何修改，而且在推到 GitHub 之前，你的修改只在自己的電腦上，全世界只有你看得到。所以儘管改，改到滿意再說。
到目前為止你完成了什麼？
讓我們回顧一下。從第一篇的概念介紹到現在，你已經：
- 搞懂 Astro、Git、Cloudflare 的角色
- 用 Claude Code 安裝了 Astro
- 建立了第一個部落格專案
- 知道專案裡每個資料夾的用途
- 改好網站名稱、調整了選單
- 新增了第一篇文章
- 用 Git 做了第一次存檔，並推到 GitHub
- 在自己的電腦上看到網站跑起來
整個過程，你沒有手動輸入任何 Git 指令。
下一篇，我們要把這個網站部署到 Cloudflare Workers，讓全世界都能看到。從「我電腦上有個網站」變成「我有一個真正的網址」——這一步同樣交給 Claude Code 來處理。
常見問題
安裝 Astro 的時候出現錯誤怎麼辦？
最常見的原因是 Node.js 版本太舊。Astro 需要 Node.js 18 以上的版本，建議直接裝最新版，跟 Claude Code 說「幫我檢查 Node.js 版本，如果太舊就幫我更新」，它會幫你處理，如果還是不行，把錯誤訊息貼給 Claude Code，它通常能直接判斷問題出在哪裡。
Astro 的主題可以之後再換嗎？
可以，但換主題比較像「搬家」而不是「換窗簾」。不同主題的檔案結構可能不一樣，搬過去需要調整一些設定， 好消息是 Claude Code 對 Astro 主題的結構很熟悉，跟它說你想換主題，它會幫你處理遷移的細節。建議在部落格初期、文章還不多的時候就選定主題。
關掉終端機之後網站就不見了，正常嗎？
正常。開發伺服器只是暫時在你電腦上跑的預覽環境，關掉終端機它就會停止。你的檔案都還在，下次想看的時候，跟 Claude Code 說「幫我啟動開發伺服器」就會再跑起來。等我們在下一篇把網站部署到 Cloudflare Workers 之後，網站就會 24 小時在線，不需要你的電腦一直開著。