Zone Lin
文章33
標籤32
分類7
Cloudflare Page 架站教學

Cloudflare Page 架站教學

Cloudflare Page 使用上跟 GitHub Page 類似
就差在 GitHub Page 只能用靜態網站檔案,用框架產生的靜態網站就必須先編好才能推上去儲藏庫
Cloudflare Page 可以支援編譯

設定步驟

官方文件 https://developers.cloudflare.com/pages/

簡單步驟總結:

  1. 在 GitHub 或 GitLab 建立網頁用的儲藏庫 (repository)

  2. Cloudflare page 連結 GitHub 或 GitLab

  3. 在 Cloudflare 設定網站用的 domain name

完成🎉


設定 Git 儲藏庫

首先到 GitHub 或 GitLab 建立網頁用的儲藏庫 (就基本的 git 操作,這邊就不多作教學)

網站內容跟 GitHub Page 一樣,只要是靜態網站都可以,不管是直接寫或是用框架產生都可以
比 GitHub Page 好的一點是,可以直接推送框架的程式上去,部署時編譯 (但免費版有限制)

GitHub Page 跟 Cloudflare page 也不需要太糾結要用哪個,反正都免費都可以先用看看
例如本網站的內容就是用 Hexo 框架產生,先推送到 GitHub Page,Cloudflare page 用同個儲藏庫當來源

https://zonelin.github.io/ 也可以找到本站

Cloudflare 新增 page 專案

登入 Cloudflare 在 page 設定內新增一個專案 
Cloudflare add project

登入 GitHub 或 GitLab 選擇要用的存儲庫 repository
Cloudflare add project

設定要觸發抓取的分支 (建議把部署跟開發中做不同的分支)
Cloudflare add project

如果是想要推送後,再用框架產生靜態網頁可以調整這邊設定
Cloudflare add project

點儲存部屬 Save and Deploy 後會開始從 Git 存儲庫抓程式碼下來編譯
如果是靜態頁面,就只有抓下來 (畢竟我們的 Build setting 是空的)
完成會自動給一個自動分配的網址,例如本站就是 blog-public-3io.pages.dev

需要自訂網址可以到專案的 Custom domains 設定,免費版有使用上限 免費版限制
Cloudflare domain

到這邊就完成了🎉

用 Cloudflare 還有個好處,Cloudflare 會自動套 Web Analytics
Cloudflare web analytics

免費版使用限制

根據官方文件

每個帳號可以件幾個網站專案、預覽板本好像沒限制

建置

免費版能從 GitHub 抓程式碼重新建置每個月500次,建置時間不得過20分鐘
推送程式碼到 GitHub 也會觸發重新建置

所以我習慣在本機把 hexo 建制好,再推送到 GitHub,省編譯時間

Domains

最多 10 個自訂 domain

檔案

單一個網站專案,最多到 2 萬個檔案
單一檔案、素材最大 25MB

有放圖片要注意下容量

Headers

最多 100 header 規則

重導向規則

最多 100 個


本文作者:Zone Lin
本文連結:https://zonego.tw/2023/02/10/cloudflare-page/
版權宣告:本文採用 創用CC BY 4.0 協議進行許可
貼文內使用的封面圖大部分來自unsplash,個別圖片的連結請看封面圖來源
×