結論先講
「我買了網域,為什麼網站還是打不開?」
這個問題來自四個角色被混成一件事。一句話分清:
GitHub 放程式碼,部署平台把程式碼變成網站,網域是門牌,DNS 負責指路。
完整鏈路:
本機檔案 → 版本庫(GitHub)→ 部署平台 → DNS 指向 → 使用者打開網址
少了中間任何一段,網址都打不開。
四個角色各做什麼
| 角色 | 做什麼 | 不做什麼 |
|---|---|---|
| GitHub | 保存版本、協作、回到上一版 | 本身不是網站(但它的 Pages 可以部署靜態站) |
| 部署平台 | 把程式建置、發布,給你一個公開網址 | 不提供網域 |
| 網域 | 人看得懂的名稱,向註冊商按年租用 | 不是主機,買了不等於上線 |
| DNS | 像電話簿,告訴瀏覽器這個網域該去哪台主機 | 不存放網站內容 |
兩件最容易搞錯的事
一、網域不是買斷的,是租的。
到期沒續約,網域會被釋出,別人可以註冊。而且該網域下的信箱會一起停掉——這是最痛的事故類型。
二、三者可以是不同公司。
你可以在一家註冊商買網域、用另一家管 DNS、把網站部署在第三家。分開的好處是各取所長、不被單一廠商綁住;代價是出問題時要自己判斷是哪一段壞了。
部署前:先把版本庫整理好
最小可部署的資料夾
一個純靜態網站最少需要:
my-site/
├── index.html ← 必須叫這個名字
├── style.css
└── images/
首頁檔名一定要是 index.html。 叫 home.html 或 Index.html(大寫 I)都可能打不開——多數平台的檔名是區分大小寫的。
上傳前的 60 秒檢查
- 首頁叫
index.html,全部小寫 - 圖片路徑是相對路徑(
images/photo.jpg),不是本機絕對路徑(C:/Users/...) - 沒有把
.env或含金鑰的檔案一起上傳 - 資料夾與檔名沒有中文與空格
第二項最常出錯。 在本機打開好好的,上線就變成一堆破圖——因為路徑寫成了你電腦上的位置。
三個部署平台怎麼選
| GitHub Pages | Vercel | Netlify | |
|---|---|---|---|
| 最適合 | 純靜態頁、文件、作品集 | Next.js、React、Vite | 靜態站、表單型網站 |
| 與 GitHub 串接 | 原生 | 匯入版本庫 | 匯入現有專案 |
| 分支預覽 | 偏正式流程 | 分支/PR 預覽成熟 | Deploy Preview |
| 預設網址 | *.github.io | *.vercel.app | *.netlify.app |
| 自訂網域與 HTTPS | 支援 | 支援 | 支援 |
沒有唯一冠軍
第一個純 HTML 網站 → GitHub Pages 最直接 用 React/Next.js → Vercel 整合最順 喜歡表單處理與部署預覽工作流 → Netlify
三者都支援自訂網域與 HTTPS,第一個網站選哪個都不會錯,之後要搬也不難。
關於價格
免費額度與方案內容會變動。正式商用前要重新讀當日的官方定價頁,確認流量、建置分鐘數、函式呼叫與團隊協作的限制。
不要背數字,要學會找官方 Pricing 頁——這件事比記住任何當期方案有用。
買網域:真正該比的七件事
多數人只比「第一年最低價」,那是最不重要的一項。
| # | 要看什麼 | 為什麼 |
|---|---|---|
| 1 | 續約價 | 第二年才看出長期成本,促銷價常常翻好幾倍 |
| 2 | WHOIS/RDAP 隱私 | 是否適用、是否另外收費 |
| 3 | DNS 管理 | 能否方便新增 A、CNAME、TXT、MX 記錄 |
| 4 | 雙因素驗證 | 帳號被盜,網站與信箱可能一起失守 |
| 5 | 自動續約與付款方式 | 到期沒續,整站與信箱會停 |
| 6 | 轉出與解鎖流程 | 日後能不能帶走,不被綁住 |
| 7 | 客服語言與時區 | 出問題時能不能真的溝通 |
第 1 和第 4 項最重要
續約價:第一年 99 元、第二年 990 元是常態。長期成本要看續約價。
雙因素驗證:網域帳號的權限極大——它能改 DNS,也就能把你的網站和信箱指到任何地方。這個帳號被盜,損失遠大於一般帳號。
這兩項比省下的幾百元重要得多。
想買 .tw 網域
.tw 由 TWNIC 管理,但實際購買通常透過它授權的註冊商。受理註冊機構名單以 TWNIC 官方頁面為準,不要從搜尋結果的廣告點進去。
上線後的三個常見問題
| 症狀 | 通常的原因 |
|---|---|
| 網址打不開 | DNS 還在生效中(可能要等數十分鐘到數小時) |
| 打得開但沒有 HTTPS | 憑證還在簽發中,或自訂網域設定沒完成 |
| 圖片破圖 | 路徑寫成本機絕對路徑,或檔名大小寫不符 |
第一項是最常見的誤判。 DNS 設定變更需要時間傳播,剛改完打不開是正常的——先等一段時間再懷疑設定有錯。
一個把整條鏈路走完的最小練習
不需要買網域,用平台的預設網址就能走完全程:
- 做一個只有
index.html的資料夾,裡面寫一行字 - 上傳到 GitHub
- 開啟 GitHub Pages
- 用它給的
*.github.io網址打開
走完這四步,你就理解了整條鏈路。 之後接自訂網域,只是多一段 DNS 設定而已——而那一段之所以讓人卡住,通常是因為前四步的分工沒搞清楚。
常見問題
買了網域,為什麼網站還是打不開?
因為網域只是門牌,不是房子。網域要透過 DNS 指向一台實際存放網站的主機或平台,才會有東西可看。完整鏈路是:程式碼放在版本庫、部署平台把它變成可訪問的網站、網域透過 DNS 指到那個平台。少了中間任一段,網址都打不開。
GitHub Pages、Vercel、Netlify 該選哪一個?
看你的專案型態。純靜態的 HTML 作品集用 GitHub Pages 最直接;用 React 或 Next.js 這類前端框架,Vercel 的整合最順;喜歡表單處理與部署預覽工作流的,Netlify 很好用。三者都支援自訂網域與 HTTPS,第一個網站選哪個都不會錯,之後要搬也不難。
網域是買斷的嗎?
不是,是按年租用。到期沒續約,網域會被釋出,別人可以註冊——而且網站與該網域下的信箱會一起停掉。這是最常見也最痛的事故,務必開啟自動續約,並確認綁定的付款方式沒有過期。
網域、DNS、主機一定要在同一家公司嗎?
不用,三者可以完全分開。你可以在一家註冊商買網域、用另一家的 DNS 服務管理解析、把網站部署在第三家平台上。分開的好處是各取所長,也不容易被單一廠商綁住;代價是出問題時要自己判斷是哪一段的問題。
買網域時最該注意什麼?
續約價和帳號的雙因素驗證。第一年促銷價很低但第二年翻好幾倍是常態,長期成本要看續約價。而網域帳號被盜的後果極嚴重——網站和信箱可能一起失守,所以雙因素驗證一定要開。這兩項比省下的幾百元重要得多。