Vercel 部署教學：從 HTML 到 GitHub 自動部署與上線驗收

當你使用 ChatGPT、Claude、Cursor 或其他開發工具產出網站後，本機瀏覽器能看見畫面，不代表其他人能透過網際網路存取。部署就是把可運作的網站檔案交給託管平台，取得公開網址，並建立更新、檢查及復原的流程。

本文提供兩條可實作路徑。路線 A：Vercel Drop，適合首次發布單純的靜態網站；路線 B：GitHub 串接 Vercel，適合會持續更新的網站與團隊。你將使用本文所附的獨立 Demo ZIP 練習，不碰任何正式客戶資料、現有網站或 DNS。

先看結論：部署完成的標準不是看到 Success

至少要達成 5 件事：① 取得能由未登入訪客開啟的公開網址；② 首頁沒有 404；③ 手機上排版正常；④ 更新後可以判斷哪一版正在上線；⑤ 若要使用自訂網域，確認 DNS 與 HTTPS 都正確。首次練習只要求前 3 項，不需要一開始就修改正式網域。

Vercel 是什麼？適合哪些網站？

Vercel 是網站部署與託管平台，能提供 Git 來源部署、Preview 預覽部署、Production 正式部署、HTTPS 與自訂網域等能力。它尤其適合靜態網站、Next.js 及其他現代前端框架。請不要把 Vercel 誤解成現有 WordPress／PHP 主機的一鍵搬家工具。若原網站依賴 WordPress 核心、WooCommerce、PHP 外掛與後台，可保留既有 WordPress 主機，另外把使用 Next.js 製作的前台或獨立微網站部署到 Vercel；這屬於另一種架構專案，必須單獨評估。

使用情境可分為：

使用條款提醒。 Vercel Hobby 僅供非商業的個人使用。若用於收費課程、商用 Landing Page、企業網站或受託的營利專案，需評估 Pro 或 Enterprise 及最新費率、額度與條款。部署前請核對當時的官方方案與使用條款。

實作前準備：讓檔案結構簡單且可驗證

本頁提供 下載 Demo ZIP（僅含 index.html），內含一個可離線開啟的 index.html。它沒有 API、資料庫、追蹤碼、私密 Token，也不依賴付費套件。若自行準備網站，請確認 index.html 位於要部署的專案根目錄；檔名大小寫必須正確。第一次操作不使用公司正式網域，避免影響既有網站。

任務 1｜在本機確認 Demo 可以運作

操作目的： 先排除程式原始檔案問題，避免部署後才發現內容本來就無法顯示。

執行步驟：

1. 解壓縮 tdr-vercel-demo-v1-2.zip，確認根目錄有 index.html。
2. 在瀏覽器開啟該檔案，應看見標題「TDR DEPLOY LAB」與「你的第一個線上網站」。
3. 將瀏覽器縮窄至手機寬度，檢查文字、按鈕與區塊未超出螢幕。
4. 檢查專案中沒有 .env、帳密、API Key、真實客戶資料或正式網域設定。

預期結果： 本機可閱讀 Demo，HTML 內容正常呈現。

驗收： 找到 index.html；瀏覽器無明顯排版錯誤；無敏感資料。

錯誤處理： 若顯示原始碼而不是網頁，確認副檔名是 .html，而不是 .txt。若找不到頁面，重新檢查 ZIP 的檔案路徑及解壓縮方式。部分網頁若依賴 fetch() 讀取本地檔案，直接用 file:// 開啟會有跨來源限制，則需改用本機 HTTP 伺服器；本次 Demo 不需要。

路線 A｜Vercel Drop：不用終端機也能發布網站

Vercel 在 2026 年 6 月推出 Vercel Drop，能透過瀏覽器上傳檔案、資料夾或 ZIP。它可以部署靜態網站，也能依專案情況辨識框架並建置。重要限制：每次 Drop 都會新建一個專案。因此它適合第一次展示與臨時原型；持續更新同一個網站，最好再接上 Git。

任務 2｜上傳 ZIP 並取得公開網址

操作目的： 從本機 HTML 取得真正可公開瀏覽的網站網址。

執行步驟：

