🧑‍💻 零基礎AI輔助程式設計
← 回教學資源網

零基礎AI輔助程式設計

AI-Assisted Programming from Zero · Windows / macOS

不用會寫程式也能開始:從安裝開發環境、讓 Claude Code 依照你的「系統規劃」寫程式,到推上 GitHub 並用 Zeabur 部署成真正的網站。右上角可切換 Windows/macOS,內容會跟著變喔!

黃色標記 補充 是原流程容易漏掉、但實際上課一定會卡關的步驟。每一步完成後勾選「已完成」,進度會記在這台電腦的瀏覽器裡。
0

課前準備:帳號與電腦檢查 補充

Accounts & System Check

開課前先把帳號都申請好,課堂上就不會卡在收驗證信。

需要的帳號用途費用
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。
💡 如何開終端機?按 Win 鍵輸入「PowerShell」→ 點開「Windows PowerShell」。按 ⌘+Space 輸入「終端機」或「Terminal」→ Enter。後面很多步驟都要在終端機貼指令。
1

下載並安裝 Python 3.11.9

Install Python 3.11.9

Python 是 AI 最常用的程式語言,之後 Claude Code 幫你寫的 Python 程式要靠它執行。

  1. 打開 Python 3.11.9 官方下載頁:python.org/downloads/release/python-3119,捲到最下方「Files」。
  2. 下載 Windows installer (64-bit),檔名 python-3.11.9-amd64.exe。
  3. 下載 macOS 64-bit universal2 installer,檔名 python-3.11.9-macos11.pkg(M 系列與 Intel 都適用)。
  4. 執行安裝檔,在第一個畫面最下方一定要勾選「Add python.exe to PATH」,再按「Install Now」。
  5. 雙擊 .pkg,一路按「繼續」→「同意」→「安裝」,輸入 Mac 登入密碼。Mac 版會自動設定好路徑,沒有 PATH 勾選框。
  6. 安裝完成畫面若出現「Disable path length limit」,請點一下(解除 260 字元路徑限制,避免以後安裝套件出錯)。
  7. 安裝完成會自動開啟「Python 3.11」資料夾,請雙擊 Install Certificates.command(安裝 SSL 憑證,否則 Python 連網會失敗)。
Python 3.11.9 官網下載檔案清單
實際畫面(2026/10 擷取):捲到頁面最下方的「Files」表格,點 Windows installer (64-bit)(不要點上方黃色的「Python install manager」按鈕)點 macOS 64-bit universal2 installer。頁面上方寫「已被 3.11.17 取代」不用理會:3.11.9 是 3.11 系列最後一版有安裝檔的版本。
Python 安裝畫面截圖
🐍 Python 3.11.9 (64-bit) Setup
Install Python 3.11.9 (64-bit)
Select Install Now to install Python with default settings, or choose Customize to enable or disable features.
➜ Install NowC:\Users\你的名字\AppData\Local\Programs\Python\Python311
➜ Customize installation
✓Use admin privileges when installing py.exe
✓Add python.exe to PATH ← 一定要勾!
示意圖:Windows 安裝第一個畫面,紅框處務必勾選
Python 安裝完成截圖
Python 3.11
📄
ReadMe.rtf
🐍
IDLE.app
⚙️
Install Certificates.command
⚙️
Update Shell Profile.command
示意圖:安裝完自動開啟的資料夾,雙擊紅框處的檔案

驗證安裝

重新開一個終端機,輸入:

PowerShell
python --version
Terminal
python3 --version

看到 Python 3.11.9 就成功了 🎉

⚠️ 如果輸入 python 卻跳出 Microsoft Store:代表忘了勾 PATH。請重新執行安裝檔 → Modify → 勾「Add Python to environment variables」,或到「設定 → 應用程式 → 進階應用程式設定 → 應用程式執行別名」把兩個 python 別名關掉。
💡 Mac 上請一律用 python3、pip3,不要用 python。
2

下載 Antigravity IDE,安裝繁體中文語言包

Install Google Antigravity & Chinese (Traditional) Language Pack

Antigravity 是 Google 推出的 AI 程式編輯器(以 VS Code 為基礎),我們用它來看檔案、開終端機。

  1. 前往 antigravity.google/download。
  2. 點 Download for Windows,執行下載的 .exe,依指示按「下一步」完成安裝(建議勾選「建立桌面圖示」與「加入 PATH」)。
  3. 依晶片選 Apple Silicon 或 Intel 版的 .dmg,打開後把 Antigravity 拖進「應用程式」資料夾。第一次開啟若跳出安全警告,按「打開」。
  4. 第一次啟動會進入設定精靈:選「Start fresh」(全新開始)→ 選佈景主題 → 代理模式選預設即可 → 用 Google 帳號登入。
  5. 點左側延伸模組圖示(或按 Ctrl+Shift+X⌘+⇧+X),搜尋 Chinese Traditional。
  6. 找到 Chinese (Traditional) Language Pack(發行者 MS-CEINTL)→ 按 Install。
  7. 右下角跳出「Change Language and Restart」→ 點它,IDE 重開後就是繁體中文介面了。
