前言 #
在建立個人部落格的過程中，GitHub Pages 一直是許多人的首選，我之前也寫了一篇 Hugo + Github Page 快速建立自己的部落格網站。但隨著網站內容增加與對效能、部署彈性的需求提升，我決定將網站遷移到 Hugo 搭配 Cloudflare Pages 的架構，而會這麼做的主要原因有幾個：
GitHub Pages需要公開Hugo產生的整包靜態檔案，雖說這點因人而異，但對我來說難免有些赤裸。Cloudflare Pages的免費方案除了網站的部署，也能夠連結github透過CI/CD自動部署，而且還能使用自訂網域。- 之前文章我都直接把圖片放到
github上，但隨著文章增加，圖片也變多，github repositories 空間也有上限，因此我需要找個圖床來放另外圖片。 - 我需要將文章與圖片放的位置切開 : 文章放在
github，圖片放在cloudflare r2之類的圖床空間。不然我原本只要文章有更新，部署上去都會因為整包檔案太多、太大而花很多時間。
建立 Cloudflare Page #
1. 新增專案 #
首先當然是去Cloudflare 官網註冊帳號，登入後進入後台，然後點擊Workers 和 Pages新增專案。
2. 匯入現有Git存放庫 #
接著選匯入現有Git存放庫，進去後連接github帳號，選擇你放上github上的hugo目錄。
3. 組建設定 #
到組建設定，選擇Hugo，組建指令填上hugo，輸出目錄填上public。
下方設定環境變數新增HUGO_VERSION指定Hugo版本，最好跟你在本機目錄上的Hugo版本一致。
4. 儲存並部署 #
按下儲存並部署，就會開始建立了。
5. 部署完成 #
完成後會給你一個網址，點擊進去就可以看到你的網站了。
打開連結有看到你的部落格，代表你的Cloudflare Page建立成功了。
6. 管理自訂網域 #
點擊管理自訂網域，將你原本的網域連結過來。
並把 DNS 伺服器指向 Cloudflare 的主機。
看到從驗證中變成啟用中，就代表成功了。
自動部署 #
之後只要每次撰寫完文章後，只要把 hugo 專案推到 github，Cloudflare Pages就會觸發 CI/CD 自動部署了。
一些對於hugo建置沒有必要的檔案，可以透過gitignore排除，可以節省空間只保留文章版控即可，我有另外寫個程式把圖片上傳到 cloudflare r2，這樣可以節省 github 的空間，如果不需要另外放的話，把\content那段的ignore 移除即可，以下是我設定的範例：
# 1. 排除所有檔案 (白名單模式)
/*
# 2. 允許必要的 Hugo 原始碼檔案與目錄
!.gitignore
!content/
!config/
!config.toml
!deploy.log
!deploy.sh
!assets/
!layouts/
!archetypes/
!data/
!i18n/
!static/
!package.json
!package-lock.json
!tailwind.config.js
!theme.toml
!go.mod
!go.sum
!README.md
!LICENSE
# 3. 排除 /content 底下的多媒體檔案 (節省 Git 空間)
content/**/*.png
content/**/*.jpg
content/**/*.jpeg
content/**/*.gif
content/**/*.svg
content/**/*.webp
content/**/*.bmp
content/**/*.tiff
content/**/*.ico
content/**/*.mp4
content/**/*.mov
content/**/*.avi
content/**/*.wmv
content/**/*.flv
content/**/*.mkv
content/**/*.webm
# 4. 排除 Hugo 建置產生的檔案 (Cloudflare 會自動產生)
public/
resources/_gen/
hugo_stats.json
index.html
404.html
index.json
index.xml
sitemap.xml
robots.txt
favicon.ico
apple-touch-icon.png
android-chrome-*.png
site.webmanifest
# 5. 其他
themes/
node_modules/結語 #
Cloudflare Pages 提供了免費的靜態網站託管服務，並且支援自訂網域，非常適合用來架設個人部落格，如果你本身買的網域是在cloudflare上，除了設定簡單，網域後台還有提供一些額外的監控、安全防護、分析功能，還可以使用cloudflare r2來存儲圖片，這樣可以節省 github 的空間，部署的速度也更快。