精華筆記 升級 Claude Code:在自己電腦做個人品牌網站
第 2 課你用 Lovable 十分鐘做出了第一個網站,爽感十足。但用久了會撞到三面牆:想改十次就燒掉十次額度;成品是平台幫你決定的 React 專案,程式碼躺在別人的雲端;哪天平台改價、改規則、甚至收掉,你的網站就跟著陪葬。這些不是 Lovable 的錯,而是所有瀏覽器建站工具的天性——方便的代價,就是掌控權在別人手上。
這堂課我們把掌控權拿回來:在你自己的電腦上安裝 Claude Code,讓 AI 直接在你的硬碟裡建立一個 Astro 個人品牌網站。做完之後,每一個檔案都是你的,想搬去哪個工具、哪個主機,都沒人攔得住你。
這堂學什麼
- 為什麼正式網站該「本地開發」:掌控權、無平台綁定、成本結構的差異
- 安裝 Node.js 與 Claude Code,用訂閱帳號登入(不用碰 API 金鑰)
- 從零下 prompt,讓 AI 建出一個 Astro 個人品牌網站
- 用
npm run dev在自己電腦預覽,體驗改一行、畫面即時更新 - 讓 AI 當導遊,讀懂專案資料夾裡每個檔案在幹嘛
觀念:瀏覽器工具 vs 本地開發,差在「誰擁有專案」
先看清楚你到底在升級什麼:
關鍵就一句:Lovable 是你去平台的廚房借煮,Claude Code 是請一位廚師到你家。食材(程式碼)、鍋具(工具鏈)、成品全在你家,廚師換人也不影響你繼續開伙。這也是為什麼第 5 課的「迭代改版」、第 6、7 課的「資安檢查」都建立在本地開發之上——你得先摸得到檔案,才談得上管理它。
那 Claude Code 到底是什麼?它是 Anthropic 官方的終端機 AI 工具:你用中文描述需求,它直接在你的專案資料夾裡建檔案、改程式、跑指令,改完跟你回報。它跟網頁版 Claude 最大的差別是「有手」:網頁版只能生出程式碼要你自己複製貼上,貼錯位置還得自己收拾;Claude Code 直接動手做完,而且它讀得到整個專案,你請它改導覽列,它知道要同步改到每一頁,不會改東漏西。運作方式長這樣:
費用面:Claude Pro 訂閱(US$20/月)就內含 Claude Code 的使用額度,重度使用者有 Max 方案(US$100–200/月)。額度用完會提示你等重置,不會像點數制那樣默默扣到見底。
先做個心理建設:這堂課你會第一次打開「終端機」——那個黑底白字、看起來很駭客的視窗。它其實只是「用打字代替點滑鼠」的檔案總管,你輸入指令、電腦照做,如此而已。這堂課需要你親手打的指令不超過五個,其他都是複製貼上;而且進到 Claude Code 之後,你打的是中文,不是指令。怕打錯?終端機打錯指令最糟就是跳出一行錯誤訊息,不會弄壞電腦。
這次我們選 Astro 當網站框架而不是純 HTML,理由很實際:個人品牌網站遲早要加頁面(作品集、文章、聯絡頁),Astro 讓「一個檔案=一個頁面」、共用的導覽列只要寫一次,而且產出的成品跟純 HTML 一樣輕快。你不用先學它——AI 會寫,你只要看得懂結構就好,這正是本課最後一段要做的事。
手把手實戰:從安裝到網站跑起來
整個流程四大步,安裝部分約 10 分鐘:
安裝 Node.js(跑網站預覽要用)
到 nodejs.org 下載 LTS 版(長期支援版),像裝一般軟體一樣一路下一步。裝完打開終端機(macOS 按⌘+空白鍵 搜「終端機」;Windows 開「PowerShell」),輸入:node -v
看到 v22.x.x 之類的版本號就成功了。Node.js 是讓 JavaScript 在你電腦上執行的引擎,等下 Astro 的預覽伺服器靠它跑。
安裝 Claude Code
macOS / Linux / WSL 用官方一行安裝(不經過 npm,少踩權限坑):curl -fsSL https://claude.ai/install.sh | bash
Windows 在 PowerShell 執行:
irm https://claude.ai/install.ps1 | iex
裝完關掉終端機重開一次,再輸入 claude --version 確認有版本號。
登入訂閱帳號
先建好專案資料夾再啟動——Claude Code 只會動「它被啟動的那個資料夾」,這是安全邊界:mkdir my-site
cd my-site
claude
第一次啟動會問登入方式,選 Claude account(訂閱登入),瀏覽器會跳出授權頁,按同意就完成。不要選 API 那條路——那是按 token 計費的開發者用法,訂閱戶用不到。
順便記兩個天天會用到的操作:想離開 Claude Code,輸入 /exit 就退回一般終端機;下次想繼續,在同一個資料夾輸入 claude -c,它會接續上一次的對話,記得你們之前聊過什麼,不用每次從頭解釋專案背景。
下 prompt,讓 AI 建站
在 Claude Code 的對話框貼上(內容換成你自己的):請用 Astro 建立一個個人品牌網站,在目前資料夾初始化專案。需求:
1. 首頁:大標題放我的名字「林小安」,副標「行銷企劃 × 內容創作者」,
一段 80 字左右的自我介紹(先用佔位文字)
2. 區塊:三個「我能提供的服務」卡片、一個「精選作品」區(先放 3 個假作品)、
頁尾放 Email 和社群連結
3. 風格:乾淨明亮、米白背景、一個深藍主色,手機上也要好看
4. 不要用 React 或其他 UI 框架,保持專案簡單
先告訴我你的計畫,我確認後再動手。
這段 prompt 每一行都有用意,拆給你看:第 1、2 點是具體的內容清單——名字、副標、幾個卡片、放什麼區塊,寫得越具體,AI 猜的空間越小,一次到位的機率越高;第 3 點是風格約束,「乾淨明亮、米白背景、深藍主色」比「好看一點」有用一百倍,「手機上也要好看」則逼它做響應式設計;第 4 點是技術邊界,明講不要 React,防止 AI 順手裝一堆你用不到的東西把專案弄複雜;最後一句「先講計畫再動手」是第 2 課學過的好習慣,在 Claude Code 一樣管用——它列出計畫後你確認方向,再回「OK,開始」。過程中它要執行指令(例如 npm install 安裝套件)會先徵求你同意,看懂再按允許。
本地預覽
建好之後直接跟它說:幫我啟動開發伺服器,告訴我要在瀏覽器開哪個網址。
或自己在專案資料夾另開一個終端機執行:
npm run dev
看到 Local: http://localhost:4321/ 就用瀏覽器打開它。這個網址只存在你的電腦裡,別人看不到。試著請 AI「把主色改成墨綠色」,存檔瞬間瀏覽器自動更新——這種即時回饋,就是本地開發的日常。
預覽伺服器會一直跑著,直到你在那個終端機視窗按 Ctrl+C 停掉、或關掉視窗為止。哪天發現 localhost 打不開,先別慌——多半只是伺服器沒在跑,回到專案資料夾重新執行 npm run dev 就回來了,你的檔案一根汗毛都不會少。
讓 AI 帶你讀懂專案
最後一步最重要——別讓專案變黑盒子。問它:請用完全不懂程式的人聽得懂的方式,解釋這個專案每個資料夾和檔案的用途。
哪些是我以後會常改的?哪些千萬不要動?
對照這張圖檢查你的理解:
記住三件事就夠:頁面在 src/pages/、圖片放 public/、node_modules/ 是自動生成的倉庫別碰也別備份。以後想改哪裡,直接跟 AI 說「幫我改首頁的自我介紹」,它自己會找到檔案。
順手做一件小事:對 Claude Code 輸入 /init,它會掃描專案後生成一個 CLAUDE.md 檔——這是專案的「給 AI 看的說明書」,以後每次開新對話,它都會先讀這份檔案,回答會更貼合你的專案。第 5 課會教你把需求描述術和專案規範都寫進去,現在先讓它生成預設版就好。
常見坑:錯誤訊息對照表
claude 卻說找不到指令——九成是終端機還沒重開,安裝程式改了路徑設定但舊視窗不知道。關掉終端機重開即可。重開還是不行,執行 exec $SHELL -l 重載設定;Windows 則確認你用的是安裝時同一個 PowerShell(不是舊的 cmd)。npm run dev 出現這串,代表 4321 連接埠被占用了——通常是你上次的預覽伺服器沒關,或開了兩個終端機都在跑。回到還在跑的那個視窗按 Ctrl+C 關掉,再重新啟動。找不到是誰占的?直接把錯誤訊息貼給 Claude Code,它會幫你找出並處理。node -v 確認版本換過來了。跟第 2 課的成果比一比
兩堂課做的都是「個人網站」,但性質完全不同:Lovable 給你的是速度,Claude Code 給你的是資產。以後接到「幫社團做個報名頁」這種一次性需求,用 Lovable 沒問題;但你自己的名片級網站,要活三年、五年、改幾百次的,放在自己硬碟裡才睡得安穩。
作業
- 完成課內流程,做出你自己的 Astro 個人網站並在 localhost 預覽成功
- 不看教學,自己下 prompt 完成三個修改:換一組配色、把假作品換成一個真實作品(含圖片,放進
public/)、新增一頁/about自我介紹頁 - 把專案資料夾整個複製一份到隨身碟或雲端硬碟——體會一下「檔案在我手上」是什麼感覺,順便當備份
- 思考題:你的網站現在只有 localhost 看得到,要給別人看需要什麼?先想想,下一課對答案
下一課預告
網站在自己電腦上跑得再漂亮,網址是 localhost 就只是自嗨。第 4 課「部署上線:GitHub + Vercel + 自訂網域」,我們把這個專案推上 GitHub 保管、用 Vercel 免費發布到全世界,再綁一個屬於你的網域——名片上終於可以印自己的網址了。