用講的，把作品變成網站

第 2 章

先上線再說

預計時間 20 分鐘 這章結束時你有 自己的網址，任何人都打得開

觀念：為什麼先上線一個簡單的版本

你可能以為要先把網站做漂亮，最後再上線。這門課反過來：先上線一個簡單但好看的「名片版網站」，再慢慢改成完整的網站。

原因有兩個：

  1. 最麻煩的設定，趁有耐心的時候做完。第一次上線要你在 Cloudflare 和 GitHub 各按一次允許，這是整門課唯二要你自己按的地方，而且只做一次。現在網站內容還很少，就算出錯也很單純。
  2. 早一點拿到成就感。今天結束前，你就有一個像樣的網站、一個真的網址，可以傳給朋友看。之後每一章，都只是在這個網址上「改得更好」。

版本與存檔

每次你說「上線」，AI 都會把網站目前的樣子存成一版，送進 GitHub 倉庫。

就像遊戲的存檔點：存了 10 次，就有 10 個版本可以回去。所以之後你可以大膽地改，改壞了就請 AI 拿上一版出來。

動手：這章分三步

  1. 請 AI 做一個名片版網站（5～10 分鐘）
  2. 請 AI 把網站上線，你在 Cloudflare 和 GitHub 各按一次允許（10 分鐘）
  3. 練習一次說「上線」（3 分鐘）

開始前，打開 Claude 桌面版的 Code 分頁，確認上方選的是「我的網站」資料夾。

步驟 1：做一個名片版網站

名片版網站就像一張放在網路上的名片：你的名字、一句話介紹、你在做的三件事，和一個讓人聯絡你的按鈕。內容不多，但看起來就是一個正式的網站。

下面是一個插畫家的範例。先複製下來，把「內容」那四行換成你自己的，再貼給 Claude。還沒想好也沒關係，直接貼範例看看效果，之後再改。

提示詞 ②　名片版網站只用一次 
請在這個資料夾幫我做一個「名片版網站」，之後我會再改成完整的網站。
內容：
・名字：Amy 陳
・一句話介紹：接案插畫家，畫溫暖的手繪插畫
・我在做的三件事：品牌包裝插畫、社群貼文插圖、繪本插畫
・聯絡方式：Email hello@example.com、Instagram @amy.draws
設計：
・版面乾淨好看，配色要適合上面的內容，電腦和手機上看起來都要舒服
・只有一頁，放在 public 資料夾裡的 index.html，純 HTML 和 CSS 就好，不需要其他工具或套件
做好後打開預覽給我看。

貼上後，Claude 會做好檔案，並在旁邊打開一個預覽畫面。

步驟 2：請 AI 把網站上線

先想好網站的英文名稱：用英文小寫和「-」，例如 amy-illustration。它會變成你的免費網址的一部分：amy-illustration.你的帳號.workers.dev。之後換成自己的網域時，名稱不會影響新網址。

貼上這段，把〔　〕換成你的名稱：

提示詞 ③　上線設定只用一次 
請幫我把網站上線到 Cloudflare，並備份到 GitHub，網站名稱用「〔你的網站名稱，例：amy-illustration〕」：
1. 用 Git 在這個資料夾建立存檔紀錄，之後每次上線都存一版。
2. 建立 Cloudflare Workers 需要的 wrangler.jsonc，名稱用上面的網站名稱。網站檔案放在 public 資料夾，不需要 build。
3. 檢查沒有密碼、金鑰或私人資料會被上傳。
4. 用 npx wrangler login 連上我的 Cloudflare 帳號，再用 npx wrangler deploy 把網站上線。需要我在瀏覽器按允許、或回答問題時，告訴我要按哪裡。
5. 在我的 GitHub 建立一個「私人」倉庫當備份，名稱同上，把網站推上去。需要我登入時，一步一步告訴我要按哪裡。
6. 在資料夾建立 AGENTS.md 當交接筆記，記下網站網址，以及：以後我說「上線」，你就先檢查網站（電腦版和手機版都不能跑版）、存一版、用 wrangler deploy 上線、推到 GitHub 備份，最後打開網址確認真的變成新版，再告訴我網址。再建立 CLAUDE.md，裡面只寫一句「請先閱讀並遵循 AGENTS.md」。以後有要記的事，都只改 AGENTS.md。
7. 完成後給我網站網址。

