第 1 章

準備工具

預計時間 10 分鐘 這章結束時你有 GitHub 與 Cloudflare 帳號，和一個會在你電腦上動手的 AI

觀念：開始做之前，要準備什麼

還記得上一章的四個角色嗎？你是老闆，另外三個角色要先請到位：

AI 工程師：付費方案＋電腦上的桌面版 App。
GitHub 倉庫：一個免費帳號，用來備份網站。
Cloudflare 店面：一個免費帳號。

再加上一個空資料夾，讓 AI 把網站檔案放在裡面。最後請 AI 檢查你的電腦，把它需要的小工具裝好。

照片、文字這些素材都不用先準備，之後 AI 會一項一項跟你要。

動手 A：申請帳號、下載 App

1. 選一個 AI，付費方案二選一

你選	需要的方案	網址
Claude	Pro 以上	claude.com（開新分頁）
ChatGPT	Plus 以上	chatgpt.com（開新分頁）

選你已經在付費的那個。兩個做這種網站的能力差不多，真正影響成果的是你說得多清楚。

2. 下載同一家的桌面版 App，裝好後登入

Claude：claude.ai/download（開新分頁）
ChatGPT：chatgpt.com/download（開新分頁）（做網站時用裡面的 Codex）

一定要用電腦上的桌面版 App，不能用網頁版或手機版。只有桌面版的 AI 能在你的電腦上建立檔案、幫你上傳網站。

Claude 下載頁，框出 Download for Windows 按鈕 — Claude 下載頁會自動顯示你電腦的版本：Windows 電腦按 Download for Windows，Mac 會看到 macOS 的下載按鈕。

3. 註冊 GitHub（倉庫，免費）

打開 GitHub 的註冊頁：github.com/signup（開新分頁）
最快的方法是按 Continue with Google，用你的 Google 帳號註冊。沒有 Google 帳號就填 Email、密碼和使用者名稱。
照畫面完成驗證；用 Email 註冊的話，到信箱收驗證碼輸入。

4. 註冊 Cloudflare（店面，免費）

打開 Cloudflare 的註冊頁：dash.cloudflare.com/sign-up（開新分頁）
按 Continue with Google，用你的 Google 帳號註冊，就不用再記一組密碼。
畫面下方如果出現「驗證您是人類」，勾一下方框。

5. 在電腦建一個空資料夾

在「文件」或桌面新增一個資料夾，取名例如「我的網站」。

之後網站的所有檔案都會放在這裡。AI 只能動這個資料夾裡的東西，不會碰你電腦裡的其他檔案。

動手 B：讓 AI 檢查你的電腦

這一步要讓 AI 在你的電腦上裝三個小工具。之後它就能自己存檔、上線、備份，不用你去操作 GitHub 和 Cloudflare 的網站。

6. 打開 Code 分頁

打開 Claude 桌面版，點左上角的 </>（Code）。

Claude 桌面版有 Chat、Work、Code 幾種模式，有的也能動手做事。這門課用 Code，因為它最適合做網站：可以直接在你的網站資料夾裡建立檔案、執行指令、打開預覽、把網站上傳到 GitHub。後面每一章的步驟和畫面，都是照 Code 寫的。

Claude 桌面版左上角，框出 Code 按鈕 — 左上角兩個按鈕：左邊是一般對話，右邊的 </> 就是 Code。

7. 選擇你的網站資料夾

點對話框上方的 No folder → Open folder…，選剛剛建的「我的網站」資料夾。

選好後，對話框上方會顯示資料夾名稱。

對話框上方的資料夾選單，框出 No folder 與 Open folder… — 先點下面的 No folder，再點選單裡的 Open folder…。之後再打開，「我的網站」會出現在 Recent 裡，直接點它就好。

8. 貼上這段話，按 Enter

提示詞 ①　環境檢查只用一次

我完全不會寫程式，想做一個個人網站，之後要上線到 Cloudflare，並備份到 GitHub。
請檢查這台電腦有沒有下面三個工具，缺的就幫我安裝：
・Git：幫網站存檔，每一版都留下紀錄
・GitHub CLI：讓你幫我建立 GitHub 備份倉庫和登入，我就不用自己去 GitHub 網站操作
・Node.js（LTS 版）：讓你把網站送上 Cloudflare、在電腦上打開預覽
每一步做之前，先用一句白話告訴我你要做什麼；需要我自己操作的地方，告訴我要按哪裡。
最後用一個表格告訴我三個工具是否都裝好了。

9. Claude 問「可以執行嗎？」時怎麼按

Claude 做某些事之前會先停下來問你，例如安裝工具、執行指令。看檔案這類不會改到東西的動作，通常就直接做，不會問。問你的時候，畫面會顯示它要做什麼，以及允許和拒絕之類的按鈕。

看一下它說要做什麼：

是在檢查、安裝工具，或在你的網站資料夾裡建立檔案 → 按允許。
看不懂它要做什麼 → 先別按，直接在對話框問它：「這一步會做什麼？會影響我電腦裡的其他東西嗎？」

成功長什麼樣

Claude 最後會給你一個表格，類似這樣：

工具	狀態
Git	✅ 已安裝
GitHub CLI	✅ 已安裝
Node.js	✅ 已安裝

你不需要看懂版本號碼或它執行過的指令。做完的打個勾，看看自己是不是都準備好了：

AI 桌面版 App 打得開，而且已經登入
GitHub 帳號註冊完成
Cloudflare 帳號註冊完成
Claude 的 Code 分頁選好了「我的網站」資料夾
Claude 回報三個工具都裝好了

卡住了？

狀況	怎麼做
收不到驗證信	看一下垃圾郵件匣和「促銷內容」分頁；等 5 分鐘還沒有，回註冊頁按重新寄送
Cloudflare 一直說驗證有問題	重新整理頁面再勾一次；還是不行，換一個瀏覽器（Chrome 或 Edge）再試
GitHub 說使用者名稱已被使用	加上數字或「-」，例如 `amy-chen-art`
Claude 說裝好了，但又說「找不到指令」	剛裝好的工具，要重開 App 才找得到。完全關掉 Claude（Windows：右下角工作列圖示按右鍵 → 結束；Mac：`⌘` `Q`），再打開，選同一個資料夾，說「請再檢查一次三個工具」
不小心按了拒絕	直接說「剛剛我按錯了，請再做一次」
安裝很久沒反應	等 5 分鐘。還是沒動靜，說「安裝好像卡住了，請檢查狀況」
公司電腦不能安裝，或跳出「需要系統管理員權限」	公司電腦常會擋安裝和上傳，後面幾章會一直卡住，建議改用自己的電腦

萬用救援任何時候都能用

我卡住了。這是我看到的畫面（附截圖）。我是完全不懂程式的新手，請告訴我發生了什麼事，以及下一步要按哪裡。能由你處理的，請直接幫我處理。

都做完了嗎？