1. 使用自己的測試用 Vercel 帳號登入，前往 https://vercel.com/drop 。
2. 上傳 tdr-vercel-demo-v1-2.zip，或將已解壓縮的 Demo 資料夾拖放至頁面。請勿上傳整份 TDR 教學封包，因為教學封包的根目錄不是靜態網站根目錄。
3. 根據當時介面選擇個人或測試團隊，輸入不包含公司敏感資訊的專案名稱，例如 tdr-vercel-demo。
4. 檢查顯示的專案內容及設定，按下 Deploy。該操作會正式建立新的 Vercel 專案與公開部署，執行前應確認上傳的檔案全是示範素材。
5. 部署成功後複製系統提供的 *.vercel.app 網址，在未登入 Vercel 的無痕視窗開啟。若出現登入要求，先確認選到的是預期的 Production 網址，再檢查 Deployment Protection；維持既有保護，不要為了測試直接關閉。

預期結果： 瀏覽器顯示「你的第一個線上網站」，網站網址採 HTTPS，且由 Vercel 託管。

驗收： 公開 Demo 的首頁須讓未登入訪客看見「你的第一個線上網站」，桌機與手機皆可閱讀，並記錄網址與檢查時間。若刻意保留存取保護，只能記為「受保護部署可存取」；登入後能開啟，不等於公開網址驗收通過。

錯誤處理： 若出現 404，先核對本 Demo 的 index.html 是否位於 ZIP 最上層，以及平台辨認的根路徑。一般靜態網站若沒有頂層 index.html，Drop 可讓你選擇根網址要載入的頁面，仍須確認所選首頁正確。若 Deployment Failed，查看 Deployments 中對應的 Build Logs；不要不斷重複上傳而忽略第一次的錯誤訊息。

為什麼不建議每次改版都重新 Drop？

因為每次 Drop 會建立新的專案，不等於更新原有專案。今天分享的網址與明天重新 Drop 得到的網址，可能屬於兩個不同專案。若要逐次維護正式網站，請使用 GitHub、CLI 或既有專案的適當部署流程，避免正式網址與部署紀錄四散。

路線 B｜GitHub 串接：每次更新都能預覽與管理

GitHub 不是讓網站自動上線的唯一辦法，但非常適合在多人或長期專案中擔任原始碼版本管理。Vercel 可以將 GitHub repository 匯入成專案；Vercel 會對正式分支（常見為 main）建立 Production 部署，對其他分支與 PR 建立 Preview 部署。這能讓團隊先檢查變更，再更新正式網站。

任務 3｜建立 GitHub repository 並匯入 Vercel

操作目的： 建立能持續更新、回溯變更的部署管線。

執行步驟：

1. 在 GitHub 個人帳號下建立一個全新的練習用 repository，名稱可用 tdr-vercel-demo；選擇 Private 可降低測試過程中不必要的曝光，但請記住 Private Git repository 不代表部署網址必然不公開。
2. 將 tdr-vercel-demo-v1-2.zip 解壓後的 index.html 放在 repository 根目錄，提交至 main 分支。切勿提交 .env 或其他憑證。
3. 打開 https://vercel.com/dashboard ，選 Add New → Project 或 New Project（文字可能隨介面更新），連接 GitHub 並選取該 repository；授權倉庫範圍以這個練習專案為限。若改用組織的 private repository，先核對方案限制：Hobby 不支援從 GitHub 組織私有倉庫部署，請評估符合需求的方案，不要為了繞過限制公開內部程式碼。
4. 確認 Root Directory 指向包含 index.html 的根目錄。這個 Demo 是純 HTML，Framework Preset 選 Other；展開建置設定，開啟 Build Command 的 Override 並將指令留空，跳過建置。
5. 本 Demo 沒有 package.json 與依賴套件，不需自訂 Install Command。Output Directory 保留 Other 的預設：有 public 目錄就提供該目錄，否則提供根目錄 .；本 Demo 沒有 public。確認後選 Deploy。以上僅適用這份純 HTML 範例，Next.js、Vite 等專案應保留框架所需的建置設定。
6. 建立 update-heading 測試分支，將畫面的一小段文字修改並提交；查看 Vercel 的 Preview Deployment。確認正確後，透過 Pull Request 合併到 main，並驗證 Production 更新。

