在 local 端設計好網頁、測試好功能之後，我們接下來就要把網站上線到 WWW 了！

對於一些比較複雜、需要前後端分離的網站來說，可能會需要再 AWS / GCP / Azure 之類的雲端平台上佈建後台，但對於一個簡單的 static website 來說，其實已經有相當多免費的資源可以使用，讓我們可以在極少成本、甚至零成本的情況下上線網站。

在這裡先叉出個話題，其實現在許多 SaaS、PaaS、IaaS 都有免費的 quota 可以使用，預算有限的情況下可以好好的利用，有興趣的可以參考 free-for-dev 這個 Repo 的內容呦。

主機

想到網頁上線，就會覺得得額外架設或是買一台主機來放網頁，但對於 static website 來說，放在 Github Page 或是 Cloudflare Page 上已經綽綽有餘。

以 Github 為例，對於某些純 html/css/javascript 來說，只要把檔案丟上去 Repo 即可。但如果是需要透過一些 Static Website Generator 編譯 的網站，像是 Hugo、Hexo 這種專門做 Blog 的，就需要每次完成文章後重新編譯一次，把 public 或是 dist 資料夾丟上去。

另一個方法是透過 Github Action 或是 Netlify 這種可以讀取你的原始檔案並協助編譯的平台。

另外，目前有些網頁開發會仰賴大量的 dependencies，也可以透過像是 Parcel.js 這種 bundle 工具，幫你把所有相關的套件 bundle 到一個 js 檔案裡面。

買網域（選擇性）

以 Github Page 為例，如果 Repo 的根目錄下有 index.html 的網站，就可以透過 https://<user_name>.github.io/<repo_name> 直接連上。不過，如果你想幫你的網站掛上一個好記或好看的網址、讓網址看起來很專業的話，就需要額外的購買網域。

依照頂級域名（Top-level Domain, TLD）的不同，網域的價格從一年幾百塊到幾萬塊都有。除了常見 .com 或是 .tw 之外，近年來比較流行 便宜 的域名像是 .me、.io 等，價格幾乎都在千元台票以下，算是負擔得起的價格。

至於如何挑選域名的供應商？對某些人來說，會直接選最便宜的；而某些人考量售後服務，會選擇有中文客服好溝通的；而有些人則是考慮域名的加值服務，像是我以前的網域都是在 Gandi.net 上購買的，除了可以開台灣的發票，讓我懷抱睡醒🀄️兩百萬的夢想之外，還有提供每個域名各三組的 webmail 服務，在衡量自己架 mail server 的成本後，這個價格其實是相當實惠的。

不過從今年 12 月開始，Gandi 的 webmail 服務將轉成完全收費制，所以和其他域名商的價差就顯而易見的拉出來了。在能省則省的精神之下，最近我已經轉而使用更便宜的 namecheap 供應商，然後把 webmail 的服務轉交給 Migadu 處理。

HTTPS / CDN

首選當然是 Cloudflare，對於小網站來說，免費的方案已經相當足夠。

畢竟都這個年代了，連詐騙釣魚網頁都會有 HTTPS 的鎖頭了，沒有 HTTPS 實在是說不過去。

範例

舉個例子，我這次在 namecheap 上購買一個名為 domain.url 的域名、然後將處理好的檔案放在 Github 上，透過 Netlify 發布，並加掛 Cloudflare 的 HTTPS。

1. 首先要做的，就是將檔案丟到 Github 上。如果還是對 git 很不熟的，可以用 Github Desktop 上傳就好。

2. 在 Netlify 裡面匯入上你的網頁 Repo。如果沒有特別設定的話，就選擇掛在 main 這個 branch 上；而如果有額外的 branch 放編譯好的網頁，就選擇這個 branch。一切就緒後，就會得到一串看起來有意義但其實沒意義的網址，像是 beautiful-chocolate-123456.netlify.app 這樣的東西。沒意外的話，直接點進去 應該 就是你的網頁了，如果失敗，便代表你的 html 檔案位置或檔名錯了、或是 html 本身有問題，無法成功的被讀取。

3. 接著，在 namecheap 裡找到買好的 domain.url，選擇 Manage，將 NAMESERVERS 改成 Custom DNS，並指向 Cloudflare（我記得都是這兩組）：

   • barbara.ns.cloudflare.com
   • mitch.ns.cloudflare.com
   • 
   • 不同的域名供應商的設定可能都不盡相同，但通常都是叫做「Name Server」或是「名稱伺服器」。像是隔壁的 Gandi 則在這裡設定：
   • 

4. 回到 Netlify，把 domain.url 貼到 Domain management 裡面，設為 Primary domain，並加一個以 www 開頭的，即 www.domain.url。之所以會這樣是因為網址不一定要以 www. 為開頭。像是現在這個網站就是直接 https://ithelp.ithome... 。不過，還是會有人習慣先輸入 www.，此時就必須讓輸入含 www. 的使用者自動轉址回不包含 www. 的 Primary domain。

   • 此時的 Netlify 的 Domain management 裡應該要有三個東西，分別是：
   • Netlify subdomain：預設的，像是上面提到的 beautiful-chocolate-123456.netlify.app
   • Primary domain：domain.url
   • Redirects automatically to primary domain：www.domain.url
   • 

5. 最後，在 Cloudflare 裡，創建一個新網站，名為 domain.url，在 DNS 設定中，手動輸入兩個 CNAME 的紀錄：

   • 一組名稱為 @，即 domain.url，目標為 Netlify 的網址 beautiful-chocolate-123456.netlify.app
   • 一組名稱為 WWW，目標為 Netlify 的網址 beautiful-chocolate-123456.netlify.app

6. 在 Cloudflare 的 SSL/TLS 設定裡，將 SSL/TLS 加密模式 改成關閉之外的任一項，我自己是選彈性。

   • 

7. 輸入 domain.url，就能連上嚕！

Google Analytics & Search Console（選擇性）

最後，如果是一個超級數據控，好奇自己網站的點擊來源和去向、或是有行銷方面的考量，需要分析流量數據，則可以在 html 裡加上 Google Analytics 的追蹤 Tag，並且創立一個 Google Search Console 的資源，讓 Google 去分析網站的流量。

這部分的準度就是見仁見智了，畢竟現在許多瀏覽器都內建反追蹤的功能，或製造很多斷點和不自然的代理數據，對於資料的真實性是需要審慎評估的。