← 回到網站製作上架教學 · 無需指令FROM YOUR DESK TO THE WEB

讓別人拿到網址，
就能看到你的網站。

適用留白匯出的單頁 HTML 或多頁上線包。先用 GitHub 保存檔案，再交給 Vercel 提供公開網址；從註冊到日後改版，都可以跟著這裡做。

下載成品→放上 GitHub→匯入 Vercel→驗收公開網址
已完成 0 / 6 步勾選代表你自行確認完成；不是系統連線驗證。記錄只保存在這個瀏覽器。

需要文章管理、購物或會員？前往 WordPress 建站工作區 →

01　先準備正確的檔案

  1. 回到留白，檢查手機版、聯絡連結與內容，再按「匯出網站」。
  2. 一頁式可按「匯出網站」取得 index.html；多頁式請到「聯絡與上線」按「下載完整上線包 ZIP」。先解壓縮，不能只把 ZIP 丟到 GitHub。
  3. 另外保存「可編輯備份」與提示詞供自己使用。單頁上傳 index.html；多頁上傳解壓縮後的整套網站檔案並保持目錄結構。API 金鑰、.env、工作台後端與私人備份都不要放進去。
GitHub 倉庫最外層
index.html       首頁（一定要有）
services.html    服務頁（若有匯出）
其他頁面及資源   保留原本名稱與路徑
sitemap.xml      網站地圖（若有匯出）
robots.txt       搜尋引擎規則（若有匯出）

不要多包一層 website-launch 資料夾；若保留外層資料夾，後面需把它設為 Root Directory。

匯出的照片已嵌入網頁。這是靜態店家網站，沒有會員資料庫、收款或內建表單後端。

02　註冊 GitHub，建立網站倉庫

  1. 到 GitHub 註冊，完成信箱驗證；已有帳號直接登入。
  2. 開啟 建立 repository。名稱用好辨識的英文，例如 my-business-site。
  3. 選擇 Public 或 Private。Public 的檔案任何人可看；Private 不代表部署後的網站也是私人。再按 Create repository。
  4. 在空倉庫點「uploading an existing file」；已有檔案時用 Add file → Upload files。將網站檔案放在最外層，填寫版本說明（例如「第一次上線」），按 Commit changes 保存；如果使用新分支，需完成 Pull Request 合併到正式部署分支。

完成判斷：倉庫最外層能看見 index.html，點開能看到 HTML 內容。GitHub 網頁上傳單檔上限 25 MiB；過大時先回留白縮減圖片或改用 Git 工具。GitHub 官方上傳說明

03　建立 Vercel 帳號與專案

  1. 到 Vercel 註冊，可使用 GitHub 登入。
  2. 依網站用途選方案。店家商業網站請選允許商業使用的方案；Hobby 限個人、非商業用途。確認當下費用後再訂閱。官方方案限制
  3. Dashboard 選 Add New → Project，連接 GitHub，授權 Vercel 存取要部署的倉庫，再按 Import。找不到倉庫時，檢查 GitHub App 的倉庫授權範圍。
  4. 這份純 HTML 網站：Framework Preset 選 Other；Root Directory 指向 index.html 所在位置；Build Command 開 Override 並留空。本工具的匯出檔沒有 public 資料夾，可將 Output Directory 設為 .（根目錄）；不需要 npm install 或 npm run build。
  5. 按 Deploy，等待狀態顯示 Ready。這份靜態網頁不需要設定 AI 金鑰。

GitHub 整合 · 官方建置設定

04　確認真的公開可用

開啟專案的正式 Production 網址（通常是 vercel.app），用無痕視窗及手機測試，不要只看登入中的預覽。

若要求登入，檢查是否拿到 Preview 而非 Production 網址，以及專案的 Deployment Protection。要綁自己的網域，進入專案 Domains，依畫面到網域商設定 DNS；網域購買另計。

05　之後如何更新、改壞怎麼辦

在留白開啟原草稿，修改後重新匯出網站；多頁版本須更新整包檔案，移除不再使用的舊頁面前，先安排舊網址轉址。將 GitHub 裡的同名檔案替換並 Commit；已連接的 Vercel 會依分支設定部署。確認最新正式部署成功後，再以無痕視窗驗收。

更新出問題時先保留舊版，在 Vercel Deployments 檢查上一次成功部署，使用可用的回復功能；同時把 GitHub 檔案恢復正確版本，避免下次更新再次發布錯誤。保留每次的可編輯備份，才能回到留白繼續修改。

06　自己的網域與搜尋設定

先用 Vercel 提供的網址確認能用，再做這一步。網域由你自己的帳號購買與續費。

  1. Vercel 專案 → Settings → Domains，加入你的網域。到網域商的 DNS 管理頁，逐筆填入 Vercel 當下顯示的紀錄，不照抄別人的 IP。保留既有 Email 用的 MX／TXT 紀錄。
  2. 等待網域驗證與 HTTPS 就緒，再用無痕視窗確認主網域及 www 導向正確網站。
  3. 回留白「聯絡與上線」填正式網站網址，補上搜尋標題、摘要及分享圖片；正式版選「允許索引」。重新下載完整上線包並更新 GitHub。
  4. 開啟正式網址的 /sitemap.xml、/robots.txt 確認可讀。在 Google Search Console 驗證網站所有權後提交 sitemap。公開上線不等於立刻收錄或保證排名。

Vercel 網域官方步驟 →

希望像聊天一樣，請 AI 帶你做？

把匯出的網站檔案交給你正在使用的 AI，再複製下面指令。若使用有檔案／瀏覽器操作能力的程式助理，可協助執行；一般聊天工具會提供操作指引。登入、方案選擇與付費由你自己完成。

卡住時先看這裡

開啟網站出現 404

確認檔名是小寫 index.html，沒有變成 index.html.txt；Root Directory 指向它所在的資料夾；部署狀態已成功。

Vercel 找不到我的 GitHub 倉庫

確認兩邊使用的是預期帳號與團隊。檢查 Vercel 的 GitHub App 是否有存取該倉庫的權限；組織倉庫可能需要管理員核准。只授權這次需要的倉庫即可。

頁面更新後還是舊內容

核對 Commit 是否進入 Vercel 設定的正式分支、最新部署是否成功、你打開的是否是 Production 網址。先用無痕視窗重開，不要反覆重建專案。

有登入或金流，也照這樣上傳就好嗎？

這份教學部署展示網站。留白工作台的登入、草稿同步與購物後端不是 HTML 裡的功能。購物服務需另外部署後端與設定商家帳號，再填入正式購物網址。請看 金流串接教學；目前 SQLite 金流後端需要持續磁碟，不能把 preview.py 直接丟進這份 Vercel 靜態網站。

Build 失敗

此匯出檔沒有 npm 專案，請用 Other 並清空 Build Command。閱讀部署日誌，別任意新增套件。

為什麼沒有免費商用承諾？

方案條款與額度可能調整，Vercel Hobby 目前限制個人非商業用途。店家接案或營利用途，請確認適用方案。

GPT／Claude 幫我改完後如何上架？

將「提示詞」頁的完整建站指令與匯出檔交給 AI，要求交付完整 index.html。先本機打開測試，再按上述流程更新。一般聊天介面不會自動取得你的 GitHub 或 Vercel 操作權限；需要登入授權或自己上傳。

流程閱讀參考：黃志弘的 GitHub／Vercel 建站教學。本頁依留白實際匯出方式重新編寫，操作及商用方案以官方文件為準。

教學核對日期：2026-10-03。介面名稱可能調整，以官方文件為準。此頁提供指引，尚未替你建立帳號或部署。