零基礎AI輔助程式設計
不用會寫程式也能開始:從安裝開發環境、讓 Claude Code 依照你的「系統規劃」寫程式,到推上 GitHub 並用 Zeabur 部署成真正的網站。右上角可切換 Windows/macOS,內容會跟著變喔!
課前準備:帳號與電腦檢查 補充
開課前先把帳號都申請好,課堂上就不會卡在收驗證信。
| 需要的帳號 | 用途 | 費用 |
|---|---|---|
| Google 帳號 | 登入 Antigravity IDE | 免費 |
| Claude 帳號(claude.ai) | 登入 Claude Code,需要 Pro 或 Max 付費方案(或 Anthropic Console API 額度) | 付費 |
| GitHub 帳號(github.com) | 存放程式碼(步驟 8) | 免費 |
| Zeabur 帳號(zeabur.com) | 部署網站(步驟 9),建議用 GitHub 帳號登入 | 伺服器需付費 |
電腦需求
- Windows 10(1809 以上)或 Windows 11,64 位元;要有系統管理員權限才能安裝軟體(學校電腦常被鎖,請先跟資訊組確認)。
- macOS 13 Ventura 以上。先確認晶片:點左上角 →「關於這台 Mac」,看是 Apple M 系列還是 Intel,下載時會用到。
- 穩定網路、至少 5 GB 硬碟空間、可正常收信的 Email。
下載並安裝 Python 3.11.9
Python 是 AI 最常用的程式語言,之後 Claude Code 幫你寫的 Python 程式要靠它執行。
- 打開 Python 3.11.9 官方下載頁:python.org/downloads/release/python-3119,捲到最下方「Files」。
- 下載 Windows installer (64-bit),檔名
python-3.11.9-amd64.exe。 - 下載 macOS 64-bit universal2 installer,檔名
python-3.11.9-macos11.pkg(M 系列與 Intel 都適用)。 - 執行安裝檔,在第一個畫面最下方一定要勾選「Add python.exe to PATH」,再按「Install Now」。
- 雙擊 .pkg,一路按「繼續」→「同意」→「安裝」,輸入 Mac 登入密碼。Mac 版會自動設定好路徑,沒有 PATH 勾選框。
- 安裝完成畫面若出現「Disable path length limit」,請點一下(解除 260 字元路徑限制,避免以後安裝套件出錯)。
- 安裝完成會自動開啟「Python 3.11」資料夾,請雙擊 Install Certificates.command(安裝 SSL 憑證,否則 Python 連網會失敗)。
ReadMe.rtf
IDLE.app
Install Certificates.command
Update Shell Profile.command
驗證安裝
重新開一個終端機,輸入:
python --version
python3 --version
看到 Python 3.11.9 就成功了 🎉
python 卻跳出 Microsoft Store:代表忘了勾 PATH。請重新執行安裝檔 → Modify → 勾「Add Python to environment variables」,或到「設定 → 應用程式 → 進階應用程式設定 → 應用程式執行別名」把兩個 python 別名關掉。python3、pip3,不要用 python。下載 Antigravity IDE,安裝繁體中文語言包
Antigravity 是 Google 推出的 AI 程式編輯器(以 VS Code 為基礎),我們用它來看檔案、開終端機。
- 前往 antigravity.google/download。
- 點 Download for Windows,執行下載的 .exe,依指示按「下一步」完成安裝(建議勾選「建立桌面圖示」與「加入 PATH」)。
- 依晶片選 Apple Silicon 或 Intel 版的 .dmg,打開後把 Antigravity 拖進「應用程式」資料夾。第一次開啟若跳出安全警告,按「打開」。
- 第一次啟動會進入設定精靈:選「Start fresh」(全新開始)→ 選佈景主題 → 代理模式選預設即可 → 用 Google 帳號登入。
- 點左側延伸模組圖示(或按 Ctrl+Shift+X⌘+⇧+X),搜尋
Chinese Traditional。 - 找到 Chinese (Traditional) Language Pack(發行者 MS-CEINTL)→ 按 Install。
- 右下角跳出「Change Language and Restart」→ 點它,IDE 重開後就是繁體中文介面了。
MS-CEINTL
Install
Change Language and Restart
沒有跳出重新啟動的提示?
按 Ctrl+Shift+P⌘+⇧+P 打開命令選擇區,輸入Configure Display Language → 選 中文(繁體) zh-tw → 重新啟動。
下載並安裝 Node.js
Node.js 讓電腦能執行 JavaScript,也附帶 npm 套件管理工具;做網頁、跑很多開發工具都需要它。
- 前往 nodejs.org/zh-tw/download,選標示 LTS(長期支援版)的版本。
- 下載 Windows 安裝程式 (.msi),一路按 Next;「Tools for Native Modules」那頁不用勾,直接 Next → Install。
- 下載 macOS 安裝程式 (.pkg),雙擊後一路「繼續」→「安裝」。
- 安裝完關掉並重開終端機,輸入下面指令驗證:
node -v npm -v
npm -v 出現紅字「因為這個系統上已停用指令碼執行」,請在 PowerShell 執行下面這行後重開 PowerShell:
Set-ExecutionPolicy -Scope CurrentUser RemoteSigned
Y 按 Enter。
安裝 Git 並設定身分 補充
原流程漏掉的關鍵:安裝外掛(步驟 6)與推送到 GitHub(步驟 8)都要用到 Git。另外,Windows 版 Claude Code 雖然沒有 Git 也能改用 PowerShell 執行,但有安裝 Git for Windows 時會優先使用其中的 Git Bash,指令相容性更好,建議一定要裝。
- 前往 git-scm.com/downloads/win,下載 64-bit Git for Windows Setup。
- 執行安裝檔,所有選項都用預設值一路 Next 即可(預設就會安裝 Git Bash 與 Git Credential Manager)。
- 在終端機輸入下面指令,會跳出視窗詢問是否安裝「命令列開發者工具」→ 按「安裝」(約 5–10 分鐘)。
xcode-select --install
若顯示 “already installed” 代表已經有了,直接下一步。
xcode-select --install)。驗證並設定你的名字與 Email(只要做一次)
git --version git config --global user.name "你的英文名字" git config --global user.email "你的GitHub信箱@example.com"
下載安裝 Claude Code
Claude Code 是 Anthropic 的 AI 程式助理,在終端機裡用中文跟它說要做什麼,它就會幫你寫程式、改檔案。
① 使用原生安裝器(推薦方式)
複製下方指令貼到 PowerShell 並按 Enter:
irm https://claude.ai/install.ps1 | iex
irm 是 Invoke-RestMethod 的縮寫,iex 是 Invoke-Expression。整段意思是「下載安裝腳本並執行」。
② 設定 PATH 環境變數
安裝完成後,設定 PATH 系統環境變數,讓系統能找到 claude.exe 的位置。複製下方指令貼到 PowerShell 並按 Enter:
$currentPath = [Environment]::GetEnvironmentVariable('PATH', 'User')
[Environment]::SetEnvironmentVariable('PATH', "$currentPath;$env:USERPROFILE\.local\bin", 'User')這段指令會把 %USERPROFILE%\.local\bin(原生安裝器把 claude.exe 放在這裡)加進使用者層級的 PATH。執行後請關閉並重新打開 PowerShell 讓設定生效。
① 使用原生安裝器(推薦方式)
複製下方指令貼到 終端機 並按 Enter:
curl -fsSL https://claude.ai/install.sh | bash
curl 下載安裝腳本,| bash 把它交給 bash 執行。安裝器會把 claude 放在 ~/.local/bin。
② 若出現 command not found:設定 PATH
安裝結束時若提示 ~/.local/bin 不在 PATH,執行下面這行把它加進 zsh 設定檔:
echo 'export PATH="$HOME/.local/bin:$PATH"' >> ~/.zshrc && source ~/.zshrc
③ 驗證安裝
claude --version claude doctor
建立專案資料夾 → Antigravity 開啟 → 終端機登入 Claude
- 建立專案資料夾,名稱用英文小寫、不要有空格或中文(補充:中文路徑常讓工具出錯),例如:
C:\Users\你的帳號\Documents\my-first-app~/Documents/my-first-app。 - 打開 Antigravity →「檔案」→「開啟資料夾」→ 選剛剛的資料夾。若問「是否信任此資料夾的作者」,選「是,我信任作者」。
- 開啟終端機:選單「終端機」→「新增終端」,或按 Ctrl+`⌃+`(Esc 下面那顆鍵)。終端機的位置會自動在專案資料夾裡。
- 輸入
claude按 Enter,第一次會依序:選擇顏色主題 → 選登入方式「Claude account with subscription」→ 自動開啟瀏覽器 → 按「授權」→ 回到終端機。 - 最後問「Do you trust the files in this folder?」→ 選 Yes, proceed。看到輸入框
>就可以開始跟 Claude 對話了!
你好,請用繁體中文介紹這個資料夾目前有什麼。離開 Claude Code 輸入 /exit 或按兩次 Ctrl+C。🧰 初學者常用指令
在輸入框打 / 會跳出所有指令清單,可以用方向鍵挑選。先記住下面這幾個就很夠用:
| 指令 | 用途 | 什麼時候用・範例 |
|---|---|---|
/help | 顯示說明與可用指令 | 忘記指令時先打它,或直接輸入 / 看清單 |
/init | 幫專案建立 CLAUDE.md(專案說明書) | 專案有程式碼後執行一次,Claude 之後每次對話都會先讀它,比較懂你的專案 |
/clear | 開始新對話、清空上下文 | 換做另一件事時用,避免舊對話干擾;舊對話之後還能用 /resume 找回 |
/compact | 把目前對話整理成摘要,騰出空間 | 對話很長、Claude 開始忘東忘西時:/compact 保留點餐功能的討論 |
/context | 用彩色格子顯示對話佔用了多少空間 | 想知道是否該 /compact 或 /clear 時看一下 |
/usage | 查看本次花費與方案用量額度 | 擔心用量快到上限時查詢 |
/rewind | 把對話和程式碼回到之前的某個時間點 | Claude 改壞了想復原時用;輸入框是空的時候按兩次 Esc 也可以 |
/resume | 選擇並繼續之前的對話 | 關掉後想接著做;或在終端機直接輸入 claude -c 繼續上一次 |
/model | 切換 AI 模型 | 一般用預設即可;想要更強的推理可選 opus |
/btw | 順便問個小問題,不會加進對話紀錄 | /btw requirements.txt 是做什麼用的? |
/exit | 離開 Claude Code | 下次在同一個資料夾輸入 claude 就能再開始 |
⌨️ 輸入技巧與快捷鍵
| 按鍵/符號 | 用途 | 範例・說明 |
|---|---|---|
@ | 指定要 Claude 看的檔案 | 請看 @app.py,為什麼送出後畫面沒反應?(打 @ 後會自動補完檔名) |
! | 直接執行終端機指令,結果會給 Claude 看 | !python app.py,跑出錯誤後接著問「這個錯誤怎麼修?」 |
| Esc | 中途打斷 Claude | 發現方向不對時按下,已完成的部分會保留,再告訴它新的方向 |
| Esc Esc | 回復選單(同 /rewind) | 輸入框有字時則是清空輸入框 |
| Shift+Tab | 切換權限模式(左下角會顯示目前模式) | 依序切換:Manual(每步都詢問)→ acceptEdits(自動接受檔案修改)→ plan(只規劃、不改檔案)→ auto(Claude 自行判斷是否安全,新版的預設) |
\ + Enter 或 Ctrl+J | 換行,不送出 | 想分好幾行描述需求時用(Antigravity 終端機裡 Shift+Enter 可能無效) |
| Alt+VCtrl+V | 貼上剪貼簿裡的圖片 | 截圖錯誤畫面後貼上:「畫面跑版了,請看這張圖」(Mac 是 Ctrl+V,不是 ⌘+V) |
| ↑ / ↓ | 叫出之前輸入過的內容 | 想重複或修改上一句時用 |
💬 使用範例:一次完整的對話流程
請用繁體中文說明這個專案目前有哪些檔案、各自做什麼 請看 @app.py,同學按「送出」後畫面沒有反應,幫我找原因並修正 !python app.py 剛剛的錯誤訊息是什麼意思?請用簡單的話解釋,再幫我修好 /compact 保留點餐功能的討論 請告訴我怎麼在本機打開網站測試
安裝 oh-my-claudecode 與 claude-img
A. oh-my-claudecode(OMC)— 多代理協作外掛
專案頁:github.com/Yeachan-Heo/oh-my-claudecode。它讓 Claude Code 能分派多個專門角色(規劃、實作、審查)合作。以下指令是在 Claude Code 裡面輸入(先執行 claude),一次一行:
/plugin marketplace add https://github.com/Yeachan-Heo/oh-my-claudecode
/plugin install oh-my-claudecode
安裝後輸入 /exit 離開、再輸入 claude 重新進入,然後執行初始設定:
/oh-my-claudecode:omc-setup
/autopilot 幫我做一個待辦清單網頁。B. claude-img — 用檔案選擇器一次上傳多張圖片
專案頁:github.com/Lazy-poet/claude-img。先 /exit 離開 Claude Code,在一般終端機執行:
irm https://claude-img-releases.s3.eu-north-1.amazonaws.com/install.ps1 | iex
curl -fsSL https://claude-img-releases.s3.eu-north-1.amazonaws.com/install.sh | bash
重新執行 claude 後,輸入 /img 就會跳出檔案選擇視窗,可一次選多張截圖給 Claude 看,例如:
/img 請照這張設計圖的版面幫我做首頁
新增「系統規劃.md」並撰寫功能需求
AI 寫得好不好,取決於你講得清不清楚。先把想做的東西寫成一份規劃文件,再請 Claude 照著做。
- 在 Antigravity 左側檔案總管空白處按右鍵 →「新增檔案」→ 命名為
系統規劃.md。 - 從下面兩個範本挑一個複製貼上(第一次建議用初學者版),把內容改成你自己的點子,存檔(Ctrl+S⌘+S)。
🌱 初學者版:只寫需求,技術交給 Claude 建議
不知道要用什麼語言、要不要資料庫都沒關係,只要說清楚想做什麼、誰會用、要部署到 Zeabur,其餘請 Claude 幫你分析和建議。
# 系統規劃:班級點餐小幫手 ## 我想做什麼 每天中午統計同學訂便當很麻煩,想做一個網站讓同學自己點餐,值日生可以直接看統計。 ## 誰會用 - 班上同學:輸入座號、選便當 - 值日生:看各品項的數量和總金額 ## 需要的功能 1. 同學點餐 2. 值日生看統計 3. 每天的資料分開,不要跟前一天混在一起 ## 部署 - 要部署到 Zeabur,讓大家用手機打開網址就能用 - 程式碼放在 GitHub ## 請 Claude 幫我 - 我是初學者,技術細節請你幫我分析和建議 - 需求有不清楚或沒想到的地方,先問我 - 建議適合部署到 Zeabur 的做法(用什麼程式語言、需不需要資料庫……),用簡單的話說明原因 - 介面用繁體中文,手機也要好用
請閱讀 系統規劃.md。我是初學者,請先幫我分析需求,有不清楚的地方先問我;再建議適合部署到 Zeabur 的技術做法,用簡單的話說明原因。等我同意後,用繁體中文列出實作計畫和檔案結構,確認後再開始寫程式。完成後告訴我怎麼在本機執行測試。
🚀 進階版:連技術選擇、資料庫、介面風格都寫清楚
已經知道想用什麼技術,或想精準控制成品時使用。下面的範本指定了 Flask+Zeabur PostgreSQL,並請 Claude 先做 5 種介面風格讓你挑。
# 系統規劃:班級點餐小幫手
## 1. 目標與使用者
- 要解決的問題:每天中午統計同學訂便當很麻煩
- 使用者:班上同學(點餐)、值日生(看統計)
## 2. 功能需求(依優先順序)
1. 同學輸入座號、選擇便當品項後送出
2. 值日生頁面:顯示各品項數量與總金額
3. 每天自動清空前一天的資料
## 3. 頁面
- 首頁(點餐表單)
- 統計頁(值日生用)
## 4. 介面風格(先讓我挑選)
- 正式寫程式前,先用首頁(點餐表單)做出 5 種不同風格的預覽,
每種存成 style-previews/ 資料夾裡的一個 HTML 檔,用瀏覽器直接打開就能看
- 5 種風格要差異明顯,例如:清新簡約、可愛活潑、深色科技、復古手寫、日系便當店
- 每種附一句說明:配色、字體感覺、適合的情境
- 我選定其中一種後,整個網站都套用那個風格,再刪除 style-previews/ 資料夾
- 手機也能用,繁體中文
## 5. 技術選擇
- 語言:Python 3.11(與本機安裝的版本一致)
- 後端:Flask 3,頁面用 Jinja2 範本
- 資料庫:PostgreSQL(部署在 Zeabur,與網站放同一個專案)
- 資料庫套件:Flask-SQLAlchemy + psycopg 3(requirements.txt 寫 psycopg[binary])
- 連線設定:從環境變數 DATABASE_URL 讀取,並把開頭的 postgresql:// 轉成 postgresql+psycopg://;
本機沒有設定 DATABASE_URL 時,自動改用 SQLite 檔案方便測試
- 程式啟動時自動建立資料表
- 正式環境用 gunicorn 啟動,監聽 0.0.0.0 與環境變數 PORT
- 所有套件寫在 requirements.txt
## 6. 部署
- 程式碼放 GitHub(private)
- 部署到 Zeabur:同一個專案裡建立「PostgreSQL」與「網站」兩個服務
- 網站服務的環境變數:
- DATABASE_URL = ${POSTGRES_CONNECTION_STRING}
- ZBPACK_PYTHON_VERSION = 3.11
- 對外網址 xxx.zeabur.app
## 7. 不要做的事
- 不需要登入、不需要金流請閱讀 系統規劃.md,先依照「介面風格」做出 5 種風格預覽讓我挑選。我選好之後,再用繁體中文列出實作計畫和檔案結構,等我確認後再開始寫程式。完成後告訴我怎麼在本機執行測試。
style-previews 資料夾裡,對 HTML 檔按右鍵 →「在檔案總管中顯示在 Finder 中顯示」,再雙擊用瀏覽器打開。看完直接跟 Claude 說「我選第 3 種」就好;也可以混搭,例如「第 2 種的配色+第 4 種的字體」。http://localhost:5000 之類)。本機都不能跑,上雲端更不可能成功。建立 GitHub,新增 Private Repository 並推送程式碼
A. 註冊與建立倉庫
- 到 github.com/signup 註冊,收 Email 驗證碼。依提示啟用兩步驟驗證(2FA)(GitHub 現在要求,用手機 App 掃 QR code)。
- 登入後點右上角 + →「New repository」。
- Repository name 填
my-first-app;可見度一定要選「Private」。 - 補充:「Add README / .gitignore / license」都不要勾(本機已有檔案,勾了會造成第一次推送衝突)→ 按 Create repository。
B. 讓電腦能登入 GitHub 補充
GitHub 早就不接受用「密碼」推送程式碼。最簡單的方式是安裝 GitHub CLI(gh),用瀏覽器授權一次就好:
winget install --id GitHub.cli
Mac:到 cli.github.com 下載 macOS 安裝檔(.pkg)並安裝。
安裝完重開終端機,執行登入,依序選 GitHub.com → HTTPS → Yes → Login with a web browser,把畫面上的 8 碼代碼貼到瀏覽器授權:
gh auth login
C. 推送程式碼
做法一(推薦):直接請 Claude Code 幫你做:
請幫我建立適合這個專案的 .gitignore(排除 .env、node_modules、__pycache__、.venv),初始化 git,提交所有檔案,並推送到我剛建立的 GitHub private repo:https://github.com/你的帳號/my-first-app
做法二:自己在專案資料夾的終端機輸入(把網址換成你的):
git init git add . git commit -m "first commit" git branch -M main git remote add origin https://github.com/你的帳號/my-first-app.git git push -u origin main
.env 檔,並確認 .env 有寫進 .gitignore,絕對不要推上 GitHub(就算是 private 也一樣)。D. 跟 Claude 合作的節奏:每完成一段功能就 commit → merge → push
實際開發時,最常用的不是一條條打 Git 指令,而是在每完成一段功能、測試沒問題後,跟 Claude 說一句話,讓它幫你一次做完「存檔 → 合併 → 上傳」。一段功能可以是「新增統計頁」「修好送出沒反應的 bug」「改成深色風格」這種大小。
開一個新分支來做值日生統計頁 (……跟 Claude 討論、實作、在本機測試沒問題……) commit 後合併回 main 並 push
最後那句「commit 後合併回 main 並 push」,Claude 會依序幫你做這幾件事(每個 Git 指令的意思見下方 E):
| 步驟 | Claude 做的事 | 對應的 Git 指令 |
|---|---|---|
| 1. commit | 把這段功能改過的檔案存成一個存檔點,並寫好說明這次改了什麼的訊息 | git add、git commit |
| 2. merge | 切回 main,把功能分支的成果合併進來 | git switch main、git merge |
| 3. push | 把 main 上傳到 GitHub,Zeabur 偵測到後自動重新部署網站 | git push |
為什麼要「一段功能就做一次」,而不是全部做完才上傳?
- 改壞了好救:每個存檔點都很小、說明清楚,出問題時能精準退回某一段,不用整個重來。
- 網站一直是最新的:每段功能完成就自動部署,同學可以馬上試用、給你回饋。
- 不怕電腦出狀況:程式碼隨時都備份在 GitHub 上。
- main 永遠能用:功能在分支上做到好才合併,做到一半的東西不會跑到線上。
- 說這句話之前,先在本機測試過功能是正常的;沒測過就推上去,壞掉的版本會直接部署到線上。
- push 是會影響外部的動作,Claude 可能會先詢問你同不同意,確認無誤再按允許。
- 完成後看 Claude 的回報:有沒有 commit 編號、push 是否成功;幾分鐘後打開
xxx.zeabur.app確認新功能上線。 - 用完的分支可以再說一句「刪掉已經合併的分支」,保持整潔。
E. 常用 Git 指令 補充
Git 就像程式碼的「存檔+時光機」:commit 是存一個存檔點,push 是把存檔上傳到 GitHub。下面的指令都在專案資料夾的終端機輸入;不想記指令,也可以直接用中文請 Claude 幫你做。
| 指令 | 用途 | 也可以跟 Claude 說 |
|---|---|---|
git status | 查看哪些檔案被修改、還沒存檔 | 「目前有哪些檔案改過?」 |
git add . | 把所有修改加入「準備存檔」清單 | 「幫我 commit,訊息用繁體中文」 |
git commit -m "說明" | 建立存檔點,引號裡寫這次改了什麼 | |
git push | 把存檔點上傳到 GitHub(Zeabur 會自動重新部署) | 「幫我 push 到 GitHub」 |
git pull | 從 GitHub 下載最新版本(換電腦或多人合作時) | 「幫我把 GitHub 上的最新版本拉下來」 |
git log --oneline | 列出歷次存檔紀錄,一行一筆 | 「最近改了哪些東西?」 |
git diff | 查看還沒存檔的修改內容 | 「說明一下這次改了什麼」 |
git switch -c 分支名稱 | 建立並切換到新分支,在上面放心做實驗 | 「開一個新分支來做統計頁」 |
git switch main | 切回主分支 main | 「切回 main」 |
git merge 分支名稱 | 把分支的成果合併進目前所在的分支 | 「把這個分支合併回 main」 |
git branch -d 分支名稱 | 刪除已經合併完的分支 | 「刪掉已經合併的分支」 |
git restore 檔名 | 放棄某個檔案還沒存檔的修改(無法復原,小心使用) | 「把 app.py 還原成上次存檔的樣子」 |
日常流程範例:開分支做新功能 → 測試沒問題 → 合併回 main → 推上 GitHub。這樣改壞了也不會影響線上的網站。
git switch -c add-stats-page # 1. 開新分支做統計頁 git add . # 2. 改完、測試沒問題後,加入存檔清單 git commit -m "新增值日生統計頁" # 3. 建立存檔點 git switch main # 4. 切回 main git merge add-stats-page # 5. 把分支的成果合併進 main git push # 6. 推上 GitHub,Zeabur 自動重新部署 git branch -d add-stats-page # 7. 刪掉用完的分支
git push被拒絕(rejected):通常是 GitHub 上有你電腦沒有的新版本,先git pull再 push。- commit 前先
git status看一眼,確認沒有把.env之類的機密檔案加進去。 - 看到 merge conflict(合併衝突)別慌,直接跟 Claude 說「幫我解決合併衝突,並說明你保留了哪些內容」。
Zeabur:購買 Server、建立專案與服務、連結 GitHub 部署、建立網域
A. 註冊並購買伺服器
- 到 zeabur.com →「Login with GitHub」,用 GitHub 帳號登入(之後連結倉庫最順)。
- 進入 Dashboard,點左側「伺服器 / Servers」→「購買伺服器」。
- 選擇機房地區(建議離台灣近的 Tokyo / Hong Kong / Taiwan)與規格(入門專案選最小規格即可)→ 綁定信用卡付款。
- 等伺服器狀態變成「運行中」(約數分鐘)。
B. 建立專案與服務
- Dashboard →「建立專案 / Create Project」→ 部署位置選你剛買的伺服器 → 幫專案命名(如
my-first-app)。 - 進入專案 →「新增服務 / Add Service」→ 選 GitHub。
- 第一次會要求「Configure GitHub」:在 GitHub 頁面安裝 Zeabur App,Repository access 選「Only select repositories」並勾選
my-first-app(private 倉庫要這一步授權,Zeabur 才看得到)。 - 回到 Zeabur 選擇該倉庫,Zeabur 會自動偵測語言並開始建置,日誌顯示成功後狀態變綠色「Running」。
- 在同一個專案再按一次「新增服務」→ 從 Marketplace 搜尋「PostgreSQL」→ 部署,等它也變成「Running」。
- 點進網站服務 →「環境變數 / Variables」新增:
DATABASE_URL值填${POSTGRES_CONNECTION_STRING}(Zeabur 會自動換成資料庫的連線字串)、ZBPACK_PYTHON_VERSION值填3.11→ 存檔後重新部署。
C. 建立 Zeabur 網域
- 點進服務 →「網路 / Networking」→「網域」→「產生網域」。
- 輸入想要的前綴(例如
my-first-app),得到https://my-first-app.zeabur.app,打開網址就能看到你的網站 🎉 - 若程式需要 API 金鑰:服務 →「環境變數 / Variables」加入(不要寫在程式碼裡),存檔後重新部署。
- Python 網站必須監聽
0.0.0.0與環境變數PORT,而且要有requirements.txt。可以直接請 Claude:「請把程式改成可以部署到 Zeabur,監聽 PORT 環境變數」。 - 網站顯示資料庫連線錯誤:確認 PostgreSQL 服務是「Running」、
DATABASE_URL有設定,而且兩個服務在同一個專案裡。 - 建置失敗時,點服務的「部署日誌 / Logs」,把紅字整段複製貼給 Claude Code 請它修正。
git push(或請 Claude 幫你提交推送),Zeabur 就會自動重新部署。其他免費平台的選擇:比較與部署教學
還不想花錢買伺服器?這一步先比較 Zeabur 和其他平台的優缺點,再一步一步教你用兩個最推薦的免費組合,把同一個 Flask+PostgreSQL 網站部署上線。(資料整理於 2026 年 10 月,免費方案常常改,實際以各平台官網為準。)
A. 為什麼要看其他平台
- Zeabur 現在要「買伺服器」才能部署:Zeabur 原本給免費使用者的「共享叢集(Shared Cluster)」已在 2026 年 4 月 1 日停止建立新專案(官方說明);Free 方案主要是讓你管理自己的伺服器(Zeabur 方案)。所以照步驟 9 走,通常需要綁信用卡付月費。
- 付費伺服器的好處:不會休眠、速度穩、網站和資料庫放在同一個專案、可選離台灣近的機房,適合正式給全班天天使用。
- 什麼時候選免費平台:練習部署流程、做作品集/專題展示、只有少數人偶爾使用(小流量)。代價是會休眠(第一次打開要等)、額度有限、資料庫容量小。
B. 平台比較表
⭐ 是本課程最推薦的兩個免費組合。「休眠」指一段時間沒人用就暫停,下次打開要等它醒來(冷啟動)。
| 平台 | 免費額度 | 會不會休眠 | 需不需要信用卡 | 資料庫 | Python/Flask | 適合誰 |
|---|---|---|---|---|---|---|
| Zeabur(步驟 9) | 共享叢集已停止新專案;要買伺服器或付費方案 | 不會(自己的伺服器) | 要 | Marketplace 一鍵 PostgreSQL | ✅ 自動偵測 | 要正式長期使用、想要中文介面與亞洲機房 |
| ⭐ Render 網站+Neon 資料庫 | Render:每月 750 小時免費時數;Neon:每個專案 1 GB、每月 100 CU-小時運算(以官網為準) | 會:Render 15 分鐘沒流量就休眠,喚醒約 1 分鐘;Neon 5 分鐘沒用會暫停,下次稍慢 | Neon 不用;Render 通常不用,但可能要求驗證卡片(以官網為準) | Neon PostgreSQL(Render 自己的免費資料庫 30 天後到期,不建議) | ✅ 跟步驟 7 規格幾乎一樣(gunicorn、PORT) | 想用跟 Zeabur 最接近的方式免費練習 |
| ⭐ Vercel 網站+Neon 資料庫 | Hobby 方案免費(限個人、非商業用途),每月有函式執行額度 | 不像 Render 整台睡著,但久沒人用第一次會慢一點;Neon 一樣會暫停 | 不用 | 在 Vercel「Storage」一鍵建立 Neon,自動填好 DATABASE_URL | ✅ 自動偵測 Flask(以「函式」方式執行,不用 gunicorn);Python 3.12 起 | 不想等喚醒、不想碰信用卡的學生 |
| Railway | 試用:一次性 5 美元額度(30 天);之後 Free 方案每月只有 1 美元額度 | 依設定 | 試用不用 | 內建 PostgreSQL | ✅ | 短期試玩;長期免費不夠用 |
| Fly.io | 沒有免費方案,只有短暫試用(2 小時機器時間或 7 天) | 可設定 | 試用後要 | 需另外設定 | ✅(要寫設定檔) | 有預算、想學進階部署 |
| Koyeb | 1 個免費小主機(0.1 vCPU、512 MB),只能放法蘭克福或華盛頓 | 會:1 小時沒流量就休眠 | 官方 FAQ 說需要驗證卡片(以官網為準) | 有小額免費 PostgreSQL | ✅ | 可接受機房離台灣較遠 |
| PythonAnywhere | Beginner 免費:1 個網站、512 MB 空間、對外網路受限 | 不會,但免費網站要定期登入延長(以官網為準) | 不用 | 免費版沒有 PostgreSQL | ✅ 但要手動設定,沒有 push 自動部署 | 只想跑純 Flask、不用資料庫 |
| Hugging Face Spaces | 免費帳號只能建「靜態網頁」Space;Docker/Gradio 要付費方案 | 會 | — | 無 | ❌ 免費版不行 | AI 模型展示(付費) |
| Google Cloud Run | 每月有免費額度(例如 200 萬次請求) | 沒人用時縮到 0,有冷啟動 | 要(必須建立帳單帳戶) | 需另外搭配 | ✅(要包成容器) | 有信用卡、想學 Google Cloud |
| Netlify | 免費方案(以官網為準) | — | 不用 | 無 | ❌ 主要放靜態網站 | 純 HTML/前端作品 |
| Supabase(資料庫) | 每個專案 500 MB、最多 2 個專案 | 1 週沒活動就暫停,要手動恢復 | 不用 | PostgreSQL | —(只提供資料庫) | Neon 的替代選擇 |
資料來源:Render 免費方案、Neon 方案、Vercel Hobby、Railway、Fly.io、Koyeb、PythonAnywhere、Hugging Face Spaces、Cloud Run、Supabase。
主要平台優缺點:
- Zeabur 👍 中文介面、亞洲機房、網站+資料庫同一個專案、設定最少 👎 要買伺服器、要信用卡。
- ⭐ Render+Neon 👍 跟 Zeabur 用法最像(gunicorn、PORT、push 自動部署)、兩邊都有新加坡機房、Neon 不用信用卡且不會到期 👎 15 分鐘沒人用就休眠,第一個打開的人要等約 1 分鐘;要分兩個網站設定;介面是英文。
- ⭐ Vercel+Neon 👍 不用信用卡、資料庫一鍵接好、不會整台睡著 👎 網站以「函式」執行,不能存檔案、沒有背景程式;只支援 Python 3.12 以上(不是 3.11);限非商業用途;介面是英文。
- Railway 👍 體驗很好、內建資料庫 👎 試用額度用完後,免費額度不夠長期開著。
- PythonAnywhere 👍 不用信用卡、不休眠 👎 免費版沒有 PostgreSQL、不能從 GitHub 自動部署。
DATABASE_URL),而且都能選新加坡機房,離台灣近;Vercel+Neon 完全不用信用卡、資料庫連線一鍵自動設定,也比較不會讓第一個訪客等很久。其他平台不是要信用卡(Fly.io、Cloud Run、Koyeb)、沒有免費資料庫(PythonAnywhere)、就是免費額度太少(Railway)。資料庫兩個都選 Neon,因為 Render 自己的免費 PostgreSQL 30 天就會到期。C. ⭐ 推薦一:Render 網站+Neon 資料庫
第 1 部分:在 Neon 建立免費資料庫
- 到 neon.com 註冊,選擇用 GitHub 帳號登入(不需要信用卡)。
- 建立專案(Project):名稱填
my-first-app,地區(Region)選 AWS Asia Pacific (Singapore),離台灣最近。 - 建好後在專案首頁按「Connect」,複製連線字串(長得像
postgresql://帳號:密碼@….neon.tech/neondb?sslmode=require)。
第 2 部分:在 Render 建立網站服務
- 先請 Claude 確認專案可以部署到 Render(輸入框內容在下方),commit → merge → push 到 GitHub。
- 到 render.com 用 GitHub 帳號註冊/登入。
- Dashboard 右上角「New」→「Web Service」→ 選 GitHub。第一次會跳到 GitHub 安裝 Render 的授權,Repository access 選「Only select repositories」並勾選
my-first-app(private 倉庫要這一步,Render 才看得到)。 - 回到 Render 選擇
my-first-app,填寫設定:- Region:選 Singapore(和 Neon 同一區,連資料庫比較快)。
- Branch:
main;Language:Python 3。 - Build Command:
pip install -r requirements.txt - Start Command:
gunicorn app:app(冒號前面是主程式檔名,不含 .py;後面是程式裡app = Flask(__name__)的變數名稱。如果你的主程式叫main.py,就要改成gunicorn main:app。不確定就問 Claude:「Render 的 Start Command 要填什麼?」) - Instance Type:選 Free。
- 在同一頁的「Environment Variables」新增兩個變數:
DATABASE_URL值貼上 Neon 的連線字串;PYTHON_VERSION值填3.11.9(Render 規定要寫完整三段版本號,不寫的話會用比較新的預設版本)。 - 按最下方的部署按鈕(Deploy Web Service),畫面會跳到 Logs:看到建置成功、服務 Live 就完成了;有紅字就整段複製給 Claude。
- 頁面上方會顯示網址
https://my-first-app-xxxx.onrender.com,用手機打開試試看 🎉 - 之後只要 push 到
main,Render 就會自動重新部署(預設開啟)。
請把專案調整成可以部署到 Render(網站)+ Neon(PostgreSQL): 1. 確認 requirements.txt 有 Flask、Flask-SQLAlchemy、psycopg[binary]、gunicorn 2. 從環境變數 DATABASE_URL 讀取資料庫,把開頭的 postgresql:// 轉成 postgresql+psycopg://,本機沒設定時用 SQLite 3. 程式啟動時自動建立資料表 4. 告訴我 Render 的 Start Command 應該填什麼(gunicorn 檔名:變數名) 完成後用繁體中文說明改了什麼,再 commit 後合併回 main 並 push
D. ⭐ 推薦二:Vercel 網站+Neon 資料庫(從 Vercel 一鍵建立)
- 先請 Claude 確認專案可以部署到 Vercel(輸入框內容在下方),commit → merge → push 到 GitHub。
- 到 vercel.com/signup 選 Hobby(個人免費方案),用 Continue with GitHub 註冊,不需要信用卡。
- Dashboard →「Add New…」→「Project」→ 在「Import Git Repository」找
my-first-app。看不到 private 倉庫時,點「Adjust GitHub App Permissions」,在 GitHub 頁面勾選my-first-app。 - 按「Import」,Vercel 會自動偵測到 Flask(不用填 Build/Start Command,也不需要 gunicorn)→ 按「Deploy」。第一次可能因為還沒接資料庫而出錯,沒關係,繼續下一步。
- 進入專案 → 上方「Storage」→ 建立資料庫,選 Neon(Postgres)→ 地區選 Singapore、方案選 Free → 建立後連結(Connect)到這個專案。Vercel 會自動幫你加上
DATABASE_URL等環境變數,不用自己複製密碼。 - 把網站也搬到新加坡:專案「Settings」→「Functions」→「Function Regions」選 Singapore(預設在美國華盛頓,離 Neon 太遠會變慢;免費方案只能選一個區域)。
- 到「Deployments」對最新一次部署按「Redeploy」,讓新的環境變數和區域生效。有錯誤時點進部署看 Build Logs/Runtime Logs,把紅字複製給 Claude。
- 完成後會得到
https://my-first-app-xxxx.vercel.app,打開就能用 🎉 之後 push 到main就會自動重新部署。
請把專案調整成可以部署到 Vercel(網站)+ Neon(PostgreSQL): 1. 主程式放在 app.py(或 index.py、main.py),裡面的 Flask 物件名稱要叫 app 2. requirements.txt 要有 Flask、Flask-SQLAlchemy、psycopg[binary] 3. 新增 .python-version,內容寫 3.12(Vercel 不支援 3.11) 4. 從環境變數 DATABASE_URL 讀取資料庫,把開頭的 postgresql:// 轉成 postgresql+psycopg://,本機沒設定時用 SQLite 5. 程式啟動時自動建立資料表;不要在線上寫入任何檔案 6. 靜態檔案(圖片、CSS)依照 Vercel 的 Flask 文件放在 public/ 資料夾 完成後用繁體中文說明改了什麼,再 commit 後合併回 main 並 push
E. 免費平台注意事項
- 休眠喚醒慢:免費網站沒人用就會休眠,Neon 資料庫也會暫停。第一次打開慢是正常的,重新整理一次通常就好。
- 資料庫容量與到期:Neon 免費版容量很小,練習夠用;Render 自己的免費 PostgreSQL 30 天後到期,不要把重要資料放那裡。
- 環境變數:改完環境變數一定要重新部署才會生效;變數名稱大小寫要完全一樣(
DATABASE_URL)。 - 不要把金鑰寫進程式:資料庫連線字串、API 金鑰一律放平台的環境變數,
.env要寫進.gitignore。 - 免費方案會改:額度或規則變動時,以官網公告為準;作品要給很多人長期用,再考慮步驟 9 的付費伺服器。
## 6. 部署 - 程式碼放 GitHub(private) - 網站部署到 Render(Free,Singapore),資料庫用 Neon PostgreSQL(Free,Singapore) - Render 設定: - Build Command:pip install -r requirements.txt - Start Command:gunicorn app:app - 環境變數 DATABASE_URL = Neon 的連線字串(只填在 Render,不寫進程式) - 環境變數 PYTHON_VERSION = 3.11.9 - 對外網址 xxx.onrender.com
選 Vercel+Neon 的話,把 Render 那幾行改成:「網站部署到 Vercel(Hobby,Function Region 選 Singapore),用 Storage 建立 Neon,DATABASE_URL 由 Vercel 自動設定;Python 版本 3.12;對外網址 xxx.vercel.app」。
常見問題排解
依照課程步驟分類,點問題標題就能展開「原因+解法」。找不到你的狀況時,最快的方法是:把錯誤訊息整段複製,貼給 Claude Code,並說明你剛剛在做哪一步(還沒裝好 Claude 的話,就先請老師或同學幫忙看)。右上角記得切換成你的 Windows/macOS,部分解法會不一樣。
🧭 通用問題(終端機、PATH、權限、學校電腦)
輸入指令出現「無法辨識」「不是內部或外部命令」或「command not found」
九成是沒有重開終端機。電腦只有在終端機「打開的那一刻」才會讀取 PATH(找程式的路徑清單),所以安裝軟體或改 PATH 後,要把終端機整個關掉再開——包含 Antigravity 裡的終端機(最保險是把 Antigravity 整個關掉重開)。還是不行就重新開機。
重開後仍然不行,代表該軟體沒裝好或沒加進 PATH,請看下面對應步驟的問題(例如 Python 看「1」、Claude 看「4」)。
我不確定自己開的是 PowerShell、命令提示字元(CMD)還是終端機
看提示字元開頭:PowerShell 會是 PS C:\Users\你的名字>,有「PS」;命令提示字元則是 C:\Users\你的名字>,沒有「PS」。本課程的 Windows 指令都是給 PowerShell 用的,在 CMD 貼 irm ... | iex 會出現「'irm' 不是內部或外部命令」。請按 Win 鍵搜尋「PowerShell」重新開;Antigravity 的終端機可以按右上角「+」旁的小箭頭選 PowerShell。
Mac 的「終端機」預設是 zsh,提示字元長得像 student@MacBook ~ %。本課程 Mac 指令都是給它用的,不需要切換。
指令貼不進終端機/貼上後沒反應
- PowerShell 與 Antigravity 終端機可用 Ctrl+V 或按滑鼠右鍵貼上。
- Mac 終端機用 ⌘+V 貼上。
- 貼上後要按 Enter 才會執行;多行指令有時最後一行要再按一次 Enter。
- 不要連「PowerShell」「Terminal」這種標籤字一起複製——請用每個指令框右上角的「複製」按鈕。
- 從聊天軟體或 Word 複製的指令,引號可能被換成彎引號
“ ”,會導致錯誤;改從本頁複製。
終端機好像「卡住」了,打字沒反應
可能是程式正在執行(例如網站伺服器、安裝程式)。安裝中請耐心等到出現新的提示字元;如果是自己啟動的網站要停止,按 Ctrl+C。
Windows 小陷阱:在 PowerShell 視窗裡用滑鼠點一下可能會進入「選取模式」讓程式暫停,按 Esc 或 Enter 就會繼續。
學校電腦裝不了軟體(要求系統管理員密碼)
安裝 Python/Node.js/Git 需要系統管理員權限。請資訊組先幫忙裝好,或改用學生自己的筆電。Claude Code 原生安裝器裝在使用者資料夾,通常不需要管理員權限。
學校電腦重開機後,裝好的東西全部不見了
很多電腦教室裝了還原卡/還原軟體,重開機就會回到原始狀態。請資訊組在上課前把軟體裝進「保護範圍」,或每次上課只在同一次開機中完成;最推薦使用自己的筆電,專案也請隨時推上 GitHub(步驟 8)備份。
下載很慢、安裝指令一直連不上(學校網路)
學校網路常有防火牆或 Proxy,會擋下 claude.ai、github.com 等網站或憑證驗證,出現 SSL、TLS、certificate、timed out 之類字樣。先試著用手機熱點重做一次:熱點能成功就是學校網路的限制,請資訊組協助開放。
Windows 使用者名稱是中文或有空格,工具常出錯路徑裡有中文或空格,工具常出錯
若你的使用者資料夾是 C:\Users\王小明 或 C:\Users\Wang Xiao,部分工具處理中文或空格會出問題。專案資料夾可以改放在沒有中文、沒有空格的地方,例如 C:\code\my-first-app。
專案資料夾請放在像 ~/Documents/my-first-app 這種全英文、無空格的路徑;不要放在名稱含中文或空格的資料夾底下。
防毒軟體跳出警告或把安裝檔刪掉
請確認檔案是從本頁連結的官方網站下載(python.org、nodejs.org、git-scm.com、claude.ai、antigravity.google)。官方檔案被誤判時,可以在防毒軟體選擇「允許」;不確定時先問老師,不要為了安裝而整個關掉防毒。
不知道怎麼看懂錯誤訊息
錯誤訊息通常在最後幾行,紅字或含有 Error、failed、not found、denied 的那幾行最重要。把整段(不要只截一行)複製下來貼給 Claude Code,並說「我在做第 X 步,跑了什麼指令,出現這個錯誤,請用簡單的話解釋並告訴我怎麼修」。
0️⃣ 課前準備:帳號與電腦
註冊時一直收不到驗證信
先看垃圾郵件/促銷內容資料夾;等 1–2 分鐘再按「重新寄送」。學校信箱常會擋外部來信,建議改用個人 Gmail 註冊。也請確認信箱沒有打錯字。
Claude 用免費方案可以上這門課嗎?
不行。Claude Code 需要 Claude Pro 或 Max 付費方案(或 Anthropic Console 的 API 額度)。上課前請先在 claude.ai 完成訂閱,登入時才不會卡住。
怎麼確認電腦是 64 位元/Mac 是 M 系列還是 Intel?
按 Win 鍵搜尋「關於您的電腦」(或「設定 → 系統 → 關於」),看「系統類型」是否寫「64 位元作業系統」。32 位元的 Windows 無法使用 Claude Code。同一頁也看得到 Windows 版本。
點左上角 →「關於這台 Mac」:「晶片」寫 Apple M1/M2/M3… 就是 Apple Silicon;寫「處理器 Intel…」就是 Intel。同一頁也看得到 macOS 版本(需要 13 Ventura 以上)。
學校的 Google 帳號不能用/被限制
學校配發的 Google 帳號可能被管理員限制使用部分服務或第三方應用程式。遇到無法登入或權限不足,改用個人 Gmail 帳號最省事。
硬碟空間不夠
至少要留 5 GB。先清空資源回收筒、「下載」資料夾裡的舊安裝檔垃圾桶、「下載項目」裡的舊 .dmg/.pkg,再重新安裝。
1️⃣ 安裝 Python 3.11.9
輸入 python 卻跳出 Microsoft Store,或顯示「Python was not found; run without arguments to install from the Microsoft Store…」
這是 Windows 內建的「假 python」捷徑在搶先執行,通常代表安裝時忘了勾「Add python.exe to PATH」。兩種修法(做一種即可):
- 重新執行
python-3.11.9-amd64.exe→ 選 Modify → Next → 勾「Add Python to environment variables」→ Install。 - 到「設定 → 應用程式 → 進階應用程式設定 → 應用程式執行別名」,把
python.exe和python3.exe兩個「應用程式安裝程式」別名關掉。
做完記得重開終端機再輸入 python --version。
「'python' 不是內部或外部命令」或「無法辨識 'python' 詞彙」
同樣是 PATH 沒設好。先重開終端機;仍不行就照上一題用 Modify 勾選 PATH。也可以先用 Python 附的啟動器確認有沒有裝成功:
py -3.11 --version
有顯示 Python 3.11.9 代表 Python 有裝好,只是 PATH 沒加;照上一題修好 PATH 即可。
輸入 python 出現「zsh: command not found: python」
正常!Mac 上請一律用 python3(本課程驗證指令就是 python3 --version),套件安裝用 pip3 或 python3 -m pip。Claude 幫你寫的執行說明如果用 python,跟它說「我是 Mac,請改用 python3」。
版本顯示不是 3.11.9(例如 3.9、3.12、3.13)
電腦裡可能本來就有別的版本,PATH 先找到它。最簡單是到「設定 → 應用程式」解除安裝不需要的舊 Python,再重開終端機;或用 py -3.11 指定版本。
Mac 可能有 Homebrew 或 Xcode 附的 Python。確認你裝的版本:輸入 python3.11 --version。若想讓 python3 指向 3.11,可以雙擊「應用程式 → Python 3.11」資料夾裡的 Update Shell Profile.command,再重開終端機。
版本略有不同其實大多能跑,但部署時 Zeabur 會用 ZBPACK_PYTHON_VERSION 指定的版本,本機與線上一致最不容易出怪問題。
Python 連網出現「SSL: CERTIFICATE_VERIFY_FAILED」
安裝完沒有執行 Install Certificates.command。打開 Finder →「應用程式」→「Python 3.11」資料夾 → 雙擊 Install Certificates.command,等它跑完,再重試一次。
「pip 不是內部或外部命令」/pip 找不到
改用「讓 Python 自己呼叫 pip」的寫法,最不會出錯:
python -m pip install -r requirements.txt
python3 -m pip install -r requirements.txt
安裝時忘了按「Disable path length limit」
不影響今天的課程。之後安裝套件若出現路徑太長的錯誤,再重新執行安裝檔 → Modify 完成一次,或請 Claude 協助處理。
安裝時出現「Setup failed」或要求系統管理員權限
學校電腦常鎖住安裝權限,請資訊組協助。自己的電腦可以對安裝檔按右鍵 →「以系統管理員身分執行」。若之前裝過一半,先到「設定 → 應用程式」把 Python 3.11 解除安裝再重裝。
啟用虛擬環境(.venv)時出錯
虛擬環境是 Claude 可能會幫你建立的「專案專用套件箱」,不是必要的。
在 PowerShell 執行 .venv\Scripts\Activate.ps1 出現「因為這個系統上已停用指令碼執行」:照步驟 3 的方法執行一次 Set-ExecutionPolicy -Scope CurrentUser RemoteSigned 就能解決。
Mac 啟用指令是 source .venv/bin/activate。
啟用成功後,提示字元前面會出現 (.venv)。記得 .venv 要寫進 .gitignore,不要推上 GitHub。
2️⃣ Antigravity IDE 與繁中語言包
裝完語言包,沒有跳出重新啟動的提示/介面還是英文
按 Ctrl+Shift+P⌘+⇧+P 打開命令選擇區,輸入 Configure Display Language → 選 中文(繁體) zh-tw → 重新啟動。
延伸模組搜尋不到「Chinese (Traditional) Language Pack」
- Antigravity 的延伸模組市集和 VS Code 不完全相同,請用英文搜尋
Chinese Traditional,認明發行者 MS-CEINTL。 - 搜尋結果一片空白:多半是網路被擋,換網路(例如手機熱點)再試。
- 不小心裝成「簡體」(Chinese (Simplified)):在延伸模組清單把它解除安裝,再裝繁體版。
Google 帳號登入失敗或卡在瀏覽器
- 確認瀏覽器跳出的登入頁有完成,並按允許;完成後切回 Antigravity。
- 學校或組織帳號可能被限制,改用個人 Gmail。
- 瀏覽器沒自動跳出:檢查是否被彈出視窗攔截,或換預設瀏覽器再試。
Mac 第一次打開出現「無法打開」或安全性警告
確認是從 antigravity.google/download 下載、並已拖進「應用程式」資料夾(不要直接在 .dmg 視窗裡執行)。跳警告時按「打開」;若沒有「打開」按鈕,到「系統設定 → 隱私權與安全性」往下捲,對 Antigravity 按「強制打開/仍要打開」。
下載錯版本(Apple Silicon/Intel)
先照「課前準備」確認晶片。Intel Mac 裝到 Apple Silicon 版會無法開啟;M 系列裝到 Intel 版雖然可能跑得動但會比較慢。刪掉「應用程式」裡的 Antigravity,下載正確版本重新拖進去。
找不到終端機面板,或終端機被我關掉了
選單「終端機」→「新增終端」,或按 Ctrl+`⌃+`(Esc 下面那顆鍵)。選單列是英文時,對應的是「Terminal → New Terminal」。
Antigravity 終端機開出來是「命令提示字元」不是 PowerShell
按 Ctrl+Shift+P,輸入 Terminal: Select Default Profile,選 PowerShell,再開一個新終端機即可。
Antigravity 右邊也有 AI 助理,跟 Claude Code 有什麼不同?要用哪個?
Antigravity 內建的是 Google 的 AI 代理;本課程用的是在終端機裡執行的 Claude Code。兩個都是 AI 助理,但為了跟著課程走,請在下方終端機輸入 claude 來對話,避免兩個 AI 同時改同一份檔案。
3️⃣ 安裝 Node.js
npm -v 出現紅字「因為這個系統上已停用指令碼執行」/「running scripts is disabled on this system」
Windows PowerShell 預設不允許執行 npm.ps1 這類指令碼。執行下面這行(只影響你自己的帳號),出現詢問時輸入 Y 按 Enter,再重開 PowerShell:
Set-ExecutionPolicy -Scope CurrentUser RemoteSigned
設定執行原則時說「…the setting is overridden by a policy defined at a more specific scope」
學校電腦被群組原則鎖住了,自己改不了。暫時可以改用 npm.cmd -v(跳過 .ps1 指令碼),或請資訊組協助調整。
「node 不是內部或外部命令」/「command not found: node」
先關掉並重開終端機(Antigravity 也要重開)。還是不行,重新執行 Node.js 安裝檔(確認安裝過程中 “Add to PATH” 沒有被取消),裝完再重開終端機。
node -v 的版本跟示意圖不一樣
沒關係,版本號會隨時間更新。只要是官網標示 LTS 的版本、能顯示版本號就算成功。若顯示很舊的版本(例如 v16、v18),代表電腦裡有舊版,請到 nodejs.org 重新安裝 LTS 版覆蓋。
不小心勾了「Tools for Native Modules」,跳出一個很久的黑色視窗
那個選項會額外下載編譯工具(本課程用不到),需要很久而且會要求管理員權限。可以讓它跑完,也可以直接關掉那個視窗;Node.js 本身已經裝好,不受影響。
npm 安裝全域套件出現「EACCES: permission denied」
本課程的 Claude Code 是用原生安裝器裝的,不需要 npm install -g。如果其他教學要你裝全域套件遇到這個錯誤,不要隨便加 sudo,先把錯誤訊息貼給 Claude 請它建議安全的做法。
3️⃣➕ 安裝 Git 與設定身分
「'git' 不是內部或外部命令」/「command not found: git」
先重開終端機(Antigravity 也要重開)。還是不行就重新執行 Git for Windows 安裝檔,選項全部用預設值(預設就會把 Git 加進 PATH)。
還沒裝好命令列開發者工具,執行 xcode-select --install 並等安裝完成(約 5–10 分鐘),再重開終端機。
執行 git 出現「xcrun: error: invalid active developer path」
常發生在 macOS 大改版更新之後,命令列開發者工具需要重新安裝。再執行一次 xcode-select --install,按「安裝」,完成後重開終端機。
xcode-select 說「目前無法從軟體更新伺服器取得此軟體」
可能是網路被擋或 Apple 伺服器暫時忙碌。換網路後再試;仍不行可改從 git-scm.com/downloads/mac 依照說明安裝 Git,或請老師協助。
commit 時出現「Author identity unknown」「Please tell me who you are」
還沒設定名字與 Email。執行步驟 3+ 的這兩行(換成你自己的),之後再 commit 一次:
git config --global user.name "你的英文名字" git config --global user.email "你的GitHub信箱@example.com"
名字或 Email 打錯了,怎麼改/怎麼確認?
直接再執行一次同樣的 git config --global ... 指令就會覆蓋。想確認目前設定,輸入:
git config --global --list
名字中間有空格時一定要加英文雙引號,例如 "Wang Xiao Ming"。
Git 突然打開一個看不懂的編輯畫面(滿版、一堆 ~ 符號),出不去
那是 Git 請你寫合併說明時開啟的 Vim 編輯器(例如執行 git pull、git merge 時)。直接用預設說明離開:按 Esc,再輸入 :wq 按 Enter(存檔並離開)。以後交給 Claude 做 Git 操作就比較不會遇到。
出現「LF will be replaced by CRLF」警告
只是提醒 Windows 與 Mac 的換行符號不同,不是錯誤,可以忽略。
4️⃣ 安裝 Claude Code
裝完輸入 claude 出現「'claude' 不是內部或外部命令」或「command not found: claude」
原生安裝器把 claude 放在 %USERPROFILE%\.local\bin~/.local/bin,這個資料夾要在 PATH 裡。
- 確認有執行步驟 4 的「② 設定 PATH」那段指令(只要執行一次安裝結束時若有提示才需要)。
- 關掉並重開終端機(Antigravity 要整個重開)。
- 輸入
claude --version確認。
想檢查 PATH 裡有沒有這個資料夾,可以執行下面指令;沒有任何輸出就代表還沒加進去:
$env:PATH -split ';' | Select-String '\.local\\bin'
出現「'irm' 不是內部或外部命令」或「The token '&&' is not a valid statement separator」
指令貼錯地方了:irm ... | iex 只能在 PowerShell 執行,你可能開成「命令提示字元(CMD)」。請按 Win 鍵搜尋「PowerShell」打開,再貼一次:
irm https://claude.ai/install.ps1 | iex
出現「A parameter cannot be found that matches parameter name 'fsSL'」或「'bash' is not recognized」
你貼到 Mac 版指令(curl -fsSL ... | bash)了。請確認右上角切換為 Windows,改用 irm https://claude.ai/install.ps1 | iex。
貼上安裝指令後,畫面印出一大堆程式碼,但沒有安裝
只貼到前半段 irm https://claude.ai/install.ps1,漏了後面的 | iex(負責「執行」)。請用複製按鈕把整行貼上。
出現「Claude Code does not support 32-bit Windows」
你可能開到「Windows PowerShell (x86)」。請開沒有 (x86) 的「Windows PowerShell」重新執行。若電腦本身是 32 位元 Windows,就無法使用 Claude Code,需要換電腦。
出現「Claude Code on Windows requires either Git for Windows (for bash) or PowerShell」
Claude Code 找不到可以用的 shell。請照步驟 3+ 安裝 Git for Windows(選項用預設),裝完重開終端機。若已經裝了 Git 但裝在非預設位置,把錯誤訊息貼給老師,或參考官方說明設定 CLAUDE_CODE_GIT_BASH_PATH。
安裝時出現「SSL/TLS」「TLS connect error」「Failed to fetch version」等網路錯誤
多半是網路(學校防火牆、Proxy)擋住下載。先換手機熱點再試一次。
Windows 也可以先開啟 TLS 1.2 再安裝(官方文件提供的寫法):
[Net.ServicePointManager]::SecurityProtocol = [Net.SecurityProtocolType]::Tls12 irm https://claude.ai/install.ps1 | iex
Mac 請確認 macOS 有更新到最新(系統憑證會跟著更新)。
安裝出現「curl: (23)」或「curl: (56) Failure writing output to destination」
下載過程中斷或寫入失敗,通常是網路不穩。換網路後重新執行安裝指令即可;仍失敗請參考官方疑難排解。
claude doctor 顯示黃字/紅字警告,或說有多個安裝
claude doctor 是健康檢查,會列出問題和建議。常見的是以前用 npm 裝過舊版,造成兩個 claude 打架。如果你確定以前用 npm 裝過,可以移除 npm 版,只留原生版:
npm uninstall -g @anthropic-ai/claude-code
看不懂警告就把整段輸出截圖或複製,請老師看。
輸入 claude 卻打開了 Claude 桌面版 App
舊版 Claude Desktop 會搶走 claude 這個指令。官方建議把 Claude Desktop 更新到最新版即可解決。
更新 Claude Code 之後,claude 突然變成「無法辨識」
更新時替換 claude.exe 可能失敗。最簡單的修法是重新執行一次安裝指令 irm https://claude.ai/install.ps1 | iex,再重開終端機。
5️⃣ 開專案資料夾、登入 Claude 與使用中
在一般終端機可以執行 claude,在 Antigravity 終端機卻不行
Antigravity 是在你設定 PATH 之前打開的,還記得舊的 PATH。把 Antigravity 整個關掉(不是只關終端機面板)再重開。
登入時瀏覽器沒有自動打開
在登入畫面按鍵盤 c,會把登入網址複製到剪貼簿,再自己貼到瀏覽器網址列打開,按「授權」後回到終端機。網址太長換行、點不到時也用這招。
Claude Code 登入後說沒有權限/需要訂閱,或出現「403」
Claude Code 需要 Claude Pro 或 Max 方案(免費方案不能用),或改選「Anthropic Console account」用 API 額度付費。請到 claude.ai/settings 確認訂閱有效、而且瀏覽器登入的是同一個帳號。在 Claude Code 裡輸入 /login 可以重新登入。
出現「OAuth error: Invalid code. Please make sure the full code was copied」
登入代碼過期或複製不完整。按 Enter 重試,瀏覽器開啟後盡快完成授權;瀏覽器沒開就按 c 複製完整網址。
登入一直失敗、選錯登入方式、或想換帳號
官方建議「乾淨重登」:
- 在 Claude Code 裡輸入
/logout登出。 - 輸入
/exit離開。 - 重新輸入
claude,選「Claude account with subscription」重新登入。
也要確認瀏覽器目前登入的 claude.ai 帳號就是有付費的那個。
出現「This organization has been disabled」,但我明明有訂閱
官方說明:這通常是電腦裡設定了舊的 ANTHROPIC_API_KEY 環境變數,蓋過了你的訂閱登入。請把這個環境變數移除後重開終端機(不會的話把訊息貼給老師),再用 /login 登入。
不小心在 Trust 問題選了 No,或 Claude 在錯的資料夾開啟
選 No 會直接離開,重新輸入 claude 再選 Yes, proceed 即可。Claude 只能看到「啟動時所在資料夾」裡的檔案,請先確認終端機路徑是你的專案(例如提示字元出現 my-first-app)。不在的話先 /exit,再用 Antigravity「檔案 → 開啟資料夾」打開正確資料夾,從它的終端機啟動 claude。
按 Shift+Enter 想換行,結果直接送出了
在 Antigravity 終端機裡 Shift+Enter 可能無效。改用 \ 再按 Enter,或按 Ctrl+J,這兩個在所有終端機都能換行。
截圖貼不進 Claude Code
貼圖片的快捷鍵是 Alt+V(不是 Ctrl+V)Ctrl+V(不是 ⌘+V),成功會出現 [Image #1]。也可以用步驟 6 的 /img 選擇圖片檔。
Claude 一直跳出詢問要不要允許,好煩/或它沒問就改了檔案
這是「權限模式」,按 Shift+Tab 可以切換,左下角會顯示目前模式:Manual(每步都問)→ acceptEdits(自動接受改檔)→ plan(只規劃)→ auto(新版預設,Claude 自行判斷安全的操作)。初學者想看清楚每一步就切到 Manual;想少按幾次就用 auto 或 acceptEdits。
Claude 做錯方向、改壞了檔案
- 還在執行中:按 Esc 打斷,再告訴它正確方向。
- 已經改完:輸入
/rewind(或輸入框空的時候按兩次 Esc),選擇要回到的時間點。 - 平常養成步驟 8 的「每完成一段功能就 commit」,改壞了也能用 Git 退回。
對話很久之後,Claude 好像忘記前面說過的事、變慢
對話空間快滿了。輸入 /context 看用量,接著用 /compact 保留重要的討論 整理成摘要;換做另一件事就用 /clear 開新對話。重要的決定寫進 系統規劃.md 或用 /init 建立的 CLAUDE.md,新對話也不會忘。
顯示用量已達上限,要等一段時間才能繼續
Pro/Max 方案有一段時間內的使用量限制。輸入 /usage 可以看用量與重置時間。省用量的方法:一次把需求講清楚、換主題就 /clear、不要反覆要它重做整個專案。
不小心關掉終端機,剛剛的對話不見了
對話會保存。回到同一個專案資料夾,輸入 claude -c 繼續上一次,或啟動後用 /resume 挑選之前的對話。
Claude 卡住不動、一直轉圈
先按 Esc 打斷;沒反應就按 Ctrl+C。還是不行就關掉終端機重開,再用 claude -c 接回對話。也可能是網路斷線,檢查一下 Wi-Fi。
出現「API Error: 500」「529 Overloaded」之類的錯誤
這是 Anthropic 伺服器暫時忙碌或出狀況,不是你弄壞的。等幾分鐘再重送一次訊息即可。
輸入中文時選字怪怪的、字重複或跑位
部分終端機對中文輸入法支援不完美。可以先在 Antigravity 的編輯器或記事本打好整段文字,再複製貼到 Claude Code 的輸入框。
想更新 Claude Code 到最新版/檢查安裝狀態
原生安裝版會自動在背景更新。想手動更新,在終端機輸入 claude update;想全面檢查,在 Claude Code 裡輸入 /doctor(claude 打不開時改在終端機輸入 claude doctor)。
6️⃣ 外掛工具:oh-my-claudecode 與 claude-img
/plugin 指令不存在或輸入沒反應
- 確認是在 Claude Code 的輸入框(有
>的地方)輸入,而不是一般終端機。 - Claude Code 版本太舊:先
/exit,在終端機執行claude update再重新進入。
/plugin marketplace add 失敗
新增 marketplace 需要從 GitHub 下載,請確認:① 網路能連上 github.com;② 步驟 3+ 的 Git 有裝好(終端機輸入 git --version 有版本號);③ 網址完整貼上 https://github.com/Yeachan-Heo/oh-my-claudecode,前後沒有多餘空格。
/plugin install 說找不到 oh-my-claudecode
要先成功執行第一行 /plugin marketplace add ...,再執行 /plugin install oh-my-claudecode,順序不能顛倒。也可以輸入 /plugin 用選單瀏覽已加入的 marketplace 與外掛。
輸入 /oh-my-claudecode:omc-setup 說找不到指令
裝完外掛後一定要重新啟動 Claude Code 才會載入:先 /exit,再輸入 claude。也可以只打 /omc 看看自動補完清單有沒有出現。
OMC 怪怪的、更新後指令失效
OMC 官方 README 的建議:在 Claude Code 裡執行診斷,它會清掉舊的外掛快取;問題還在就重跑一次設定:
/oh-my-claudecode:omc-doctor
/oh-my-claudecode:omc-setup
用了 OMC 之後,用量消耗得特別快
OMC 會同時派出多個代理一起工作,所以比一般對話更耗用量。小修改直接跟 Claude 說就好,大功能再用 /autopilot 之類的多代理模式;隨時用 /usage 查看。
/img 沒反應或說找不到指令
- claude-img 要在一般終端機安裝(不是在 Claude Code 輸入框),請確認右上角選對作業系統的指令。
- 裝完要
/exit再重新輸入claude,/img才會出現。 - 安裝指令出現網路錯誤:換網路再試。
/img 的檔案選擇視窗沒跳出來
視窗可能開在 Antigravity 後面,看看工作列 Dock 或按 ⌘+Tab 有沒有新視窗。支援的圖片格式是 PNG、JPG、GIF、WebP、BMP、TIFF。真的不行也能直接用 Alt+VCtrl+V 貼上截圖。
想移除 claude-img
依 claude-img 官方 README,在一般終端機執行:
Remove-Item "$env:LOCALAPPDATA\Programs\claude-img" -Recurse Remove-Item "$env:USERPROFILE\.claude\skills\img" -Recurse
rm ~/.local/bin/claude-img rm -r ~/.claude/skills/img
7️⃣ 系統規劃.md 與請 Claude 實作、本機測試
Claude 說找不到「系統規劃.md」,或沒照著規劃做
- 確認檔案建在專案資料夾最上層,而且有存檔(Antigravity 分頁標題旁的圓點消失才算存好)。
- 用
@直接指定檔案最準:請閱讀 @系統規劃.md,照裡面的需求做。 - 檔名打錯(例如變成
系統規劃.md.txt)也會找不到,在檔案總管裡確認一下。
Claude 問了一堆問題,我不知道怎麼回答
這是好事,代表它在確認需求。看不懂就直接說「請用高中生聽得懂的話解釋,並給我建議選項」,或「這部分你幫我決定,說明原因就好」。
5 種風格預覽找不到,或打開是一堆程式碼
預覽放在 style-previews 資料夾。在 Antigravity 裡直接點 HTML 檔只會看到原始碼;要對檔案按右鍵 →「在檔案總管中顯示在 Finder 中顯示」,再雙擊用瀏覽器打開。資料夾不存在就跟 Claude 說「請先依照介面風格做出 5 種預覽」。
執行時出現「ModuleNotFoundError: No module named 'flask'」(或其他套件名稱)
套件還沒安裝。在專案資料夾執行:
python -m pip install -r requirements.txt
python3 -m pip install -r requirements.txt
有用虛擬環境(.venv)的話,記得先啟用再安裝。也可以直接跟 Claude 說「幫我安裝需要的套件並啟動網站」。
瀏覽器打開 localhost 顯示「無法連上這個網站」「拒絕連線」
- 網站程式要一直在終端機執行著才連得上;關掉那個終端機或按了 Ctrl+C,網站就停了。
- 確認網址與埠號跟終端機顯示的一致(例如
http://127.0.0.1:5000)。 - 終端機若有紅字錯誤,代表程式根本沒啟動成功,把錯誤貼給 Claude。
出現「Address already in use」或「Port 5000 is in use」
那個埠號被別的程式占用了——可能是你之前開的網站還在另一個終端機跑著(去那邊按 Ctrl+C 停掉)。Mac 的「AirPlay 接收器」也會占用 5000 埠,打開 localhost:5000 甚至會看到 403 錯誤。最簡單的做法是請 Claude「本機改用 5001 埠啟動」。
啟動網站時跳出「Windows 安全性警訊/防火牆」視窗
Python 想要開啟網路連線。自己的電腦可以勾「私人網路」後按「允許存取」;學校電腦沒權限的話按取消也沒關係,本機用 localhost 測試仍然可以。
改了程式,重新整理網頁卻沒變化
① 網站程式可能要重新啟動:在跑網站的終端機按 Ctrl+C 再重新執行;② 瀏覽器快取:按 Ctrl+F5⌘+⇧+R 強制重新整理;③ 確認 Claude 改的是你正在看的那個檔案。
出現「UnicodeDecodeError: 'cp950' codec can't decode…」
繁中 Windows 預設用 cp950(Big5)讀檔,而檔案是 UTF-8。跟 Claude 說「Windows 出現 cp950 UnicodeDecodeError,請在讀寫檔案時都指定 encoding="utf-8"」即可。
網頁上的中文變成亂碼
通常是 HTML 沒有宣告 UTF-8 或檔案存成別的編碼。請 Claude「確認所有 HTML 範本都有 <meta charset="UTF-8">,檔案都存成 UTF-8」。
本機沒有 PostgreSQL,可以測試嗎?
可以。進階版範本已要求「本機沒有設定 DATABASE_URL 時,自動改用 SQLite 檔案」,所以本機測試不用裝資料庫。記得請 Claude 把 SQLite 的資料庫檔加進 .gitignore,不要推上 GitHub。
Claude 說做好了,但我測試有 bug
把「你做了什麼、預期看到什麼、實際看到什麼」講清楚,附上錯誤訊息或截圖(Alt+VCtrl+V 貼圖)。例如:「在首頁選了排骨飯按送出,預期跳到成功頁,實際畫面沒變,終端機出現下面的錯誤:…」。
8️⃣ GitHub 私有倉庫與推送
git push 被拒絕(rejected / non-fast-forward / fetch first)
GitHub 上有你電腦沒有的內容,最常見是建立 repo 時勾了 README,或你在別台電腦推過。請 Claude Code:「git push 被拒絕,請幫我先拉下遠端內容合併再推送」。自己處理的話先 git pull 再 git push;第一次推送若出現「refusing to merge unrelated histories」,用:
git pull origin main --allow-unrelated-histories git push -u origin main
推送時要求輸入帳號密碼,或出現「Support for password authentication was removed」
GitHub 不接受用登入密碼推送。請照步驟 8-B 執行 gh auth login,依序選 GitHub.com → HTTPS → Yes → Login with a web browser。其中「Yes」就是讓 gh 幫 Git 處理登入,選了之後就不會再問密碼。檢查登入狀態:
gh auth status
出現「Permission denied (publickey)」
遠端網址被設成 SSH 格式(git@github.com:...),但你沒有設定 SSH 金鑰。本課程用 HTTPS,把網址改回來即可(換成你的帳號):
git remote set-url origin https://github.com/你的帳號/my-first-app.git
出現「remote: Repository not found」
- 網址打錯:帳號名稱或 repo 名稱拼錯、大小寫不同。到 GitHub 的 repo 頁面複製正確網址,再用上一題的
git remote set-url更新。 - 登入的帳號不對:private repo 只有擁有者看得到。用
gh auth status確認登入的是建立 repo 的那個帳號。
出現「error: remote origin already exists」
之前已經加過遠端位址了。不用再 add,改用 git remote set-url origin 正確網址 更新即可,用 git remote -v 可以查看目前設定。
出現「error: src refspec main does not match any」
還沒有任何 commit(或分支不叫 main)。先確認 git add . 和 git commit -m "first commit" 有成功(commit 失敗常是沒設定名字與 Email,見 3+),再執行 git branch -M main 和 git push -u origin main。
出現「fatal: not a git repository」
終端機不在專案資料夾,或專案還沒 git init。確認提示字元路徑是 my-first-app;是的話執行 git init。
「gh 不是內部或外部命令」/「command not found: gh」
安裝完要重開終端機(Antigravity 也要重開)。若 winget 本身也無法辨識(學校電腦常見),改到 cli.github.com 下載 Windows 安裝檔(.msi)安裝。Mac 請確認 cli.github.com 下載的 .pkg 有安裝完成。
gh auth login 的 8 碼代碼要貼在哪裡?瀏覽器登到別人的帳號?
按 Enter 後會打開 github.com/login/device,把終端機上的 8 碼代碼貼進去 → 授權。授權前先看右上角頭像,確認是你自己的 GitHub 帳號(電腦教室的瀏覽器可能還登著上一位同學)。登錯了就執行 gh auth logout 再重新登入。
兩步驟驗證(2FA)手機換了/App 刪掉,登不進 GitHub
用啟用 2FA 時下載的復原碼(recovery codes)登入,之後重新設定 2FA。所以啟用時一定要把復原碼存好(印出來或存在安全的地方)。沒有復原碼就要照 GitHub 的帳號復原流程申請,會比較久。
repo 不小心建成 Public 了
到 repo 頁面 → Settings → 最下方 Danger Zone →「Change repository visibility」改成 Private。如果在公開期間推上了 API 金鑰,請照下一題處理。
不小心把 .env、API 金鑰或密碼推上 GitHub 了
- 第一件事:立刻到該服務的網站把金鑰作廢(revoke),產生一把新的。金鑰一旦被推上去就要當作已經外洩,光從 GitHub 刪掉沒有用(舊紀錄裡還找得到)。
- 新的金鑰只放在本機
.env和 Zeabur 的環境變數。 - 請 Claude:「把 .env 加進 .gitignore,並從 Git 追蹤中移除(保留本機檔案),然後 commit 和 push」。
- 想連歷史紀錄都清乾淨,可參考 GitHub 官方文件 Removing sensitive data from a repository,或請老師協助(操作較進階)。
出現 merge conflict(合併衝突),檔案裡多了 <<<<<<< ======= >>>>>>>
同一段程式在兩邊被改成不同內容,Git 不知道要留哪個。別慌,直接跟 Claude 說「幫我解決合併衝突,並說明你保留了哪些內容」,確認沒問題再 commit。
git status 顯示「Your branch is ahead of 'origin/main' by N commits」
你有 N 個存檔點還沒上傳,執行 git push 就好。反過來顯示「behind」代表 GitHub 上比較新,先 git pull。
想切回 main 卻出現「Your local changes … would be overwritten」
目前分支有還沒 commit 的修改。先把它們 commit(git add .、git commit -m "說明"),再 git switch main。不確定要不要保留,就請 Claude「先幫我看看有哪些未存檔的修改,再建議怎麼處理」。
node_modules、__pycache__ 這些資料夾也被推上去了
代表 .gitignore 沒寫好或是後來才加。請 Claude「把 .gitignore 補齊,並把已經被追蹤的 node_modules、__pycache__、.venv 從 Git 移除(保留本機檔案),然後 commit 和 push」。
9️⃣ Zeabur 部署上線
新增服務時,在 Zeabur 看不到我的 GitHub repo
private repo 要授權 Zeabur App 才看得到。點「Configure GitHub」,在 GitHub 頁面的 Repository access 勾選 my-first-app(或改成 All repositories)→ Save,回到 Zeabur 重新整理。也要確認 Zeabur 登入的 GitHub 帳號就是 repo 的擁有者。
建置失敗(Build failed),日誌一堆紅字
點服務的「部署日誌 / Logs」,把紅字整段複製給 Claude:「Zeabur 建置失敗,日誌如下,請幫我修正並推送」。常見原因:
- 沒有
requirements.txt,或少寫了某個套件(本機裝過所以能跑,線上沒有)。 - Python 版本不對:Zeabur 預設用 Python 3.10,請確認環境變數有
ZBPACK_PYTHON_VERSION=3.11。 - 程式根本沒推上 GitHub:到 GitHub repo 頁面確認檔案都在。
Zeabur 偵測錯語言,或找不到主程式
Zeabur 會用 main.py、app.py、server.py 等常見檔名判斷 Python 入口。主程式檔名不同時,可以新增環境變數 ZBPACK_PYTHON_ENTRY(值填你的主程式檔名),或請 Claude「依照 Zeabur 文件調整,讓它正確偵測 Python 專案」。參考:Zeabur Python 部署文件。
建置成功、狀態也是 Running,但打開網址顯示 502 或錯誤頁
程式有跑起來,但 Zeabur 連不到它。最常見是程式只聽 127.0.0.1 或寫死 5000 埠。請 Claude:「請把程式改成可以部署到 Zeabur:用 gunicorn 啟動,監聽 0.0.0.0 與環境變數 PORT」,推送後等重新部署。也請看「Logs」裡的執行期錯誤(不只建置日誌)。
日誌出現「ModuleNotFoundError: No module named 'psycopg2'」或資料庫連線錯誤
- 本課程用 psycopg 3(
psycopg[binary]),連線字串開頭要從postgresql://轉成postgresql+psycopg://,否則 SQLAlchemy 會去找舊的 psycopg2。請 Claude 依照「系統規劃.md」的連線設定修正。 - 確認 PostgreSQL 服務是「Running」,而且和網站在同一個專案裡。
- 確認網站服務的環境變數有
DATABASE_URL=${POSTGRES_CONNECTION_STRING}(大小寫、大括號都要一樣)。
出現「relation … does not exist」(資料表不存在)
資料庫是空的,資料表還沒建立。請 Claude「確認程式啟動時會自動建立資料表(進階版規劃第 5 點),修好後推送」。
改了環境變數,網站卻沒有變化
環境變數要在服務重新部署後才生效。存檔後到服務頁面按「重新部署 / Redeploy」,等狀態變回 Running。
git push 了,Zeabur 卻沒有自動重新部署
- 確認推送的是 main 分支(還在功能分支上的話,要先合併回 main 再 push)。
- 到 GitHub 確認新的 commit 真的有上去(Claude 回報 push 成功才算)。
- 到 Zeabur 服務頁面看部署紀錄;必要時手動按「重新部署」。
重新部署後,之前輸入的資料都不見了
網站可能在線上也用了 SQLite 檔案。雲端服務每次部署都是全新的環境,存在檔案裡的資料會消失。請確認 DATABASE_URL 有設定,讓網站使用 Zeabur 的 PostgreSQL。
想要的網域名稱不能用
.zeabur.app 的前綴是大家共用的,被別人用過就不能選。換一個,例如加上班級或名字:my-first-app-301。
購買伺服器時付款失敗,或還不想花錢
需要信用卡綁定,未成年請家長協助。Zeabur 的免費共享叢集已在 2026 年 4 月 1 日停止建立新專案;只是想免費練習流程,請改用 步驟 10 推薦的免費平台(Render 或 Vercel,搭配 Neon 資料庫)。
建立專案時選不到我買的伺服器
伺服器要等狀態變成「運行中」才能選,剛購買請等幾分鐘後重新整理頁面。
網址打得開,但手機上版面跑掉
用手機截圖,貼給 Claude(Alt+VCtrl+V 或 /img):「手機上版面跑掉了,請修正成手機也好用的排版」,改好後一樣 commit → merge → push,Zeabur 會自動更新。
🔟 其他免費平台(Render、Vercel、Neon)
Render 網址打開後一直轉圈圈,要等很久
免費網站 15 分鐘沒人連線就會休眠,喚醒大約要 1 分鐘,這是正常的。等它載入完,之後一段時間內都會很快。上課展示前先自己打開一次。
Render 或 Vercel 看不到我的 private repo
要在 GitHub 安裝該平台的授權 App,並在 Repository access 勾選 my-first-app。Render 在建立 Web Service 時會出現設定連結;Vercel 在 Import 頁面點「Adjust GitHub App Permissions」。也要確認登入的 GitHub 帳號就是 repo 的擁有者。
Render 部署成功,但日誌出現 gunicorn 找不到 app(例如 Failed to find attribute 'app')
Start Command 的 gunicorn 檔名:變數名 跟程式對不起來。例如主程式是 main.py,就要填 gunicorn main:app。不確定就把錯誤整段貼給 Claude:「Render 的 Start Command 要填什麼?」
Vercel 上的網站出現資料庫錯誤,或資料存不進去
- 確認專案的 Storage 已經連結 Neon,Settings → Environment Variables 裡有
DATABASE_URL,然後重新部署(Redeploy)。 - Vercel 線上不能寫檔案,所以不能用 SQLite。請 Claude 確認「有 DATABASE_URL 時一定用 PostgreSQL」。
Vercel 建置失敗,說 Python 版本不支援
Vercel 只支援 Python 3.12 以上,不支援 3.11。請 Claude「新增 .python-version 寫 3.12,並確認程式和套件在 3.12 可以執行」,推送後重新部署。
Neon 資料庫的連線字串不小心推上 GitHub 了
就算是 private repo 也要處理:到 Neon 專案重設資料庫密碼(產生新的連線字串),再把新的字串更新到 Render/Vercel 的環境變數並重新部署。之後請 Claude 從程式碼移除舊字串,並確認 .env 有寫進 .gitignore。
📌 其他
本頁每一步的「已完成」勾勾不見了
進度只存在這台電腦的這個瀏覽器裡。換電腦、換瀏覽器、用無痕模式或清除瀏覽資料,勾勾就會消失;不影響你實際裝好的東西。
網站跑起來了,接下來可以學什麼?
直接跟 Claude 說你想加的功能,照「開分支 → 實作 → 本機測試 → commit 後合併回 main 並 push」的節奏一段一段做。遇到不懂的,用 /btw 順便問問題,不會打斷主要對話。
還是解決不了,要怎麼求助?
- 把做到第幾步、輸入了什麼指令、完整錯誤訊息(截圖或複製文字)準備好。
- 先貼給 Claude Code 問;Claude 自己出問題時,在 Claude Code 裡輸入
/doctor檢查。 - 再帶著資訊問老師或同學。帳號、訂閱、付款問題,請到 claude.ai 左下角帳號選單的「Get help」聯絡 Anthropic 客服。
想放上真實截圖替換示意圖
把截圖存成本頁對應檔名放到網站的 public/ai-coding/ 資料夾(例如 01-python-win.png、02-antigravity-zh.png…),頁面會自動改顯示真實截圖。