免費網頁架設與自訂網域串接教學手冊 Free Web Hosting & Custom Domain Connection Guide

使用 Cloudflare Pages 託管靜態網頁 (HTML, CSS, JS) 並串接自訂網域。 Host static pages (HTML, CSS, JS) and connect custom domains using Cloudflare Pages.

為什麼選擇這個方案？ Why Choose This Solution?

成本 0 元Cost $0

除了購買網域的費用外，完全免費。 Completely free except for the domain purchase cost.

極致效能High Performance

使用 Cloudflare 全球 CDN 節點，速度極快。 Extremely fast using Cloudflare's global CDN nodes.

安全防護Security

自動提供免費 SSL 憑證 (HTTPS 小鎖頭)。 Automatically provides free SSL certificates (HTTPS lock).

無上限Unlimited

頻寬無上限，適合個人、作品集、形象頁。 Unlimited bandwidth, ideal for portfolios and company sites.

第一階段：準備工作 Phase 1: Preparation

在開始之前，請確認您擁有以下三樣東西： Before starting, please ensure you have the following three items:

  • 1
    網頁檔案Web Files
    您已經寫好的網頁檔案資料夾，必須包含 index.html。 A folder containing your web files, which must include index.html.
  • 2
    Cloudflare 帳號Cloudflare Account
    請至 Cloudflare 官網免費註冊。 Please register for free on the Cloudflare official website.
  • 3
    網域管理權限Domain Management Access
    您購買網域的網站登入帳號 (例如: GoDaddy, Namecheap, PChome, Gandi 等)。 Login credentials for where you bought your domain (e.g., GoDaddy, Namecheap, etc.).

第二階段：上傳網頁至 Cloudflare Pages Phase 2: Upload to Cloudflare Pages

使用最簡單的「直接上傳」方式（若熟悉 Git 亦可連接 GitHub）。 Using the simplest "Direct Upload" method (or connect GitHub if you know Git).

1
登入 Cloudflare Dashboard (控制台)。 Log in to the Cloudflare Dashboard.
2
左側選單點選 "Workers & Pages" (或顯示 Pages)。 Click "Workers & Pages" in the left menu.
3
點擊藍色 "Create" (建立)，選擇 "Pages" 標籤。 Click the blue "Create" button, select the "Pages" tab.
4
選擇 "Upload assets" (上傳資產)，點擊 "Create project"。 Select "Upload assets", then click "Create project".
5
Project name: 輸入英文名稱 (這將成為暫時網址，如 my-site.pages.dev)。 Project name: Enter an English name (this becomes your temp URL, e.g., my-site.pages.dev).
6
點擊 "Select folder" 或直接拖曳網頁資料夾。 Click "Select folder" or drag and drop your web folder.
注意：資料夾內必須包含 index.html。 Note: Folder must contain index.html.
7
上傳後，點擊 "Deploy site" (部署網站)。 After upload, click "Deploy site".
8
完成！獲得類似 [https://your-project.pages.dev](https://your-project.pages.dev) 的網址。 Done! You get a URL like [https://your-project.pages.dev](https://your-project.pages.dev).

第三階段：設定自訂網域 (推薦方法) Phase 3: Set Custom Domain (Recommended)

推薦：將 DNS 完全託管給 Cloudflare Recommended: Full DNS Management via Cloudflare (最穩定、免費 SSL 最快) (Most stable, fastest free SSL)

步驟 1: 將網域加入 Cloudflare Step 1: Add Site to Cloudflare
  1. 回到 Cloudflare 首頁，點擊 "Add a site" (新增網站)。Go to Cloudflare dashboard, click "Add a site".
  2. 輸入網域 (如 example.com)，點擊 "Continue"。Enter domain (e.g., example.com), click "Continue".
  3. 選擇 "Free" 方案，點擊 "Continue"。Select "Free" plan, click "Continue".
  4. Cloudflare 掃描 DNS 後，確認無誤點擊 "Continue"。Cloudflare scans DNS; confirm and click "Continue".
步驟 2: 更改名稱伺服器 (Nameservers) - 關鍵步驟 Step 2: Change Nameservers - Critical Step

Cloudflare 會提供兩組新的 Nameservers，例如： Cloudflare provides two new Nameservers, e.g.:
bob.ns.cloudflare.com / lola.ns.cloudflare.com

  1. 前往您的網域註冊商 (如 GoDaddy, Namecheap)。Go to your domain registrar (e.g., GoDaddy, Namecheap).
  2. 找到 DNS 管理或 Nameservers 設定。Find DNS Management or Nameservers settings.
  3. 選擇 "自訂 DNS" 或 "Change Nameservers"。Select "Custom DNS" or "Change Nameservers".
  4. 刪除舊紀錄，填入 Cloudflare 提供的兩組網址。Remove old records, enter the two URLs provided by Cloudflare.
  5. 儲存設定 (生效需幾分鐘至24小時)。Save settings (propagation takes minutes to 24 hours).
步驟 3: 在 Pages 專案中綁定網域 Step 3: Bind Domain in Pages Project
  1. 回到 Cloudflare 控制台，進入剛剛建立的 Workers & Pages 專案。Return to Cloudflare, enter your Workers & Pages project.
  2. 點擊 "Custom domains" (自訂網域) 分頁。Click the "Custom domains" tab.
  3. 點擊 "Set up a custom domain"。Click "Set up a custom domain".
  4. 輸入您的網域 (如 example.com)。Enter your domain (e.g., example.com).
  5. Cloudflare 會自動偵測並設定 DNS 紀錄 (CNAME)。Cloudflare detects and sets DNS records (CNAME) automatically.
  6. 點擊 "Activate domain" (啟用網域)。Click "Activate domain".

第四階段：檢查與完成 Phase 4: Check & Finish

  • 1. 等待生效 1. Wait for Propagation

    狀態可能顯示 "Initializing" (初始化中)。SSL 憑證通常需 5-15 分鐘簽發。 Status may show "Initializing". SSL usually takes 5-15 mins to issue.

  • 2. 測試連線 2. Test Connection

    在瀏覽器輸入 [https://example.com](https://example.com)。確認網頁顯示且有鎖頭符號。 Enter [https://example.com](https://example.com) in browser. Confirm page loads and lock icon appears.

常見問題 (FAQ) Common Questions (FAQ)

建議設定。 讓使用者輸入 example.com 和 [www.example.com](https://www.example.com) 都能連上。在 Custom Domain 設定中分別加入這兩筆即可指向同一個專案。 Recommended. Ensure users can connect via both example.com and [www.example.com](https://www.example.com). Add both entries in Custom Domain settings to point to the same project.

全球 DNS 更新需要時間。嘗試清除瀏覽器快取，或使用手機 4G/5G 網路測試。可使用 DNSChecker 查詢。 Global DNS updates take time. Try clearing browser cache or testing with mobile 4G/5G. Use DNSChecker to verify.

回到 Cloudflare Pages 專案頁面，點擊 "Create new deployment" (建立新部署)，再次上傳新資料夾即可覆蓋舊版本。 Return to Cloudflare Pages project, click "Create new deployment", and upload the new folder to overwrite the old version.

若不想將 DNS 管理權交給 Cloudflare (例如怕影響公司 Email)，可用 CNAME 指向。但需驗證 TXT 紀錄且較複雜。新手強烈建議使用「更改 Nameservers」方法。 If you don't want Cloudflare managing DNS (e.g., to avoid affecting company Email), use CNAME. Requires TXT verification and is complex. Beginners are strongly advised to use the "Change Nameservers" method.