預期結果： repository 有原始碼；Vercel 專案連結 GitHub；測試分支有 Preview；合併後 Production 顯示更新後內容。

驗收： 記錄 Git commit SHA、Preview URL、Production URL、Build Status，以及確認內容的時間。不同分支各自產生預覽網址是預期行為。

錯誤處理： 找不到 repository 時，檢查 GitHub App 的倉庫存取授權。若部署成功但仍 404，檢查 Root Directory、Framework Preset 和輸出目錄。若修改沒有出現在 Production，檢查是否已合併至設定的正式分支，而不是停留在 Preview 分支。

設定依據：Vercel 官方建置與跳過建置說明；方案限制見 Git 部署文件。

另一種選擇：Vercel CLI

已熟悉終端機的讀者可選用 CLI，不是新手首次部署的必需步驟。

# 確認已安裝 Node.js 與 npm，然後安裝 Vercel CLI
npm install -g vercel

# 在專案根目錄登入並連結
vercel login
vercel link

# 建立預覽部署
vercel deploy

# 通過驗收後才部署正式環境
vercel deploy --prod

vercel deploy 預設建立 Preview；加上 --prod 才是直接部署正式環境。若已連接 GitHub，建議主要使用 PR → Preview → Merge → Production 的路徑，避免在未經審核時直接覆蓋正式版本。

進階設定：環境變數、自訂網域與 HTTPS

任務 4｜檢查正式部署設定，但不要動到既有網站

操作目的： 知道如何將測試網站升級成可維護的正式服務。

環境變數： 進入 Vercel 專案的 Settings → Environment Variables，按需要建立 Production、Preview 或 Development 的設定。2026 年 8 月後，介面新增了 Config 與 Secret 類型；API Token 應使用 Secret，非敏感公開設定才使用 Config。注意：變更環境變數只對新的部署生效，必須重新部署。Secret 類型不能阻止程式把值寫進公開網頁或瀏覽器端程式碼。 Next.js 的 NEXT_PUBLIC_ 與 Vite 的 VITE_ 公開變數不應放入私密金鑰；需要密鑰的 API 呼叫應留在伺服器端，且不把值印到日誌或回傳給瀏覽器。這個純 HTML Demo 不需要環境變數，不要為了教學硬加 API Key。

自訂網域： 在專案 Settings → Domains 加入自己有權管理的測試網域。Vercel 通常會提示頂層網域使用 A 記錄、子網域使用 CNAME，但不得直接複製教學中的通用 DNS 值作為正式設定；應以該專案畫面或 vercel domains inspect 所顯示的指定目標為準。若 DNS 由 Cloudflare 等第三方管理，請在原 DNS 服務商依 Vercel 提示新增或修改相應記錄。完成後檢查 domain verification 與 HTTPS 憑證。

給既有商業網站的警告： 不要為了完成本教學而更動正在營運的根網域或 www DNS，避免 WordPress、WooCommerce、收款流程、電子郵件及 SEO 受到影響。應優先使用獨立測試子網域，先完成 DNS 現況備份、影響評估、回復方案、權限核准後才動手。

驗收： DNS 顯示已驗證；HTTPS 憑證正常；手機及桌機可開啟；既有網站、郵件與服務未受影響。若 DNS 尚未生效，對照 Vercel 指示及權威 DNS 查詢結果，確認不是 DNS 記錄互相衝突。測試階段不要求執行此任務。

版本回復：更新出問題時怎麼處理？

這段只在自己的測試專案練習。先有兩次成功的 Production 部署，記下目前與前一版的網址、commit 及可辨識的畫面文字，再依 Vercel Instant Rollback 官方步驟操作。

1. 進入專案 Overview，在 Production Deployment 區塊選 Instant Rollback。
2. 選擇已驗證可用的舊部署，核對受影響的網域與版本，再選 Continue，確認內容後按 Confirm Rollback。
3. 重新開啟對外使用的正式網址，核對舊版文字及主要連結；保留回復時間與目標版本。

