記一次Hexo建站過程

最近白嫖了cloudflare的warp服務，發現cloudflare真是太良心，一發不可收拾，順便在cloudflare註冊了genparticle.com，好處是有免費的SSL、防攻擊、還能使用免費的cloudflare pages，下面基於Hexo記錄一下建站過程。首先需要有cloudflare帳號、GitHub帳號，安裝git、nodejs，這裡就不必多說。

配置Hexo

windows安裝Hexo-cli：

1	npm install hexo-cli -g

然後創建部落格根目錄(比如myblog)並進入根目錄：

1	cd c:\website\myblog\

在myblog目錄初始化hexo：

hexo init

安裝主題，這裡以Volantis為例子；
進入myblog/themes然後git clone：

1 2	cd themes git clone https://github.com/volantis-x/hexo-theme-volantis.git volantis

安裝依賴：

1 2	npm install npm install volantis-static hexo-wordcount

配置Volantis:
修改myblog裡面的_congfig.yml，”theme: landscape” $\rightarrow$ “theme: volantis.yml”
另外我在cloudflare pages構建的時候提示不能clone submodels，因此還需要在myblog目錄下創建”.gitmodules”，配置如下：

1
2
3

[submodule "themes/volantis"]
    path = themes/volantis
    url = https://github.com/volantis-x/hexo-theme-volantis.git

本地編輯.md文章

然後就可以寫文章了，文章一般是markdown格式在myblog\source_posts文件夾下：

1	hexo new "Hello world" # 生成文章"Hello world"

然後利用vs code編輯。
文章：

---
title: 我的第一篇文章
date: 2025-03-12 00:37:31
tags:
  - 教學
  - 建站
category:
  - 建站
plugins:
  - mathjax # 數學公式
  - katex
  - indent # 首行縮進
---

# 第一篇部落格測試
## test測試
測試,
測試,test

公式測試:
$$P(k,\mu) = \sum_{\ell = 0,2,4}P_\ell(k){\cal L}(\mu)\frac{2\ell+1}{2}$$

注意這裡的tags、category基於Hexo，plugins基於Volantis主題，mathjax和katex支持部分latex公式，使用之前需要初始化一下：

1 2	hexo new page tags hexo new page category

執行完這兩個命令後會在myblog\source下生成兩個文件tags\index.md和category、index.md，可以通過修改這兩個index.md配置顯示效果。下面是volantis官方建議配置：
tags\index.md

---
layout: tag
index: true
title: tags
date: 2025-03-11 23:43:36
---

category\index.md

---
layout: category
index: true
title: category
date: 2025-03-12 22:59:37
---

二者顯示效果如下：

然後運行hexo命令：

1
2
3

hexo cl     # 等同 hexo clean，清理快取
hexo g      # 等同 hexo generate，生成html靜態文章
hexl s      # 等同 hexo server，啟動本地伺服器，預覽網頁

在Windows命令行裡可以寫為一條命令：

1	hexo cl; hexo g; hexo s

配置Github

如果是第一次配置github：

1
2
3

git config --global user.name "name"   # GitHub名字
git config --global user.emai "email"  # GitHub信箱
ssh-keygen -t rsa -b 4096 -C "email"   # Github密

將rsa證書添加到ssh伺服器，修改c:/User/使用者名稱/.ssh/config

Host github.com
    HostName ssh.github.com        # GitHub 的 SSH 伺服器地址
    User git                       # 使用者名稱（固定為 git）
    IdentityFile ~/.ssh/gitHub_rsa # 指定私鑰路徑（替換為你的金鑰文件）
    Port 443                       # 使用 443 埠（繞過 22 埠限制）

將rsa公鑰(一般.pub結尾)添加到GitHub：
在網頁GitHub：”Setting” $\rightarrow$ “SSH and GPG keys” $\rightarrow$ “SSH keys” $\rightarrow$ “New SSH key”，記事本打開rsa公鑰，把內容複製進去；
連結GitHub伺服器：

1	ssh git@github.com

myblog關聯到Github

登錄GitHub帳戶，創建名稱為myblog的私有庫，不要勾選”Add a README file”。
接著在電腦myblog目錄下：

git init    # 初始化
git add .   # 添加更改
git commit -m "Initial myblog"  # 添加更改日誌
git remote add origin https://github.com/username/myblog.git # 本地倉庫與遠程關聯
git push -u origin main # 推送更新

後面更新文章只需要執行：

1
2
3

git add .
git commit -m "update"
git push -u origin main

網頁布置到cloudflare pages：

找到cloudflare的”Worker和Pages”，點擊”創建”，

然後一定選擇”Pages”，不要錯選成”Worker”，再點擊”連接到Git”，

接著登錄Github授權即可，選擇你的myblog庫，

進入”設置與部署”頁面，”生產分支”選擇你的分支，”模型預設” $\rightarrow$ “Next.js”，”構建命令” $\rightarrow$ “npm install -g hexo; hexo clean; hexo generate”，”構建輸出目錄” $\rightarrow$ “public”，然後部署即可。

部署完成後可以綁定自己的域名就可以訪問了。