Antigravity 官網 Windows 下載頁
實際畫面(2026/10 擷取):Antigravity 下載頁選「Windows」,一般電腦點 Download for x64。
Antigravity 官網 macOS 下載頁
實際畫面(2026/10 擷取):Antigravity 下載頁選「macOS」,M 系列晶片點 Download for Apple Silicon,舊款 Intel Mac 點 Download for Intel。
Antigravity 延伸模組截圖
Antigravity — Extensions
📄🔍🧩🤖
EXTENSIONS
中
Chinese (Traditional) Language Pack
MS-CEINTL
Install
// 安裝後右下角會出現:
ℹ️ 要變更語言並重新啟動嗎?
Change Language and Restart
示意圖:搜尋並安裝繁中語言包 → 重新啟動
沒有跳出重新啟動的提示? 按 Ctrl+Shift+P⌘+⇧+P 打開命令選擇區,輸入 Configure Display Language → 選 中文(繁體) zh-tw → 重新啟動。
3

下載並安裝 Node.js

Install Node.js (LTS)

Node.js 讓電腦能執行 JavaScript,也附帶 npm 套件管理工具;做網頁、跑很多開發工具都需要它。

  1. 前往 nodejs.org/zh-tw/download,選標示 LTS(長期支援版)的版本。
  2. 下載 Windows 安裝程式 (.msi),一路按 Next;「Tools for Native Modules」那頁不用勾,直接 Next → Install。
  3. 下載 macOS 安裝程式 (.pkg),雙擊後一路「繼續」→「安裝」。
  4. 安裝完關掉並重開終端機,輸入下面指令驗證:
PowerShellTerminal
node -v
npm -v
Node.js 官網 Windows 下載頁
實際畫面(2026/10 擷取):上方的指令區不用理會,直接點下方綠色的 Windows Installer (.msi)。
Node.js 官網 macOS 下載頁
實際畫面(2026/10 擷取):上方的指令區不用理會,直接點下方綠色的 macOS Installer (.pkg)。版本請選標示 LTS 的。
Node.js 驗證截圖
PS C:\Users\student>student@MacBook ~ % node -v v24.x.x PS C:\Users\student>student@MacBook ~ % npm -v 11.x.x
示意圖:看到版本號就代表安裝成功(數字依實際版本而定)
⚠️ 補充:如果 npm -v 出現紅字「因為這個系統上已停用指令碼執行」,請在 PowerShell 執行下面這行後重開 PowerShell:
PowerShell
Set-ExecutionPolicy -Scope CurrentUser RemoteSigned
出現詢問時輸入 Y 按 Enter。
3+

安裝 Git 並設定身分 補充

Install Git

原流程漏掉的關鍵:安裝外掛(步驟 6)與推送到 GitHub(步驟 8)都要用到 Git。另外,Windows 版 Claude Code 雖然沒有 Git 也能改用 PowerShell 執行,但有安裝 Git for Windows 時會優先使用其中的 Git Bash,指令相容性更好,建議一定要裝。

  1. 前往 git-scm.com/downloads/win,下載 64-bit Git for Windows Setup。
  2. 執行安裝檔,所有選項都用預設值一路 Next 即可(預設就會安裝 Git Bash 與 Git Credential Manager)。
  1. 在終端機輸入下面指令,會跳出視窗詢問是否安裝「命令列開發者工具」→ 按「安裝」(約 5–10 分鐘)。
Terminal
xcode-select --install

若顯示 “already installed” 代表已經有了,直接下一步。

Git 官網 Windows 下載頁
實際畫面(2026/10 擷取):點「Click here to download」或「Git for Windows/x64 Setup」下載安裝檔。
Git 官網 macOS 安裝說明
實際畫面(2026/10 擷取):官網列出的 macOS 安裝方式,本課程用其中的 Xcode Command Line Tools(xcode-select --install)。

驗證並設定你的名字與 Email(只要做一次)

PowerShellTerminal
git --version
git config --global user.name "你的英文名字"
git config --global user.email "你的GitHub信箱@example.com"
💡 Email 請填之後註冊 GitHub 用的同一個信箱,提交紀錄才會連到你的帳號。
4

下載安裝 Claude Code

Install Claude Code (Native Installer)

Claude Code 是 Anthropic 的 AI 程式助理,在終端機裡用中文跟它說要做什麼,它就會幫你寫程式、改檔案。

