用 Hexo + GitHub + Cloudflare Pages 免費架部落格

這個部落格就是用 Hexo 產生靜態網頁、原始碼放在 GitHub、再由 Cloudflare Pages 自動建置與發布的。整套流程完全免費，而且之後發文只需要 git push，剩下的交給自動部署。這篇記錄從零開始的完整步驟。

整體架構

1
2
3

本機寫 Markdown ──git push──▶ GitHub Repo ──自動觸發──▶ Cloudflare Pages
                                                        （執行 hexo generate，
                                                          發布 public/ 到全球 CDN）

Hexo：把 Markdown 文章轉成靜態 HTML 的框架。
GitHub：存放部落格原始碼（文章、設定、佈景主題）。
Cloudflare Pages：偵測到 GitHub 有新 commit 就自動執行建置指令，把產出的靜態檔部署到 CDN。

一、環境準備

只需要兩樣東西：

Node.js（建議 LTS 版本）
Git

安裝完用這兩個指令確認：

1 2	node -v git --version

二、建立 Hexo 網站

不需要全域安裝 hexo-cli，用 npx 就可以初始化：

1 2	npx hexo-cli init murmurpaper cd murmurpaper

初始化完成後的重要檔案結構：

├── _config.yml       # 網站設定（站名、語言、網址…）
├── package.json      # 相依套件，內建 build 指令
├── scaffolds/        # 新文章的範本
├── source/
│   └── _posts/       # 文章都放這裡（Markdown）
└── themes/           # 佈景主題

打開 _config.yml，把基本資訊改成自己的：

title: MurmurPaper
author: EmptyWu
language: zh-TW
timezone: 'Asia/Taipei'

本地預覽跑起來看看：

1	npx hexo server

瀏覽器開 http://localhost:4000 就能看到網站。

常用指令

npx hexo new "文章標題"   # 新增文章到 source/_posts/
npx hexo server           # 本地預覽
npx hexo generate         # 產生靜態檔到 public/
npx hexo clean            # 清掉快取與 public/

三、推上 GitHub

到 GitHub 建立一個新的 repository（公開或私人都可以，Cloudflare Pages 兩種都支援），然後把專案推上去：

git init
git add .
git commit -m "Initial Hexo site"
git remote add origin https://github.com/<你的帳號>/<repo名稱>.git
git push -u origin main

Hexo 初始化時附的 .gitignore 已經排除了 node_modules/ 和 public/——這兩個都不需要進版控：套件由 Cloudflare 建置時自行安裝，靜態檔由 Cloudflare 建置時自行產生。

鎖定 Node 版本（建議）

在專案根目錄加一個 .node-version 檔，內容只有一行版本號：

Cloudflare Pages 建置時會讀這個檔案，確保雲端和本機用相近的 Node 版本，避免「本機沒問題、雲端建置失敗」的狀況。

四、設定 Cloudflare Pages 自動部署

這一步只需要做一次，之後每次 push 都會自動部署。

登入 Cloudflare Dashboard（沒有帳號先免費註冊一個）。
左側選單進入 Workers & Pages，點 Create → 切到 Pages 分頁 → Connect to Git。
授權 Cloudflare 存取你的 GitHub 帳號，選擇部落格的 repository。
建置設定填入：

欄位值

Framework preset Hexo

Build command npm run build

Build output directory public

選了 Hexo preset 的話這些值會自動帶入，確認一下即可。
按 Save and Deploy，等一兩分鐘建置完成，就會拿到一個 https://<專案名>.pages.dev 的網址。

欄位	值
Framework preset	`Hexo`
Build command	`npm run build`
Build output directory	`public`

部署成功後，回到 _config.yml 把 url 改成正式網址再 push 一次，讓 sitemap 和永久連結使用正確的網域：

1	url: https://murmurpaper.pages.dev

五、之後的發文流程

設定完成後，發一篇新文章只有三步：

npx hexo new "我的新文章"
# 編輯 source/_posts/我的新文章.md

npx hexo server        # （可選）本地預覽確認

git add .
git commit -m "新增文章：我的新文章"
git push

push 之後 Cloudflare Pages 會自動偵測到新 commit、跑 npm run build、把產出發布到 CDN，通常一兩分鐘內就上線了。可以在 Cloudflare Dashboard 的專案頁面看到每次部署的狀態和紀錄。

小結

項目	花費
Hexo	免費（開源）
GitHub	免費
Cloudflare Pages	免費（每月 500 次建置額度，個人部落格綽綽有餘）

整套流程架好之後，寫作的心智負擔就只剩下「寫 Markdown、push」。之後有空再來研究換佈景主題和綁自訂網域。