前言

為什麼要換 web hosting service?

就只是因為 Cloudflare pages 在 deploy 上所花的時間更短了。

以及我的網域一直都用 Cloudflare 託管,所以乾脆就讓他一條龍作業了。

但注意 Cloudflare 是有限制的,畢竟是免費服務。

  1. Deploy up to 500 times per month

    每個月 500 次的部署

  2. Maximum of ten (10) custom domains

    最多 10 個自訂網域

  3. Contain up to 20,000 files

    最多 20,000 個檔案

  4. Single Cloudflare Pages site asset is 25 MiB.

    一個 Page 最多只能有 25 MiB 的大小

過程

Git repository

首先,建立一個 Repository。但這不是必須的。

Cloudflare 在 2022/05 以後,開放直接上傳檔案,不需要直接跟 Github/GitLab 做連結才能 Deploy。如果是較小的檔案,可以直接上傳就好。

由於 Blog 會有更新需求,為求方便還是使用 Git 託管。

由於 Github 的 Private Repository 免費了,所以選擇用 Github 作為 Blog 的倉庫。

跟建立 Github Pages 不同的是,上傳的是 Blog 的整個 Workspace,而不是透過 hugo 產生的 public folder。

Cloudflare

首先你要有個帳號。可以的話最好還有個網域託管在 Cloudflare。

進到 Pages 分頁,建立一個 Project。這裡我選擇 Connect to Git,方便做網站的版本管控,不過也可以選擇其他選項。

Cloudflare 提供 Github 以及 GitLab 可供連線,這邊就選擇 Github。

在連接 Repository 時,推薦只給 Cloudflare 授權 Blog 的 Repository。

因為是第一次授權,授權完之後會跳回原本的畫面。再點選一次 Connect to Git 繼續設定。

選擇 Repository,然後開始設定。

Project name 以及 Production branch 都可以自行設定,Framework preset 設定為 Hugo,其餘的都可以保留預設值。

重點!!

在環境變數中,必須要指定 hugo 的版本 以我的設定來說,HUGO_VERSION=0.97.3。可以透過hugo --version來確認自己使用哪個版本。

最後點一下 Save and Deploy 就會開始建立網站啦。

(Optional) Domain

可以直接在 Custom domains 新增自訂網域,這邊就填入自己的網域。

總之最後看到 Active 亮綠燈,以及查看 DNS 紀錄中有相關的網址設定,就大功告成了。

Reference

  1. https://developers.cloudflare.com/pages/get-started/