① 使用原生安裝器(推薦方式)

複製下方指令貼到 PowerShell 並按 Enter:

PowerShell
irm https://claude.ai/install.ps1 | iex

irm 是 Invoke-RestMethod 的縮寫,iex 是 Invoke-Expression。整段意思是「下載安裝腳本並執行」。

② 設定 PATH 環境變數

安裝完成後,設定 PATH 系統環境變數,讓系統能找到 claude.exe 的位置。複製下方指令貼到 PowerShell 並按 Enter:

PowerShell
$currentPath = [Environment]::GetEnvironmentVariable('PATH', 'User')
[Environment]::SetEnvironmentVariable('PATH', "$currentPath;$env:USERPROFILE\.local\bin", 'User')

這段指令會把 %USERPROFILE%\.local\bin(原生安裝器把 claude.exe 放在這裡)加進使用者層級的 PATH。執行後請關閉並重新打開 PowerShell 讓設定生效。

⚠️ PATH 指令只要執行一次,重複執行會讓 PATH 出現重複路徑(無害但很亂)。

① 使用原生安裝器(推薦方式)

複製下方指令貼到 終端機 並按 Enter:

Terminal
curl -fsSL https://claude.ai/install.sh | bash

curl 下載安裝腳本,| bash 把它交給 bash 執行。安裝器會把 claude 放在 ~/.local/bin。

② 若出現 command not found:設定 PATH

安裝結束時若提示 ~/.local/bin 不在 PATH,執行下面這行把它加進 zsh 設定檔:

Terminal
echo 'export PATH="$HOME/.local/bin:$PATH"' >> ~/.zshrc && source ~/.zshrc
Claude Code 官方 Quickstart 安裝說明
實際畫面(2026/10 擷取):Claude Code 官方文件的安裝指令(code.claude.com/docs/en/quickstart),跟上面要你貼的指令相同。

③ 驗證安裝

PowerShellTerminal
claude --version
claude doctor
Claude Code 安裝截圖
PS C:\Users\student>student@MacBook ~ % claude --version 2.x.x (Claude Code) PS C:\Users\student>student@MacBook ~ % claude doctor Diagnostics └ Currently running: native └ ✔ Installation is healthy
示意圖:看到版本號、doctor 沒有紅字就 OK
5

建立專案資料夾 → Antigravity 開啟 → 終端機登入 Claude

Create Folder, Open in IDE, Log in
  1. 建立專案資料夾,名稱用英文小寫、不要有空格或中文(補充:中文路徑常讓工具出錯),例如: C:\Users\你的帳號\Documents\my-first-app~/Documents/my-first-app。
  2. 打開 Antigravity →「檔案」→「開啟資料夾」→ 選剛剛的資料夾。若問「是否信任此資料夾的作者」,選「是,我信任作者」。
  3. 開啟終端機:選單「終端機」→「新增終端」,或按 Ctrl+`⌃+`(Esc 下面那顆鍵)。終端機的位置會自動在專案資料夾裡。
  4. 輸入 claude 按 Enter,第一次會依序:選擇顏色主題 → 選登入方式「Claude account with subscription」→ 自動開啟瀏覽器 → 按「授權」→ 回到終端機。
  5. 最後問「Do you trust the files in this folder?」→ 選 Yes, proceed。看到輸入框 > 就可以開始跟 Claude 對話了!
Antigravity 終端機登入 Claude 截圖
my-first-app — Antigravity
📄🔍🧩
檔案總管
▾ MY-FIRST-APP
問題 輸出 終端機
PS C:\Users\student\Documents\my-first-app>student@MacBook my-first-app % claude Select login method: ❯ 1. Claude account with subscription · Pro, Max… 2. Anthropic Console account · API usage billing 3. 3rd-party platform
示意圖:在 Antigravity 內建終端機啟動 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)
↑ / ↓叫出之前輸入過的內容想重複或修改上一句時用

💬 使用範例:一次完整的對話流程

在 Claude Code 輸入框依序輸入
請用繁體中文說明這個專案目前有哪些檔案、各自做什麼
請看 @app.py,同學按「送出」後畫面沒有反應,幫我找原因並修正
!python app.py
剛剛的錯誤訊息是什麼意思?請用簡單的話解釋,再幫我修好
/compact 保留點餐功能的討論
請告訴我怎麼在本機打開網站測試
💡 說人話就好:指令只是捷徑,大部分事情直接用中文描述需求,Claude 就會自己讀檔、改程式、執行測試。預設的 auto 模式下,它會自己做判斷為安全的操作,有風險的仍會先問你;想每一步都確認,就按 Shift+Tab 切到 Manual。看不懂它要做什麼時,就回它「先解釋你要做什麼」。
6

安裝 oh-my-claudecode 與 claude-img

