用 Github Pages 為網站做網域跳轉

最近剛好遇到某個網站需要換網域，需要將舊的網域自動跳轉為新的。希望可以自動跳轉到新的網域並保留原路徑，舊的網域也要提供 https。這種需求可以透過 Github Pages 來達成。

建立 Github Repo#

我們先建立一個 Github Repo，新增檔案 index.html。使用 meta refresh 為首頁進行跳轉。

1
<!DOCTYPE html>
2
<html>
3
<head>
4
  <meta http-equiv="refresh" content="0; url=https://new.example.com">
5
</head>
6
</html>

再來新增一個 404.html。Github Pages 預設找不到的路徑都會回傳 404.html，在這裡透過 JS 跳轉到新路徑。

1
<!DOCTYPE html>
2
<html>
3
<head>
4
  <script>
5
    var url = new URL(window.location.href);
6
    url.host = "new.example.com";
7
    window.location.href = url.href;
8
  </script>
9
</head>
10
</html>

設定 Github Pages#

到 Repo 設定 > Pages，設定 Branch，並在 Custom domain 填寫舊的網域。

設定 DNS#

將舊的網域 CNAME 設定到 Github 就完成了。參考官方文件。

1
old.example.com IN CNAME <username>.github.io

SEO#

你可能會好奇，任意路徑使用 404 做 JS 跳轉，會不會影響 SEO ，可以參考官方文件。下圖為官方文件，可以看出使用 301、308、meta fresh 0 秒，都會被視為永久跳轉。所以 index.html 首頁跳轉 SEO 是沒問題的。

除了首頁以外，其他路徑則是透過 404.html 做 JS 跳轉，這邊 SEO 就會比較差，瀏覽器會先收到來源是 404，再去執行 JS。Google 也提醒，JS 語法要放在 head 中，使用 JS 重新導向，也可能導致機器人轉譯失敗。

在 Github Pages 上做所有網址的跳轉，就會有上述缺點，有資源的話，還是以 NGINX、Apache 做後端 301 跳轉會比較好。