Vercel 部署還是舊版？我以為很快，改了 3 小時
文 / Coolkid發布：2026-05-06 · 最後更新：2026-08-07閱讀約 12 分鐘
短答給趕時間的人：改完程式碼、正式網站卻還停在舊版，多半是自己電腦、GitHub、Vercel 這三層有一層沒接好，程式碼本身沒問題。三層各跑各的，任何一層斷掉，網站就不會更新。照順序查三件事：github.com 上專案最新一筆 commit（把改動送出去的那次紀錄）的時間是不是剛剛，vercel.com 的 Deployments 最新一筆是 Ready 綠燈還是 Failed 紅燈，最後用無痕視窗打開正式網址，免得瀏覽器拿舊畫面騙你。這份清單跑一遍大概 1 分鐘。我自己不知道有這三層，卡了 3 小時。
稍微熟悉 AI 寫程式之後，我又靈機一動，想幫賣童裝的老婆做一個用手機就能管庫存、又能看當月營收的小網頁。
原本以為功能不複雜，加幾個欄位、再放幾個查詢按鈕，一個晚上應該就能收工。
一開始真的很順。做完之後在自己電腦上打開，每個按鈕都會動，數字也都對。
結果我想加一個「搜尋庫存」功能的時候，撞上做網站以來最玄的一次卡關。
自己電腦看得到，網路上的正式網站卻完全沒有變化。
這一卡就是 3 小時。前半段我一直在把消失的功能補回來，後半段我開始懷疑自己是不是哪一步做錯了，偏偏翻來覆去怎麼找都找不到那一步。
這篇把那 3 小時的痛，重整成一步一步照著做的教學。
讀完你會做出三樣東西。第一樣是一個手機就能打開的庫存管理小頁，第二樣是一份部署前的 5 步檢查清單，讓你下次不用再花 3 小時在同一個地方繞。
第三樣是一套判斷方法，讓你知道什麼時候該砍掉重寫、什麼時候繼續修比較快。整套跑完大概 30 到 60 分鐘。
為什麼自己電腦看得到、Vercel 上的正式網站卻完全沒變化？
因為「自己電腦」「GitHub」「Vercel」是三個獨立的地方，不是同一個檔案。
新手最容易把這三層當成一層，但這三層其實各跑各的。
自己電腦上有，不代表 GitHub 上也有。GitHub 收到了，也不代表 Vercel 已經換成新版。
任何一層斷掉，網站就停在舊版。
我自己卡 3 小時就是這個原因。搜尋庫存的功能在自己電腦點下去會跳出結果，但 Vercel 的網址打開，畫面像沒事人一樣。
那 3 小時我一直把消失的東西補回來，也一直重傳，但每次打開網址還是同一個舊畫面。
問題不在程式碼本身，而是三層裡面有一層沒接好。
卡住的時候先不要急著叫 AI 修。退一步問自己一句話就好，到底是哪一層沒有同步？
下面 5 個問題照順序問一遍，可以定位九成的部署問題。
- 我自己電腦上的版本是最新的嗎？（編輯器右上角有沒有「未存檔」小圓點）
- 檔案有沒有真的存好？（按 Ctrl+S 確定一次）
- 有沒有送上 GitHub？（打開 github.com 的專案，看最新一筆 commit 的時間是不是剛剛）
- Vercel 有沒有重新部署？（vercel.com 打開專案看 Deployments 頁籤最新一筆狀態）
- 我打開的網址是真的正式網站嗎？（不是 localhost、不是預覽網址，是 .vercel.app 或自訂網域）
照順序問下來，第一個讓你答「不確定」或「沒有」的那一層，就是問題所在。
先修那一層，不要跳著修。
Vercel 部署不更新，最常見的 3 個原因是什麼？
下面 3 個原因，涵蓋我自己跟身邊新手九成五的部署不更新案例。從最常見的開始排。
原因 1，程式碼沒有送上 GitHub。
改完檔案之後，我以為 Vercel 會自己發現，但 Vercel 只看 GitHub 上的那個專案，沒送上去等於什麼都沒發生。
怎麼確認？在 Claude Code 跟 AI 問一句「剛剛改的東西有 push 到 GitHub 嗎」，沒有就請 AI 直接送上去。
也可以自己打開 github.com 上的專案，看最新一筆 commit 的時間是不是剛剛。
原因 2，瀏覽器的快取在騙你。
程式碼跟 Vercel 兩邊其實都對了，但你電腦上的瀏覽器為了省流量，直接把之前存下來的舊畫面拿出來給你看。
要怎麼分辨？用無痕視窗打開正式網址，無痕視窗不會吃舊快取。Chrome 按 Ctrl+Shift+N，Safari 按 Cmd+Shift+N。
無痕視窗看得到新版，那就是被快取騙了。
原因 3，Vercel 部署失敗了，但你不知道。
Vercel 收到新的 commit 會自動跑一次建置，建置失敗的時候不會主動發信通知你，除非你自己去把通知設定打開。
那要去哪裡看？打開 vercel.com 的專案，點 Deployments 頁籤，看最新一筆是 Ready 綠燈還是 Failed 紅燈。
紅燈就點進去看 Build Log，找出哪一行是紅字。
怎麼建立部署前的 5 步檢查清單？（避免下次再卡 3 小時的 SOP）
我自己卡完那 3 小時之後，整理出下面這份 5 步檢查清單。
每次要上線之前先跑一遍，每一層都確認過再送上去，就不會再出現「咦，怎麼沒更新」的那一刻。
- 步驟 1，自己電腦能不能跑？在自己電腦打開測試畫面點按鈕，看新功能會不會出現。沒出現就先在自己電腦修好，不要急著送上去。
- 步驟 2，檔案有沒有存好？看編輯器右上角有沒有「未存檔」的小圓點。有就按 Ctrl+S 存一次。Claude Code 改檔案會自動存，但你手動加的註解可能漏存。
- 步驟 3，有沒有送上 GitHub？打開 github.com 你的專案，看 Commits 那欄最新一筆的時間是不是剛剛。不是就回 Claude Code 跟 AI 講「push 到 GitHub」。
- 步驟 4，Vercel 有沒有重新部署成功？打開 vercel.com 專案 → Deployments → 最新一筆要是 Ready 綠燈。看到紅燈 Failed 就點進去看 Build Log。
- 步驟 5，用無痕視窗打開正式網址確認。避免被瀏覽器的舊快取騙。看到新版才算真的部署成功。
5 步跑下來大概 1 分鐘。
拿 1 分鐘換掉一整晚的鬼打牆，這筆帳怎麼算都划算。
什麼時候該砍掉重寫、什麼時候繼續修比較快？（我自己用的判斷方法）
卡到後面，我發現一件跟直覺相反的事。
很多時候「重寫一份乾淨的版本」，比「一個一個把錯誤修掉」還要快。
但這件事有適用條件，不是每次卡住都該重寫。那什麼時候該重寫？我自己是照兩組訊號判斷的。
下面這幾個是該重寫的訊號。
- 同一個錯誤修 3 次以上還是會再跑出來
- 改 A 功能會壞 B 功能、改 B 功能會壞 C 功能（牽一髮動全身）
- AI 自己也說「這個狀況有點詭異」「我也找不到原因」
- 前面被反覆修改超過 5 次，整個專案結構已經看不懂
- 你自己打開程式碼，都不知道哪一段在做什麼了
這幾個訊號代表繼續修就好。
- 錯誤訊息明確指到某一行、某個檔案
- 這是新加的功能第一次跑壞，沒有影響到其他部分
- Claude Code 一句話就能定位問題
- 整體結構還清楚，只是某個小功能沒接好
決定重寫之後，指令可以照下面這樣下。
「請把目前這個專案的所有功能整理成一份清單，然後乾淨地重寫一份。功能清單包含：[列出你要的功能]。重寫的時候不要參考舊版有問題的部分，從零開始寫。」
最後那句「不要參考舊版」很重要。少了這一句，AI 很容易把舊版的問題一起複製到新版去。
手機可用的庫存管理頁怎麼從 0 做到 100？（5 個步驟做完）
下面用「童裝庫存管理頁」當範例，一步一步做完整套。
做完你會有一個手機打得開的小管理頁，可以新增商品、看目前庫存、搜尋商品名稱，也可以整理當月的營收數字。
範例是童裝，但任何「小型品項管理」的需求都套得上。像是餐廳菜單、咖啡店耗材、媽媽手作的材料，或是二手交易的帳本。
- 步驟 1，跟 AI 講清楚需求。在 Claude Code 輸入：「我想做一個手機可用的庫存管理小頁。功能有四個。1) 新增商品（名稱、進貨價、售價、庫存數量）。2) 列出所有商品。3) 搜尋商品名稱。4) 看當月營收，自動加總。資料用 LocalStorage 存就好，不需要資料庫。請建 index.html + app.js + style.css，用 Tailwind CSS。不要規劃，直接建檔。」
- 步驟 2，在自己電腦看效果。資料夾裡的 index.html 直接點兩下用瀏覽器打開，新增 2-3 個商品測功能。手機版面用瀏覽器的開發者工具切成手機尺寸看（Chrome 按 F12 → Toggle device toolbar）。看不順就叫 AI 修「在 768px 以下要 ___」這種具體指令。
- 步驟 3，加搜尋功能。一句指令：「在現有 index.html 加一個搜尋框，輸入關鍵字就即時過濾商品列表，不用按 Enter。不要動其他功能。」這一步就是我自己第一次撞到 Vercel 不更新那個雷的地方，跑完記得用第 3 節的 5 步檢查清單確認一次。
- 步驟 4，部署到 Vercel。把資料夾送上 GitHub → Vercel 連專案 → Deploy。詳細做法看「第一次用 AI 做網站」那篇第 6 節。1-2 分鐘就會給你一個 .vercel.app 網址。
- 步驟 5，加到手機桌面。用手機 Safari 或 Chrome 打開 .vercel.app 網址 → 分享 → 加到主畫面。圖示會出現在桌面，點下去全螢幕打開，用起來像一個 App。老婆從此看庫存不用再打網址。
5 步跑完，你手上就有一個家人或自己每天會打開的小管理頁，整套大概 30 到 60 分鐘。
真正決定你做不做得出來的，是知不知道每一步該怎麼跟 AI 講，技術本身難不難反而是其次。
不想自己找問題、卡關就想放棄怎麼辦？
上面這套部署 SOP 跟重寫的判斷方法，自己跑得起來。
但前提是你有耐心一步一步找問題，也願意把整篇文章看完。如果下面任何一條講的就是你，可能不適合自己來。
- 卡 30 分鐘以上就會放棄，不想再繼續查
- 想要一個專屬於你領域的小工具（不是公版庫存管理）
- 需要接真的資料庫（Supabase / Firebase），而不是 LocalStorage
可以直接找 不想自己研究我教你（規劃中）。
一對一帶你從需求釐清、Claude Code 安裝、第一個專案上線，一路到 Vercel 部署 SOP，整套跑一遍。
好處是不用自己找問題，也不用看長文，卡關的時候有人帶著，5 分鐘就解決。代價是要付費。
適合沒時間自己研究、卡關就會放棄，又希望一次就把東西做好的人。
Vercel 部署不更新的完整排查流程。第一，自己電腦、GitHub、Vercel 是 3 個獨立的層，任何一層斷掉就停在舊版。第二，部署不更新最常見的 3 個原因是程式碼沒送上去、瀏覽器快取騙人、Vercel 建置失敗你不知道。第三，部署前先跑 5 步檢查清單（自己電腦 → 存檔 → 送上 GitHub → Vercel Ready → 無痕視窗驗證）。第四，該重寫的訊號是同一個錯誤修 3 次、AI 自己也說詭異、專案結構已經看不懂。第五，手機可用的庫存管理頁有完整 5 個步驟可以照著做。整套跑完大概 30 到 60 分鐘。卡關就想放棄的人，看上面 不想自己研究我教你。
名詞解釋
- Vercel
- 把網站免費發佈到網路上的服務：接上 GitHub 後，每次推程式碼就自動更新網站，個人專案免費方案就夠用。
- 部署（deploy）
- 把做好的網站或程式「推上線」讓所有人用得到的動作。
- GitHub
- 放 Git 程式碼的雲端平台，也是全世界開源專案的集散地。程式碼推上去之後可以接自動部署。
- 提交（commit）
- Git 的一個存檔點：把這次改動連同一句說明記錄下來，之後隨時可以回到這個版本。
- 快取（cache）
- 把載過的資源暫存起來，下次直接用、不重新下載。網站變快的最便宜手段之一。
- Claude Code
- Anthropic 推出的 AI 寫程式工具，裝在自己電腦的終端機裡，能直接讀寫你的檔案、跑指令，把你用中文描述的需求做成真的網站或工具。
如果內容對你有用就太好了
隨喜斗內
相關文章
▸ 常見問題
Vercel 部署完不更新怎麼辦？
從最常見的排下來檢查 3 件事。第一，程式碼有沒有送上 GitHub？打開 github.com 你的專案看 commit 時間。第二，是不是瀏覽器快取在騙你？用無痕視窗（Ctrl+Shift+N）打開正式網址。第三，是不是 Vercel 建置失敗你不知道？打開 vercel.com 專案的 Deployments 頁籤，看最新一筆是 Ready 還是 Failed。詳細的部署前 5 步檢查清單看本文第 3 節。
自己電腦看得到、Vercel 上沒變化是為什麼？
因為「自己電腦」「GitHub」「Vercel」是 3 個獨立的地方，不是同一個檔案。新手最容易把這 3 層當成一層。任何一層斷掉，正式網站就停在舊版。九成九的「自己電腦看得到、Vercel 沒變化」都是因為程式碼沒送上 GitHub，或者送上去了但 Vercel 建置失敗。檢查順序看本文第 1 節那 5 個診斷問題。
AI 寫的程式碼一直修不好要重寫嗎？
看訊號決定。該重寫的訊號是同一個錯誤修 3 次以上、改 A 壞 B、AI 自己也說「狀況詭異」、整個專案結構看不懂。可以繼續修的訊號是錯誤訊息明確指到某一行、新加的功能第一次跑壞、Claude Code 一句話就能定位問題。判斷方法詳細看本文第 4 節。重寫的指令範本是「請把所有功能整理成清單，乾淨重寫一份，不要參考舊版有問題的部分。」
Vercel 免費方案有什麼限制？
Vercel 免費方案（Hobby）對非工程師的個人專案完全夠用，有 100 GB 流量/月、無限部署次數、自動 HTTPS、自訂網域。限制是每次部署的建置時間上限 45 分鐘、商業用途要升級 Pro（US$20/月）、Serverless Function 執行時間上限 10 秒。做庫存管理頁、心理測驗、個人網站、小工具這種規模都在免費方案範圍內。我自己從 2026 年 4 月中跑到現在沒撞到任何限制。
瀏覽器一直顯示舊版怎麼辦？
用無痕視窗（Chrome 跟 Edge 是 Ctrl+Shift+N、Safari 是 Cmd+Shift+N）打開正式網址。無痕視窗不吃瀏覽器快取，看到的就是伺服器上的真實版本。如果無痕看到新版、一般視窗看到舊版，表示程式碼跟部署都對了，純粹是瀏覽器快取的問題。強制重新整理（Ctrl+Shift+R）可以逼瀏覽器重抓一次，或是清掉這個網域的 cookie 跟快取。
Claude Code 改完檔案要怎麼 push 到 GitHub？
在 Claude Code 直接跟 AI 說「把剛剛的改動 push 到 GitHub」，AI 會自己跑 git add . / git commit -m 'xxx' / git push 整套指令。第一次送上去會問 GitHub 帳號密碼或 personal access token。之後只要在 Claude Code 講「push」，AI 就會幫你送。如果跳出認證失敗的錯誤，要到 GitHub Settings → Developer settings → Personal access tokens 產生一個新的 token 貼進來。
看完這篇之前先確認:
- AI 補丁補到自己都不知道在改什麼
- 同一個 bug 改了 5 次都復活
- 願意承認沉沒成本砍掉重寫的人
- 第一次寫 code 還沒到複雜地步的人
- 有完整 git history 可以直接 rollback 的人
- 排程不允許砍掉重寫的緊急狀況