快轉到主要內容

Deploy to Cloudflare

·881 字·2 分鐘
目錄

Why?
#

github其實已經提供了網頁平台託管的服務,寫好的網頁可以透過workflow來自動化發布,對於寫寫筆記日記之類的很夠用了。但你的網頁要真的能發布在網路上被看到,又不想多花錢,你的repository必須是公開的。但我不是很想把所有資料都公開給所有人看,就開始尋找其他的方法,cloudflare蠻多人推薦的,免費方案也夠用,不需要寫workflow他會幫你自動做完所有事情,重點是透過cloudflare發布後我的githug repository可以設回private。

How?
#

註冊couldflare:

  1. Add -> Pages
  2. Import an existing Git respository
  3. 選擇你的repository並且授權
  4. Begin setup -> 匯入repository
  5. 設定build:
    • project name: 建議全小寫
    • production branch: main
    • framework preset: hugo
    • build command: hugo --minify
    • build output directory: public
    • Environment variables:
      • variable names: HUGO_VERSION/value: local端的版本
      • variable names: NODE_VERSION/value:20
  6. Save後會產生一個網址, 🚨請用這個網址當作你baseURL
  7. 之後只要你git push一次,cloudflare就會自動幫你更新
  8. 到github將你的repository設為private
資訊

Hugo的版本在local端輸入hugo version, 填數字部分e.g. 0.153.4 NODE是指Node.js的版本,Cloudflare預設版本可能太舊,所以設定為20,這是目前長期支援的版本

新增另一個repository
#

若你同一個github帳號像有其他repository要透過cloudflare發布,直接Add -> Page,在Import an existing Git respository發現沒有可選的repository,通常是你之前設定了只有某些repository可以使用,cloudflare會有一行小字提醒你:

註記

If your repository is not shown, configure repository access for the Cloudflare Pages app on GitHub.

點進去 Cloudflare Pages 後可開放你repository的使用權。

關閉自動部署
#

我可能會同一個commit修修改改,或是改了好幾個後再發布,因此關掉Cloudflare的自動部屬:

  1. 登入Cloudflare,點選Settings
  2. 修改Build下的 Branch control,把 Enable automatic production branch deployments 取消掉
  3. 手動部屬
    • 到Workers & Pages點選你要發布的repository
    • All deployments點 -> Retry & Deploy