返回指南列表

作品做好了,怎麼讓它真的有網址?部署與 DNS 一次搞懂

2026年7月31日
黃志宏
AI 導入實作

結論先講

「我買了網域,為什麼網站還是打不開?」

這個問題來自四個角色被混成一件事。一句話分清:

GitHub 放程式碼,部署平台把程式碼變成網站,網域是門牌,DNS 負責指路。

完整鏈路:

本機檔案 → 版本庫(GitHub)→ 部署平台 → DNS 指向 → 使用者打開網址

少了中間任何一段,網址都打不開。


四個角色各做什麼

角色做什麼不做什麼
GitHub保存版本、協作、回到上一版本身不是網站(但它的 Pages 可以部署靜態站)
部署平台把程式建置、發布,給你一個公開網址不提供網域
網域人看得懂的名稱,向註冊商按年租用不是主機,買了不等於上線
DNS像電話簿,告訴瀏覽器這個網域該去哪台主機不存放網站內容

兩件最容易搞錯的事

一、網域不是買斷的,是租的。

到期沒續約,網域會被釋出,別人可以註冊。而且該網域下的信箱會一起停掉——這是最痛的事故類型。

二、三者可以是不同公司。

你可以在一家註冊商買網域、用另一家管 DNS、把網站部署在第三家。分開的好處是各取所長、不被單一廠商綁住;代價是出問題時要自己判斷是哪一段壞了。


部署前:先把版本庫整理好

最小可部署的資料夾

一個純靜態網站最少需要:

my-site/
├── index.html          ← 必須叫這個名字
├── style.css
└── images/

首頁檔名一定要是 index.htmlhome.htmlIndex.html(大寫 I)都可能打不開——多數平台的檔名是區分大小寫的。

上傳前的 60 秒檢查

  • 首頁叫 index.html,全部小寫
  • 圖片路徑是相對路徑(images/photo.jpg),不是本機絕對路徑(C:/Users/...
  • 沒有把 .env 或含金鑰的檔案一起上傳
  • 資料夾與檔名沒有中文與空格

第二項最常出錯。 在本機打開好好的,上線就變成一堆破圖——因為路徑寫成了你電腦上的位置。


三個部署平台怎麼選

GitHub PagesVercelNetlify
最適合純靜態頁、文件、作品集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續約價第二年才看出長期成本,促銷價常常翻好幾倍
2WHOIS/RDAP 隱私是否適用、是否另外收費
3DNS 管理能否方便新增 A、CNAME、TXT、MX 記錄
4雙因素驗證帳號被盜,網站與信箱可能一起失守
5自動續約與付款方式到期沒續,整站與信箱會停
6轉出與解鎖流程日後能不能帶走,不被綁住
7客服語言與時區出問題時能不能真的溝通

第 1 和第 4 項最重要

續約價:第一年 99 元、第二年 990 元是常態。長期成本要看續約價。

雙因素驗證:網域帳號的權限極大——它能改 DNS,也就能把你的網站和信箱指到任何地方。這個帳號被盜,損失遠大於一般帳號。

這兩項比省下的幾百元重要得多。

想買 .tw 網域

.tw 由 TWNIC 管理,但實際購買通常透過它授權的註冊商。受理註冊機構名單以 TWNIC 官方頁面為準,不要從搜尋結果的廣告點進去。


上線後的三個常見問題

症狀通常的原因
網址打不開DNS 還在生效中(可能要等數十分鐘到數小時)
打得開但沒有 HTTPS憑證還在簽發中,或自訂網域設定沒完成
圖片破圖路徑寫成本機絕對路徑,或檔名大小寫不符

第一項是最常見的誤判。 DNS 設定變更需要時間傳播,剛改完打不開是正常的——先等一段時間再懷疑設定有錯。


一個把整條鏈路走完的最小練習

不需要買網域,用平台的預設網址就能走完全程:

  1. 做一個只有 index.html 的資料夾,裡面寫一行字
  2. 上傳到 GitHub
  3. 開啟 GitHub Pages
  4. 用它給的 *.github.io 網址打開

走完這四步,你就理解了整條鏈路。 之後接自訂網域,只是多一段 DNS 設定而已——而那一段之所以讓人卡住,通常是因為前四步的分工沒搞清楚。


常見問題

買了網域,為什麼網站還是打不開?

因為網域只是門牌,不是房子。網域要透過 DNS 指向一台實際存放網站的主機或平台,才會有東西可看。完整鏈路是:程式碼放在版本庫、部署平台把它變成可訪問的網站、網域透過 DNS 指到那個平台。少了中間任一段,網址都打不開。

GitHub Pages、Vercel、Netlify 該選哪一個?

看你的專案型態。純靜態的 HTML 作品集用 GitHub Pages 最直接;用 React 或 Next.js 這類前端框架,Vercel 的整合最順;喜歡表單處理與部署預覽工作流的,Netlify 很好用。三者都支援自訂網域與 HTTPS,第一個網站選哪個都不會錯,之後要搬也不難。

網域是買斷的嗎?

不是,是按年租用。到期沒續約,網域會被釋出,別人可以註冊——而且網站與該網域下的信箱會一起停掉。這是最常見也最痛的事故,務必開啟自動續約,並確認綁定的付款方式沒有過期。

網域、DNS、主機一定要在同一家公司嗎?

不用,三者可以完全分開。你可以在一家註冊商買網域、用另一家的 DNS 服務管理解析、把網站部署在第三家平台上。分開的好處是各取所長,也不容易被單一廠商綁住;代價是出問題時要自己判斷是哪一段的問題。

買網域時最該注意什麼?

續約價和帳號的雙因素驗證。第一年促銷價很低但第二年翻好幾倍是常態,長期成本要看續約價。而網域帳號被盜的後果極嚴重——網站和信箱可能一起失守,所以雙因素驗證一定要開。這兩項比省下的幾百元重要得多。

想把這套方法用在自己的團隊?

梵亞行銷提供企業 AI 轉型顧問與內訓服務,從流程盤點、工具選型到落地驗收,陪你把 AI 真正接進日常工作。

了解 AI 轉型顧問服務