Install Plugins & Tools

A. oh-my-claudecode(OMC)— 多代理協作外掛

專案頁:github.com/Yeachan-Heo/oh-my-claudecode。它讓 Claude Code 能分派多個專門角色(規劃、實作、審查)合作。以下指令是在 Claude Code 裡面輸入(先執行 claude),一次一行:

Claude Code 輸入框
/plugin marketplace add https://github.com/Yeachan-Heo/oh-my-claudecode
Claude Code 輸入框
/plugin install oh-my-claudecode

安裝後輸入 /exit 離開、再輸入 claude 重新進入,然後執行初始設定:

Claude Code 輸入框
/oh-my-claudecode:omc-setup
安裝 OMC 截圖
╭───────────────────────────────────────────╮ │ ✻ Welcome to Claude Code! │ ╰───────────────────────────────────────────╯ > /plugin install oh-my-claudecode ✔ Installed oh-my-claudecode. Restart Claude Code to load new plugins.
示意圖:在 Claude Code 中安裝外掛
💡 設定精靈問的問題看不懂,都選預設(第一個選項)即可。之後可以試試:/autopilot 幫我做一個待辦清單網頁。

B. claude-img — 用檔案選擇器一次上傳多張圖片

專案頁:github.com/Lazy-poet/claude-img。先 /exit 離開 Claude Code,在一般終端機執行:

PowerShell
irm https://claude-img-releases.s3.eu-north-1.amazonaws.com/install.ps1 | iex
Terminal
curl -fsSL https://claude-img-releases.s3.eu-north-1.amazonaws.com/install.sh | bash

重新執行 claude 後,輸入 /img 就會跳出檔案選擇視窗,可一次選多張截圖給 Claude 看,例如:

Claude Code 輸入框
/img 請照這張設計圖的版面幫我做首頁
7

新增「系統規劃.md」並撰寫功能需求

Write Your Spec

AI 寫得好不好,取決於你講得清不清楚。先把想做的東西寫成一份規劃文件,再請 Claude 照著做。

  1. 在 Antigravity 左側檔案總管空白處按右鍵 →「新增檔案」→ 命名為 系統規劃.md。
  2. 從下面兩個範本挑一個複製貼上(第一次建議用初學者版),把內容改成你自己的點子,存檔(Ctrl+S⌘+S)。

🌱 初學者版:只寫需求,技術交給 Claude 建議

不知道要用什麼語言、要不要資料庫都沒關係,只要說清楚想做什麼、誰會用、要部署到 Zeabur,其餘請 Claude 幫你分析和建議。

系統規劃.md 範本(初學者版)
# 系統規劃:班級點餐小幫手

## 我想做什麼
每天中午統計同學訂便當很麻煩,想做一個網站讓同學自己點餐,值日生可以直接看統計。

## 誰會用
- 班上同學:輸入座號、選便當
- 值日生:看各品項的數量和總金額

## 需要的功能
1. 同學點餐
2. 值日生看統計
3. 每天的資料分開,不要跟前一天混在一起

## 部署
- 要部署到 Zeabur,讓大家用手機打開網址就能用
- 程式碼放在 GitHub

## 請 Claude 幫我
- 我是初學者,技術細節請你幫我分析和建議
- 需求有不清楚或沒想到的地方,先問我
- 建議適合部署到 Zeabur 的做法(用什麼程式語言、需不需要資料庫……),用簡單的話說明原因
- 介面用繁體中文,手機也要好用
Claude Code 輸入框(初學者版)
請閱讀 系統規劃.md。我是初學者,請先幫我分析需求,有不清楚的地方先問我;再建議適合部署到 Zeabur 的技術做法,用簡單的話說明原因。等我同意後,用繁體中文列出實作計畫和檔案結構,確認後再開始寫程式。完成後告訴我怎麼在本機執行測試。
💡 從初學者版升級:跟 Claude 討論完、決定好做法後,可以請它「把我們討論的結果整理成進階版格式,更新 系統規劃.md」,之後修改或重做都有一份清楚的規格可以參考。

🚀 進階版:連技術選擇、資料庫、介面風格都寫清楚

已經知道想用什麼技術,或想精準控制成品時使用。下面的範本指定了 Flask+Zeabur PostgreSQL,並請 Claude 先做 5 種介面風格讓你挑。

系統規劃.md 範本(進階版)
# 系統規劃:班級點餐小幫手