Claude 會開始建立檔案。過程中有兩個地方要你在瀏覽器按一下，這是整門課唯二要你自己按的地方：

第一個：在 Cloudflare 按一次 Authorize

  1. Claude 會自動打開瀏覽器，跳出 Cloudflare 的頁面。沒登入的話，先用第 1 章註冊的帳號登入。
  2. 畫面標題是「Wrangler wants to access your account」。Wrangler 是 Cloudflare 官方的上線工具，左邊列的一長串權限不用一一看懂。確認右邊是你的帳號，按藍色的 Authorize。
  3. 看到登入成功的畫面，就可以關掉這個分頁，回到 Claude。
Cloudflare 的 Wrangler 授權頁，框出 Authorize 按鈕
Cloudflare 的授權頁：右邊是你的帳號，按框起來的 Authorize。

第二個：在 GitHub 按一次授權

  1. Claude 會給你一組 8 碼代號（像 ABCD-1234），並自動打開瀏覽器。
  2. 在瀏覽器登入 GitHub。
  3. 如果出現「Confirm access」：GitHub 在確認真的是你本人。到信箱找 GitHub 剛寄來的驗證碼，填進框框，按 Verify。沒收到的話看一下垃圾郵件匣。
  4. 把 Claude 給的代號貼到畫面上，按 Continue。
  5. 按綠色的 Authorize github。
  6. 看到「Congratulations」就完成了，回到 Claude。
GitHub 的 Confirm access 畫面，框出驗證碼欄位與 Verify 按鈕
GitHub 的 Confirm access：不一定會出現。出現的話，填信箱收到的驗證碼，按 Verify。

怎麼知道這一步成功了？Claude 會給你一個 ….workers.dev 的網址，點開就是你的網站 🎉 它也會給你一個 github.com/你的帳號/你的網站名稱 的連結，點開能看到檔案，就表示備份好了。你不用看懂裡面的東西。

步驟 3：練習一次說「上線」

設定已經完成，現在來試試以後每天都會用的流程：幫網站加一個開場動畫，讓網站一打開，內容就慢慢浮現出來。直接複製貼上，不用改任何字：

複製貼上給 AI 
幫網站加一個開場動畫：網站打開時，名字和下面的內容依序由下往上慢慢浮現。動作要柔和、不要太花俏，然後打開預覽給我看。

預覽沒問題的話，說：

提示詞 ④　日常上線之後每次改完都用這句 
上線

Claude 會照它在交接筆記寫下的步驟做：檢查 → 存一版 → 上線到 Cloudflare → 備份到 GitHub → 打開網址確認。

Claude 說完成後，馬上重新整理你的網址，就會看到內容一段一段浮現出來。用手機打開也看一次。

從現在起，你不用再登入 GitHub 和 Cloudflare 了。

成功長什麼樣

你現在有一個真的網站了，網址可以直接傳給朋友。下一章我們來想清楚，完整的網站該長什麼樣子。

卡住了？

狀況怎麼做
瀏覽器沒有跳出 Cloudflare 頁面說「瀏覽器沒有打開，請給我網址，我自己貼到瀏覽器」
按了 Authorize，Claude 還在等回到 Claude 說「我已經按了 Authorize」；還是不行，說「請重新登入 Cloudflare」
Claude 問你要取什麼 workers.dev 名稱用英文小寫回答，例如你的名字或品牌名，它會出現在你的網址裡
上線失敗，出現一堆紅字不用看懂，直接說「上線失敗了，請看錯誤訊息，修好再上線」
Claude 說沒有權限推到 GitHub說「請重新幫我登入 GitHub」，照步驟 2 再授權一次
GitHub 寄的驗證碼一直沒收到看一下垃圾郵件匣和「促銷內容」分頁；還是沒有，在畫面上按重新寄送
GitHub 畫面說代號過期代號有時間限制。回到 Claude 說「代號過期了，請給我新的」
網址打開是舊的瀏覽器可能記住了舊畫面，關掉分頁重新打開；還是舊的，說「網址還是舊版，請檢查上線有沒有成功」
手機打開空白或很怪截圖貼給 Claude：「手機打開是這樣，請修好再上線」
萬用救援任何時候都能用 
我卡住了。這是我看到的畫面（附截圖）。我是完全不懂程式的新手，請告訴我發生了什麼事，以及下一步要按哪裡。能由你處理的，請直接幫我處理。

都做完了嗎？