這篇講你現在看的這個網站是怎麼來的。從 2026-11-01 寫規劃書、買網域，到 11-02 傍晚，網站的程式和內容整理都是 Claude Code 做的。Claude Code 是 Anthropic 做的 AI 代理，能在你的電腦上開檔案、寫檔案、執行指令。
文中的數字都是 2026-11-02 的狀態。
先講結論
我做的事很少：用一句話說哪裡不對，從 Claude 給的做法裡挑一個，看過本機預覽，再說「部署」或「先不要」。查原因、改程式、上線後核對、寫紀錄，都是 Claude Code 做的。
| 兩天下來 | 數量 |
|---|---|
| 程式的提交紀錄（每改完一批存一次） | 33 次 |
| 開發日誌裡記了版本號的部署 | 24 次 |
| 已公開的文章（含這篇） | 23 篇 |
| 遊記 | 5 篇 |
| 做過的系統 | 6 個 |
網站現在有攝影與遊記、文章、教學、做過的系統、資源分享、標籤、關於我，還有最早做的名片頁。
開工前：先寫一份規劃書
第一步不是做網站，是寫規劃書：給誰看、第一版做什麼、哪些先不做、要花多少錢。初稿 v0.1 是 Codex（OpenAI 做的 AI 代理）寫的，交給 Claude Code 審成 v0.2：第一版範圍縮小，旅行專輯、留言、電子報移到第二階段；費用表也更正了幾項。同一天我又加需求，變成 v0.3。
v0.3 定下的前提，後面每次改動都照著走：
- 第一個交付物是名片頁。名片印一個 QR 碼，對方用手機一掃，30 秒內看懂我是誰、會做什麼、喜歡什麼。
- 台灣和中國都要打得開。不載入 Google Fonts、Google Analytics、YouTube 內嵌這類在中國常被擋的外部資源，字型用裝置內建的（蘋果裝置是蘋方，Windows 是微軟正黑體）。正式網址只用自己的網域，Cloudflare 附的測試網址關掉，因為社群回報那種網址在中國被封（規劃書註明沒有官方證實）。
- 做成靜態網站。每一頁事先做成固定的檔案，有人來看就直接送出去，不用資料庫，也不用一台一直開著的主機。Astro 負責把文章和照片「建置」成網頁檔，再「部署」到 Cloudflare，也就是把檔案傳上去讓大家看得到。
- 公司的案子只寫做法和能力，不寫業務內容。
其他基本設定：
- 網域在 Cloudflare 買：
vincent5588.com（vincentwen.com已被註冊走）。一年 US$11.17，其他服務目前都是免費方案。綁網域時，Cloudflare 會自動建好 DNS 紀錄，也就是告訴全世界「這個網址要到哪裡找」的設定。 - 程式放在 GitHub 的私人 repo。repo（程式庫）放一個專案的全部檔案和修改紀錄，設成私人就只有我和我授權的人看得到。我本來想把專案放進雲端硬碟給幾台電腦共用；Claude 提醒 git（記錄每次修改的版本工具）的資料夾被雲端同步會壞，最後改成每台電腦各自從 GitHub 下載。
- 網域信箱轉寄到我的 Gmail。測試要從另一個帳號寄，自己寄給自己會被 Gmail 藏起來。
第一個交付物：名片頁
名片頁第一版放了照片、三個興趣（攝影、AI 工具實驗、知識管理）、一個「存入通訊錄」的按鈕，再產生印在名片上的 QR 碼。半小時後我問：「圖不能點？」Claude 改成點照片就在同一頁放大，在本機用手機尺寸試過，我說「上線」才部署。
名片 QR 碼指向 /card，網站 QR 碼指向首頁。這兩個網址寫進專案說明「永遠不改」，名片印出去就收不回來了。
工作怎麼進行
每一輪都差不多：
- 我在對話裡打一句話，常常沒有標點，也不講要怎麼改。
- Claude 先找原因，給兩三個做法，標出它建議哪個。我挑一個，或說「照建議」。
- Claude 動手改，在本機開網站預覽，手機寬度、桌機寬度、深淺色都看過；文章類的先傳 PDF 給我看。本機預覽是在我自己電腦上把網站跑起來，只有我看得到。
- 我說「部署」或「上線」，它才上傳，上線後再逐頁核對，並寫進開發日誌，連同我的原話。
部署一定是我開口。有一次我說「LOGO 沒換成新的」，Claude 查了線上的檔案跟本機完全相同，判斷是瀏覽器留著舊圖，就在圖示網址後面加 ?v=2 讓瀏覽器重新下載。我說「先不要」部署，它就留在本機，等之後我說要部署才一起上線。
一句話改出來的東西
| 我說的話 | 後來怎麼改 |
|---|---|
| 「整個網站太像求職站了」 | Claude 找出原因：版面照履歷的順序排，首頁先放職稱、專長標籤、寫信按鈕。給兩個改法，我選「個人為主 經驗經歷弱化一些」 |
| 貼了兩個 Wix 攝影範本，說「改成攝影為主」 | 首頁改成滿版照片壓大字標題、一趟旅程一張大照片。只參考版面，不改用 Wix：主機在國外、中國不好打開，範本圖文也有版權 |
| 網站上不要出現我的中文姓名 | 全站改成 Vincent Wen。建置出來的 98 個檔案用三種文字編碼掃過，線上 22 頁也逐頁掃過。這條寫進專案說明 |
| 「Vincent5588 可以設計一個藝術簽名 然後拿來當個人網站LOGO」 | Claude 先用 Mac 內建的手寫字型做了 5 款，同時提醒這樣做的 LOGO 不適合註冊商標，最好用本人簽名。我改傳自己的簽名，它描成向量圖 |
| 「版面沒對齊 可以考慮用BENTO GRIDS 方式 設計新潮一點」 | 原因是首頁下半部限寬 760 像素、上半部 1120 像素。改成便當盒格：大小不一的方格拼成一整塊，手機一欄、平板兩欄 |
| 「網站的色塊顏色比較重一點 希望換 明亮一點的」 | 卡片淡色底整體提亮，主色卡片改成亮藍，白字對比 5.3:1 |
| 「字型可以選大小」「網站是否設計 黑色跟 白色 主題」 | 頁首加深淺色切換和三段字級，選擇記在讀者自己的瀏覽器 |
| 「照片跟圖片 上LOGO浮水印」 | 自己的照片和圖壓上簽名浮水印，原圖另存；別人授權的照片、QR 碼、流程圖不壓 |
| 「網站相關的TAG也要建立」 | 加了標籤頁，「卡片盒」「Zettelkasten」這類同義寫法合成一個標籤 |
有一次是我改變主意
我問：「首頁 旅程 圖集 無限增長 怎樣控制在三到五本？輪流？」Claude 給兩個選項，我先選「固定最新 4 趟」，部署完看了又改口：「不要固定 輪巡四趟」「萬一太久沒拍 都是一樣的 哈哈」。現在每次打開首頁，會從全部旅程隨機挑 4 趟、照日期排。兩次提交只隔三分鐘。這種事很難在規劃書裡先想到，看到成品才知道。
有一次是 Claude 誤會我
首頁的攝影理念，我給了一句自己的話。Claude 第一次只加了逗號就放上去，我重貼那段時，它又以為我只要它擬的那段，把我的句子拿掉了。我回：「我寫的你沒有幫我修改阿」。我要的是整理，不是照貼。它改寫成三版，我選了第一版：「只有在旅途上，我才能真正放下工作。」一句話的回饋省事，有時也會被讀錯，看到不對就再說一句。
一個藏了很久的版面錯誤
我說：「實作案例 下面分割線 太貼近了 資源跟LOGO也太貼近了」。Claude 查下去，是全站的問題。
網頁外觀由樣式表（CSS）控制。有一條規則要主內容區上方留 32 像素、下方留 64 像素；另一條寫給所有標著 wrap 的區塊，把上下留白設成 0。主內容區剛好也標著 wrap，而瀏覽器規定「寫給某一類區塊」的規則優先於「寫給某種元素」的規則，於是 0 那條贏了。每一頁主內容的上下留白其實都是 0，直到我覺得那兩頁太擠才被找出來。
修法是把規則改寫成 main.wrap，讓它更具體、優先順序更高，旁邊加一行註解寫明原因，免得之後又被改回去。
怎麼讓它好維護
我在意的是：之後想加一篇遊記、換幾張照片，不必從頭跟 AI 解釋。
內容放在我本來就在用的地方
- 遊記文字在 Obsidian 筆記庫，一趟一篇。Obsidian 是我平常寫筆記的軟體，筆記就是電腦裡的文字檔。篇首寫「網站: 發布」才會上網站。這原本放在照片資料夾裡，是我問了一句「遊記 的檔案不放到VAULT？」才搬過來（vault 是 Obsidian 對筆記庫的叫法）。
- 照片在我的數位暗房資料夾。我問「照片上傳有後台嗎？」，Claude 建議不做網頁後台，暗房資料夾就是後台：每趟從完稿照裡挑幾張，複製到那趟的「網站精選」資料夾。
- 一個指令把兩邊接起來。跑
npm run photos，它讀遊記和精選照片，照片長邊縮到 2048 像素、拿掉 GPS 位置和相機資料、壓浮水印，產生網站上的遊記頁。
我又說過「所有網站發布的內容可以存一份到VAULT內」。現在部署指令是三步連在一起：建置、上傳到 Cloudflare、把公開的文章、做過的系統、關於我寫一份回筆記庫，只寫有變動的檔案。那份是副本，要改內容一律改網站專案。
三份紀錄
| 紀錄 | 放哪裡 | 寫什麼 |
|---|---|---|
| 開發日誌 | 筆記庫 | 每次改了什麼，新的在最上面，附上我的原話 |
| 專案總覽頁 | 筆記庫 | 現在的狀態：網址、技術、費用、各區塊做到哪、有什麼風險 |
AGENTS.md |
網站程式庫 | 給下一個 AI 工作階段看的專案說明，記已經踩過的坑 |
照 Claude Code 官方文件，專案裡只有 AGENTS.md、沒有 CLAUDE.md 時，它會讀這份當作專案指示。裡面記的都是具體的事，例如 Astro 鎖在 7.4.1 版（這台電腦的執行環境不夠新，下一版跑不起來）、網站不放中文姓名、QR 碼網址永遠不改、換了 LOGO 要把圖示網址的 ?v= 號碼加一。最後一條就是那次「LOGO 沒換成新的」留下來的，下次換圖，不管哪個 AI 接手都不用再查一遍。
還是要人來做的事
- 說「部署」。上傳、推上 GitHub、部署都等我開口，規劃書也把「確認預覽與正式發布」寫成我的責任。
- 挑照片、挑題目。九寨溝那趟 247 張完稿，Claude 做成編號縮圖總表看完，挑 12 張候選放大確認，建議 10 張，我回「照這 10 張」。它也能替照片評星，但放哪幾張、寫什麼題目由我決定。
- 有人臉的照片。黃龍那天的 11 張都是人像，整組不選；候選照片放大檢查有沒有路人；有別人入鏡的活動照片要先問過。Claude 寫的遊記只寫照片和拍攝時間看得到的事，不寫我的感受，也不寫同行的人。
- 工作上的內容。寫 AI 助理那個系列之前，我先講清楚：「公司相關機密都不要寫 寫過程流程 應用 可以先寫第一批」。AI 起草交回後，Claude 逐篇掃過公司名稱、內部系統、同事、主機帳號和投資內容。一篇畫圖工具比較文的原稿圖拿工作上的例子當範例，就換成通用的名稱重畫。「做過的系統」不放人名、內部位址、公司規模數字，還在規劃中的事不寫成成果。
還沒做完的也記在總覽頁：中國網路要等我下次去才能實地測、Google 搜尋的網站驗證要我自己登入、聯絡表單和站內搜尋都還沒做。
想自己試
不用會寫程式，但要先準備幾樣東西：
- 網域和帳號。網域可以在 Cloudflare 買，同一個帳號就能部署；再開 GitHub 帳號，repo 設成私人。付款和授權自己操作。
- 一頁規劃。寫清楚誰會來看、第一頁是什麼、有哪些限制（例如中國要打得開）、哪些先不做。可以請一個 AI 寫初稿，另一個 AI 挑毛病。
- 從一頁開始。先做一頁，上線、能用，再長出其他頁。
- 一句話講感覺就好。我說「太像求職站了」，沒講怎麼改，Claude 自己找原因、給改法。請它標出建議的那個，你來挑。
- 部署前先看本機預覽，手機寬度和桌機寬度都看；你說「部署」它才上傳。上線後再請它核對線上頁面：我就是這樣才發現，Mac 自動產生的隱藏檔
.DS_Store也被傳上去了，後來加進排除清單。 - 留紀錄。每改一次寫一筆日誌，附上當時的原話；另外留一頁「現在的狀態」；踩過的坑寫進給 AI 看的說明檔。
- 祕密不進程式庫。密碼和 API 金鑰（讓程式登入服務用的一串密碼）不貼進對話、不存進 repo。Cloudflare 的部署工具 wrangler 登入後拿到的權限比部署需要的大，不用時可以登出。照片上傳前拿掉 GPS，上線後掃一遍有沒有不該出現的名字。
參考資料
- Astro 官方文件：Why Astro?、Deploy your Astro Site to Cloudflare
- Cloudflare 官方文件：Static Assets（Workers 靜態資源）、Custom Domains（自訂網域）、Cloudflare Registrar（網域註冊）
- Claude Code 官方文件：Overview、How Claude remembers your project（
CLAUDE.md與AGENTS.md） - GitHub 官方文件：About repositories（私人 repo 誰看得到）
官方文件為 2026-11-02 查閱，服務內容與價格以官網為準。