## 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. 不要做的事
- 不需要登入、不需要金流
Claude Code 輸入框(進階版)
請閱讀 系統規劃.md,先依照「介面風格」做出 5 種風格預覽讓我挑選。我選好之後,再用繁體中文列出實作計畫和檔案結構,等我確認後再開始寫程式。完成後告訴我怎麼在本機執行測試。
🎨 怎麼挑風格:Claude 做完預覽後,在 Antigravity 左側檔案總管的 style-previews 資料夾裡,對 HTML 檔按右鍵 →「在檔案總管中顯示在 Finder 中顯示」,再雙擊用瀏覽器打開。看完直接跟 Claude 說「我選第 3 種」就好;也可以混搭,例如「第 2 種的配色+第 4 種的字體」。
💡 補充:部署前一定要先在自己電腦跑起來、用瀏覽器測過(Claude 會告訴你網址,通常是 http://localhost:5000 之類)。本機都不能跑,上雲端更不可能成功。
8

建立 GitHub,新增 Private Repository 並推送程式碼

GitHub Private Repo & Push

A. 註冊與建立倉庫

  1. 到 github.com/signup 註冊,收 Email 驗證碼。依提示啟用兩步驟驗證(2FA)(GitHub 現在要求,用手機 App 掃 QR code)。
  2. 登入後點右上角 + →「New repository」。
  3. Repository name 填 my-first-app;可見度一定要選「Private」。
  4. 補充:「Add README / .gitignore / license」都不要勾(本機已有檔案,勾了會造成第一次推送衝突)→ 按 Create repository。
GitHub 建立 repository 截圖
github.com/new
Create a new repository
Repository name *
🌐 Public Anyone on the internet can see this repository.
🔒 Private You choose who can see and commit.
Add a README file ← 不要勾
Create repository
示意圖:選 Private,README 不要勾

B. 讓電腦能登入 GitHub 補充

GitHub 早就不接受用「密碼」推送程式碼。最簡單的方式是安裝 GitHub CLI(gh),用瀏覽器授權一次就好:

PowerShell
winget install --id GitHub.cli

Mac:到 cli.github.com 下載 macOS 安裝檔(.pkg)並安裝。

安裝完重開終端機,執行登入,依序選 GitHub.com → HTTPS → Yes → Login with a web browser,把畫面上的 8 碼代碼貼到瀏覽器授權:

PowerShellTerminal
gh auth login
GitHub CLI 官網
實際畫面(2026/10 擷取):GitHub CLI 官網 cli.github.com。

C. 推送程式碼

做法一(推薦):直接請 Claude Code 幫你做:

Claude Code 輸入框
請幫我建立適合這個專案的 .gitignore(排除 .env、node_modules、__pycache__、.venv),初始化 git,提交所有檔案,並推送到我剛建立的 GitHub private repo:https://github.com/你的帳號/my-first-app

做法二:自己在專案資料夾的終端機輸入(把網址換成你的):

PowerShellTerminal
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
🔒 安全提醒:API 金鑰、密碼一律放在 .env 檔,並確認 .env 有寫進 .gitignore,絕對不要推上 GitHub(就算是 private 也一樣)。

D. 跟 Claude 合作的節奏:每完成一段功能就 commit → merge → push

實際開發時,最常用的不是一條條打 Git 指令,而是在每完成一段功能、測試沒問題後,跟 Claude 說一句話,讓它幫你一次做完「存檔 → 合併 → 上傳」。一段功能可以是「新增統計頁」「修好送出沒反應的 bug」「改成深色風格」這種大小。

Claude Code 輸入框:一段功能的完整節奏
開一個新分支來做值日生統計頁
(……跟 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。這樣改壞了也不會影響線上的網站。

PowerShellTerminal
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 說「幫我解決合併衝突,並說明你保留了哪些內容」。
9

Zeabur:購買 Server、建立專案與服務、連結 GitHub 部署、建立網域

Deploy to Zeabur

A. 註冊並購買伺服器

  1. 到 zeabur.com →「Login with GitHub」,用 GitHub 帳號登入(之後連結倉庫最順)。
  2. 進入 Dashboard,點左側「伺服器 / Servers」→「購買伺服器」。
  3. 選擇機房地區(建議離台灣近的 Tokyo / Hong Kong / Taiwan)與規格(入門專案選最小規格即可)→ 綁定信用卡付款。
  4. 等伺服器狀態變成「運行中」(約數分鐘)。
Zeabur 方案價格頁
實際畫面(2026/10 擷取):Zeabur 方案頁(zeabur.com/pricing),部署需要購買伺服器,實際價格依地區與規格而定。
💡 Zeabur 的免費共享叢集已在 2026 年 4 月 1 日停止建立新專案,現在要購買伺服器才能部署。只是想先免費練習流程,請看下一步的 10. 其他免費平台;Zeabur 的更多細節可參考本站的 Zeabur 部署教學。

B. 建立專案與服務

  1. Dashboard →「建立專案 / Create Project」→ 部署位置選你剛買的伺服器 → 幫專案命名(如 my-first-app)。
  2. 進入專案 →「新增服務 / Add Service」→ 選 GitHub。
  3. 第一次會要求「Configure GitHub」:在 GitHub 頁面安裝 Zeabur App,Repository access 選「Only select repositories」並勾選 my-first-app(private 倉庫要這一步授權,Zeabur 才看得到)。
  4. 回到 Zeabur 選擇該倉庫,Zeabur 會自動偵測語言並開始建置,日誌顯示成功後狀態變綠色「Running」。
  5. 在同一個專案再按一次「新增服務」→ 從 Marketplace 搜尋「PostgreSQL」→ 部署,等它也變成「Running」。
  6. 點進網站服務 →「環境變數 / Variables」新增: DATABASE_URL 值填 ${POSTGRES_CONNECTION_STRING}(Zeabur 會自動換成資料庫的連線字串)、 ZBPACK_PYTHON_VERSION 值填 3.11 → 存檔後重新部署。
💡 資料庫的帳號密碼由 Zeabur 自動產生,不要把連線字串寫進程式碼或推上 GitHub,一律用環境變數引用。
Zeabur 部署截圖
dash.zeabur.com/projects/my-first-app
my-first-app
GitHub · main
● Running
網路 Networking › 網域 Domains
.zeabur.app
產生網域 Generate Domain
🔐 自動配置 HTTPS
示意圖:服務 Running 後,到「網域」產生 .zeabur.app 網址

C. 建立 Zeabur 網域

  1. 點進服務 →「網路 / Networking」→「網域」→「產生網域」。
  2. 輸入想要的前綴(例如 my-first-app),得到 https://my-first-app.zeabur.app,打開網址就能看到你的網站 🎉
  3. 若程式需要 API 金鑰:服務 →「環境變數 / Variables」加入(不要寫在程式碼裡),存檔後重新部署。
⚠️ 補充:常見部署失敗原因
  • Python 網站必須監聽 0.0.0.0 與環境變數 PORT,而且要有 requirements.txt。可以直接請 Claude:「請把程式改成可以部署到 Zeabur,監聽 PORT 環境變數」。
  • 網站顯示資料庫連線錯誤:確認 PostgreSQL 服務是「Running」、DATABASE_URL 有設定,而且兩個服務在同一個專案裡。
  • 建置失敗時,點服務的「部署日誌 / Logs」,把紅字整段複製貼給 Claude Code 請它修正。
🔁 之後只要改完程式 → git push(或請 Claude 幫你提交推送),Zeabur 就會自動重新部署。
10

其他免費平台的選擇:比較與部署教學

Free Hosting Alternatives

還不想花錢買伺服器?這一步先比較 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 天)可設定試用後要需另外設定✅(要寫設定檔)有預算、想學進階部署
Koyeb1 個免費小主機(0.1 vCPU、512 MB),只能放法蘭克福或華盛頓會:1 小時沒流量就休眠官方 FAQ 說需要驗證卡片(以官網為準)有小額免費 PostgreSQL✅可接受機房離台灣較遠
PythonAnywhereBeginner 免費: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 自動部署。
🏆 為什麼挑這兩個?我們的網站是「Flask+PostgreSQL、程式碼在 private GitHub repo」。Render+Neon 幾乎不用改步驟 7 的規格(一樣用 gunicorn、讀 DATABASE_URL),而且都能選新加坡機房,離台灣近;Vercel+Neon 完全不用信用卡、資料庫連線一鍵自動設定,也比較不會讓第一個訪客等很久。其他平台不是要信用卡(Fly.io、Cloud Run、Koyeb)、沒有免費資料庫(PythonAnywhere)、就是免費額度太少(Railway)。資料庫兩個都選 Neon,因為 Render 自己的免費 PostgreSQL 30 天就會到期。

C. ⭐ 推薦一:Render 網站+Neon 資料庫

Render 免費方案說明頁
實際畫面(2026/10 擷取):Render 官方說明:網站(Web services)與資料庫都有免費方案,但免費資料庫有 30 天期限,所以本課程資料庫改用 Neon。
Neon 價格頁
實際畫面(2026/10 擷取):Neon 的 Free 方案:免信用卡、沒有時間限制,每個專案 1 GB 儲存空間。

第 1 部分:在 Neon 建立免費資料庫

  1. 到 neon.com 註冊,選擇用 GitHub 帳號登入(不需要信用卡)。
  2. 建立專案(Project):名稱填 my-first-app,地區(Region)選 AWS Asia Pacific (Singapore),離台灣最近。
  3. 建好後在專案首頁按「Connect」,複製連線字串(長得像 postgresql://帳號:密碼@….neon.tech/neondb?sslmode=require)。
🔒 這串連線字串裡有密碼。只能貼到平台的「環境變數」裡,不要貼進程式碼、系統規劃.md,也不要推上 GitHub。

第 2 部分:在 Render 建立網站服務

  1. 先請 Claude 確認專案可以部署到 Render(輸入框內容在下方),commit → merge → push 到 GitHub。
  2. 到 render.com 用 GitHub 帳號註冊/登入。
  3. Dashboard 右上角「New」→「Web Service」→ 選 GitHub。第一次會跳到 GitHub 安裝 Render 的授權,Repository access 選「Only select repositories」並勾選 my-first-app(private 倉庫要這一步,Render 才看得到)。
  4. 回到 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。
  5. 在同一頁的「Environment Variables」新增兩個變數: DATABASE_URL 值貼上 Neon 的連線字串; PYTHON_VERSION 值填 3.11.9(Render 規定要寫完整三段版本號,不寫的話會用比較新的預設版本)。
  6. 按最下方的部署按鈕(Deploy Web Service),畫面會跳到 Logs:看到建置成功、服務 Live 就完成了;有紅字就整段複製給 Claude。
  7. 頁面上方會顯示網址 https://my-first-app-xxxx.onrender.com,用手機打開試試看 🎉
  8. 之後只要 push 到 main,Render 就會自動重新部署(預設開啟)。
Claude Code 輸入框
請把專案調整成可以部署到 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
⚠️ 免費版會休眠:15 分鐘沒人連線,Render 就會讓網站睡著,下一個人打開要等大約 1 分鐘(看到轉圈圈是正常的)。上課展示前,先自己打開一次把它「叫醒」。

D. ⭐ 推薦二:Vercel 網站+Neon 資料庫(從 Vercel 一鍵建立)

Vercel 價格頁
實際畫面(2026/10 擷取):Vercel 的 Hobby 方案每月 $0,限個人、非商業用途。
  1. 先請 Claude 確認專案可以部署到 Vercel(輸入框內容在下方),commit → merge → push 到 GitHub。
  2. 到 vercel.com/signup 選 Hobby(個人免費方案),用 Continue with GitHub 註冊,不需要信用卡。
  3. Dashboard →「Add New…」→「Project」→ 在「Import Git Repository」找 my-first-app。看不到 private 倉庫時,點「Adjust GitHub App Permissions」,在 GitHub 頁面勾選 my-first-app。
  4. 按「Import」,Vercel 會自動偵測到 Flask(不用填 Build/Start Command,也不需要 gunicorn)→ 按「Deploy」。第一次可能因為還沒接資料庫而出錯,沒關係,繼續下一步。
  5. 進入專案 → 上方「Storage」→ 建立資料庫,選 Neon(Postgres)→ 地區選 Singapore、方案選 Free → 建立後連結(Connect)到這個專案。Vercel 會自動幫你加上 DATABASE_URL 等環境變數,不用自己複製密碼。
  6. 把網站也搬到新加坡:專案「Settings」→「Functions」→「Function Regions」選 Singapore(預設在美國華盛頓,離 Neon 太遠會變慢;免費方案只能選一個區域)。
  7. 到「Deployments」對最新一次部署按「Redeploy」,讓新的環境變數和區域生效。有錯誤時點進部署看 Build Logs/Runtime Logs,把紅字複製給 Claude。
  8. 完成後會得到 https://my-first-app-xxxx.vercel.app,打開就能用 🎉 之後 push 到 main 就會自動重新部署。
Claude Code 輸入框
請把專案調整成可以部署到 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
💡 Vercel 跟 Render 最大的差別:Vercel 不是一直開著的伺服器,而是「有人連線時才執行一下程式」。所以線上不能把資料存在檔案裡(包含 SQLite),一定要用 Neon 的 PostgreSQL。官方說明:Deploy a Flask app on Vercel。

E. 免費平台注意事項

  • 休眠喚醒慢:免費網站沒人用就會休眠,Neon 資料庫也會暫停。第一次打開慢是正常的,重新整理一次通常就好。
  • 資料庫容量與到期:Neon 免費版容量很小,練習夠用;Render 自己的免費 PostgreSQL 30 天後到期,不要把重要資料放那裡。
  • 環境變數:改完環境變數一定要重新部署才會生效;變數名稱大小寫要完全一樣(DATABASE_URL)。
  • 不要把金鑰寫進程式:資料庫連線字串、API 金鑰一律放平台的環境變數,.env 要寫進 .gitignore。
  • 免費方案會改:額度或規則變動時,以官網公告為準;作品要給很多人長期用,再考慮步驟 9 的付費伺服器。
📝 記得更新 系統規劃.md:把進階版範本的「## 6. 部署」換成你選的平台,Claude 才不會照 Zeabur 的方式設定。例如選 Render+Neon:
系統規劃.md「部署」段落(Render+Neon 範例)
## 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」。

?

常見問題排解

Troubleshooting

依照課程步驟分類,點問題標題就能展開「原因+解法」。找不到你的狀況時,最快的方法是:把錯誤訊息整段複製,貼給 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」。兩種修法(做一種即可):

  1. 重新執行 python-3.11.9-amd64.exe → 選 Modify → Next → 勾「Add Python to environment variables」→ Install。
  2. 到「設定 → 應用程式 → 進階應用程式設定 → 應用程式執行別名」,把 python.exe 和 python3.exe 兩個「應用程式安裝程式」別名關掉。

做完記得重開終端機再輸入 python --version。

「'python' 不是內部或外部命令」或「無法辨識 'python' 詞彙」

同樣是 PATH 沒設好。先重開終端機;仍不行就照上一題用 Modify 勾選 PATH。也可以先用 Python 附的啟動器確認有沒有裝成功:

PowerShell
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」的寫法,最不會出錯:

PowerShell
python -m pip install -r requirements.txt
Terminal
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:

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 一次:

PowerShellTerminal
git config --global user.name "你的英文名字"
git config --global user.email "你的GitHub信箱@example.com"
名字或 Email 打錯了,怎麼改/怎麼確認?

直接再執行一次同樣的 git config --global ... 指令就會覆蓋。想確認目前設定,輸入:

PowerShellTerminal
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 裡。

  1. 確認有執行步驟 4 的「② 設定 PATH」那段指令(只要執行一次安裝結束時若有提示才需要)。
  2. 關掉並重開終端機(Antigravity 要整個重開)。
  3. 輸入 claude --version 確認。

想檢查 PATH 裡有沒有這個資料夾,可以執行下面指令;沒有任何輸出就代表還沒加進去:

PowerShell
$env:PATH -split ';' | Select-String '\.local\\bin'

官方說明:Troubleshoot installation and login。

出現「'irm' 不是內部或外部命令」或「The token '&&' is not a valid statement separator」

指令貼錯地方了:irm ... | iex 只能在 PowerShell 執行,你可能開成「命令提示字元(CMD)」。請按 Win 鍵搜尋「PowerShell」打開,再貼一次:

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 再安裝(官方文件提供的寫法):

PowerShell
[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 版,只留原生版:

PowerShellTerminal
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 複製完整網址。

登入一直失敗、選錯登入方式、或想換帳號

官方建議「乾淨重登」:

  1. 在 Claude Code 裡輸入 /logout 登出。
  2. 輸入 /exit 離開。
  3. 重新輸入 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 裡執行診斷,它會清掉舊的外掛快取;問題還在就重跑一次設定:

Claude Code 輸入框
/oh-my-claudecode:omc-doctor
Claude Code 輸入框
/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,在一般終端機執行:

PowerShell
Remove-Item "$env:LOCALAPPDATA\Programs\claude-img" -Recurse
Remove-Item "$env:USERPROFILE\.claude\skills\img" -Recurse
Terminal
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'」(或其他套件名稱)

套件還沒安裝。在專案資料夾執行:

PowerShell
python -m pip install -r requirements.txt
Terminal
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」,用:

PowerShellTerminal
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 處理登入,選了之後就不會再問密碼。檢查登入狀態:

PowerShellTerminal
gh auth status
出現「Permission denied (publickey)」

遠端網址被設成 SSH 格式(git@github.com:...),但你沒有設定 SSH 金鑰。本課程用 HTTPS,把網址改回來即可(換成你的帳號):

PowerShellTerminal
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 了
  1. 第一件事:立刻到該服務的網站把金鑰作廢(revoke),產生一把新的。金鑰一旦被推上去就要當作已經外洩,光從 GitHub 刪掉沒有用(舊紀錄裡還找得到)。
  2. 新的金鑰只放在本機 .env 和 Zeabur 的環境變數。
  3. 請 Claude:「把 .env 加進 .gitignore,並從 Git 追蹤中移除(保留本機檔案),然後 commit 和 push」。
  4. 想連歷史紀錄都清乾淨,可參考 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 順便問問題,不會打斷主要對話。

還是解決不了,要怎麼求助?
  1. 把做到第幾步、輸入了什麼指令、完整錯誤訊息(截圖或複製文字)準備好。
  2. 先貼給 Claude Code 問;Claude 自己出問題時,在 Claude Code 裡輸入 /doctor 檢查。
  3. 再帶著資訊問老師或同學。帳號、訂閱、付款問題,請到 claude.ai 左下角帳號選單的「Get help」聯絡 Anthropic 客服。
想放上真實截圖替換示意圖

把截圖存成本頁對應檔名放到網站的 public/ai-coding/ 資料夾(例如 01-python-win.png、02-antigravity-zh.png…),頁面會自動改顯示真實截圖。