Hobby 可回復到緊接上一個部署；其他方案的可選範圍依官方資格條件。回復會沿用舊建置的設定，不會套用之後修改的環境變數，也不會替你還原外部資料庫或 CMS。回復後，新推送不會自動取代已回復的正式版本；修復程式並完成預覽驗證後，依官方 Undo a rollback 流程恢復正常上線。這份 Demo 沒有資料庫，若實際專案有資料變更，須另外安排相容性與資料復原。

最常見的 6 種部署失敗情況

WordPress 與 Vercel 的架構差異

若你現有網站是 WordPress + WooCommerce + PHP，本教學不建議直接改掉主機或主題後把整站移至 Vercel。合理的獨立試驗是：WordPress 與交易系統維持原位，新的純前端展示頁或 Next.js 原型部署到 Vercel 的測試專案。若未來要導入 Headless WordPress，才評估透過 API 讀取內容、預覽流程、快取失效、媒體管理、會員／交易、SEO 與成本。這是架構轉換，不是一次 Deploy 就能取代 WordPress。

完成後的驗收表

截圖與影片公開前： 優先只錄網站內容區；另外檢查每一張圖、每一段影像與音軌是否包含帳號名稱、私人信箱、其他分頁、通知、檔案路徑、API Key 或帳務資料。局部遮罩後仍要重看最終輸出；內部 QA 記錄不要放入公開下載 ZIP。

常見問題 FAQ

Q1：沒有 GitHub 也能部署嗎？ 可以。初次展示靜態網頁時使用 Vercel Drop；需反覆更新才連接 GitHub。

Q2：Vercel Drop 的 ZIP 是本教學 ZIP 嗎？ 不是。請上傳 tdr-vercel-demo-v1-2.zip，而不是包含文章、素材、QA 的完整 TDR 出版封包。

Q3：部署是不是代表我買到自己的網域？ 不是。Vercel 提供 vercel.app 專案網址。自訂網域是另一步驟，需要持有網域並完成 DNS 驗證。

Q4：所有前端程式都能完全不用修改就部署嗎？ 不一定。框架版本、建置指令、輸出目錄、Node.js 相容性、環境變數及第三方 API 都會影響部署結果。

Q5：我可不可以把商用網站放在免費 Hobby？ 不應這樣假設。官方 Hobby 條款限制個人非商業用途，商業使用請確認符合 Pro／Enterprise 條款。

Q6：Vercel 可以直接取代現有的 WordPress 主機嗎？ 不能視為直接替代。WordPress PHP、外掛、會員與資料庫等需要另行安排；Headless 是獨立的技術專案。

下一步：不只部署成功，而是讓它能安全更新

首次練習只完成 Demo 上線並留下網址與 QA 紀錄。進階練習再建立 GitHub 分支、Preview／Production、環境變數與測試子網域。對企業而言，理想成果不是任何人都能快速按 Deploy，而是每次改版都能知道誰改了什麼、驗證了什麼、何時上線，以及遇到故障怎麼回復。

官方來源與校對依據

1. Vercel Drop：https://vercel.com/changelog/vercel-drop （2026／06／12）
2. Vercel Drop 操作入口：https://vercel.com/drop
3. Deploying Git Repositories：https://vercel.com/docs/git
4. GitHub integration：https://vercel.com/docs/git/vercel-for-github
5. Configuring a Build：https://vercel.com/docs/builds/configure-a-build
6. CLI deployment：https://vercel.com/docs/projects/deploy-from-cli
7. Setting up a Custom Domain：https://vercel.com/docs/domains/set-up-custom-domain
8. Environment Variables：https://vercel.com/docs/environment-variables/managing-environment-variables
9. Config／Secret update：https://vercel.com/changelog/environment-variables-now-use-config-and-secret-types （2026／08／24）
10. Vercel Hobby plan：https://vercel.com/docs/plans/hobby
11. Fair Use Guidelines：https://vercel.com/docs/limits/fair-use-guidelines
12. Headless WordPress：https://vercel.com/kb/guide/wordpress-with-vercel
13. Troubleshoot 404：https://vercel.com/kb/guide/how-to-debug-404-errors