搭建 hexo 博客 + 安知鱼主题,直接部署到 CF Pages,实现在 git 里写文章后直接发布

搭建 hexo 博客 + 安知鱼主题,直接部署到 CF Pages,实现在 git 里写文章后直接发布

前置工作

安装必要的软件

在本地安装 hexo

过程不详述,看CM的教程

按以下流程执行:

  • 本地新建一个文件夹,如 E:\hexo-blog
  • 在此文件夹右键打开 git,依次运行以下命令:
1
2
3
4
5
6
npm config set registry https://mirrors.huaweicloud.com/repository/npm/
npm install -g hexo-cli && hexo -v
hexo -v
hexo init blog-demo
cd blog-demo
npm i
  • E:\hexo-blog\blog-demo 就是你博客文件的目录
  • 启动项目
1
hexo cl && hexo s

在本地安装安知鱼主题

方式一:github

1
git clone -b main https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git themes/anzhiyu

方式二:下载主题文件

下载 最新 release 版本 解压到 E:\hexo-blog\blog-demo\theme 目录,并将解压出的文件夹重命名为 anzhiyu

[!TIPS]
无论上述哪种方式,安装完主题后都需要复制 /themes/anzhiyu/_config.yml 此文件到 hexo 根目录,即 E:\hexo-blog\blog-demo,并重命名为 _config.anzhiyu.yml

应用主题

打开 Hexo 根目录下的 config.yml, 找到以下配置项,把主题改为 theme: anzhiyu,注意 : 后面有个 空格

安装主题渲染器

1
npm install hexo-renderer-pug hexo-renderer-stylus --save

配置主题

官方文档 的教程逐项配置主题,同步修改 _config.anzhiyu.yml 文件中的配置选项
在本地全部配置完成,运行命令 hexo cl && hexo s 启动本地预览

将本地文件推送到 git 仓库

新建一个仓库

在 github 上新建一个 私有 仓库,点此直达,仓库名随意,假如为 blog-demo

特别提示:仓库名不能是 “ 用户名.hithub.io”,千万注意!!!

配置 ssh 密钥

具体过程详见 CM的教程

主要步骤如下:

  • 配置用户名和邮箱,依次运行:
1
2
git config --global user.name "你的github用户名"  
git config --global user.email "你的github邮箱"
  • 检查是否配置成功:git config -l
  • 生成 生成 git 的 sshkey,依次运行
1
2
ssh-keygen -t rsa -C "你的github邮箱"  
ssh -T git@github.com

推送本地文件到远程仓库

步骤 1:在本地博客的同级目录,也就是 E:\hexo-blog\ 目录,在 blog-demo 同级,新建一个 sh 脚本文件,假设为 push_blog.sh,输入以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
#!/bin/bash

# 定义本地和远程仓库名称
LOCAL_REPO="blog-demo" #改为你本地博客的文件夹名
GIT_REPO="git@github.com:your_user/your_repo.git" # 替换为你自己的用户名和仓库名,最后面的 .git不要漏了
GIT_EMAIL="your_email" # 替换为你自己仓库账号的邮箱
GIT_USER="your_user" # 替换为你自己仓库账号的用户名
PUSH_REMAKE="由 git bash 自动提交"
THEME_URL="https://github.com/anzhiyu-c/hexo-theme-anzhiyu.git" # 安知鱼主题子模块 URL
# ---------------------------以下内容无需修改-----------------------------

git config --global core.autocrlf true

echo "检查 SSH 配置..."
SSH_OUTPUT=$(ssh -T git@github.com 2>&1)
if echo "$SSH_OUTPUT" | grep -q 'success'; then
echo "SSH 配置正确,连接 GitHub 成功"
else
echo "错误:SSH 配置不正确,请确保 SSH 密钥已设置,并添加到 GitHub"
exit 1
fi

cd "$LOCAL_REPO" || { echo "目录 $LOCAL_REPO 不存在,脚本即将退出。"; exit 1; }
if [ ! -d ".git" ]; then
git init
git remote add origin "$GIT_REPO"
git config --global user.email "$GIT_EMAIL"
git config --global user.name "$GIT_USER"
echo "已初始化新的 Git 仓库并设置远程仓库"
fi
if [ -d "themes/anzhiyu/.git" ]; then
git rm -r --cached themes/anzhiyu
rm -rf themes/anzhiyu/.git
echo "已移除嵌套的 Git 仓库:themes/anzhiyu"
fi
if [ ! -d "themes/anzhiyu" ]; then
git submodule add "$THEME_URL" themes/anzhiyu
echo "已添加子模块:$THEME_URL"
else
echo "子模块已存在,更新子模块"
git submodule update --init --recursive themes/anzhiyu
fi

git checkout -B main
echo "已切换到 'main' 分支"
git add .
echo "已将所有文件添加到暂存区"

if ! git diff --cached --quiet; then # 仅在有更改时提交
git commit -m "$PUSH_REMAKE"
echo "已提交更改"
else
echo "没有更改需要提交"
fi

git pull origin main --rebase
echo "已拉取远程更改并合并"
git push -u origin main
echo "已将本地更改推送到远程仓库"
echo "操作完成!"

步骤 2:在 push_blog.sh 的同级目录,新建一个 bat 文件,假设文件名为 run.bat,输入以下代码:

1
2
3
4
@echo off

"C:\Program Files\Git\bin\bash.exe" -c "./push_blog.sh"
pause

步骤 3:以管理员身份运行 run.bat

运行完成后,检查 git 仓库中文件是否已被推送,文件结构与本地博客目录是否一致

仓库目录结构

部署到 CF Pages

这里就不需要详述了吧,具体流程如下:

  • 新建一个 pages
  • 链接 github
  • 导入刚刚生成的仓库,例如我的是
  • 重点 1:构建命令填 npm run build
  • 重点 2:构建输出填 public
  • 其他留空,点击部署

部署完成后等待两分钟,点击 cf 分配的域名访问一下博客

如果没有问题,在 pages 设置中绑定自定义域,就可以使用自己的域名进行访问了

如何发布文章

hexo 博客原始的发布方式比较繁琐,对不会命令行的小白很不友好

现在可以无需命令行,直接在仓库的 /source/_posts 文件夹中新建一个 md 文件,编辑完后保存,cf pages 会自动同步仓库更新,稍等片刻,文章即可发布成功

[!TIPS]
注意:编写的文章必须在文章头部添加 Front-matter 文章属性,详见官方文档的详细释义:Front-matter,根据自身的需求添加需要的字段。注意:每个字段的 : 后面必须有一个 英文空格

写在最后

其实,最后发布文章可以借助一些 MD 编辑器,比如:Obsidian 黑曜石,或者微软的 vscode,借助插件可以一键将本地编辑好的文章推送到指定仓库的指定目录,不用每次都打开 github 仓库,git 的 md 编辑器实在太不好用了。obsidian 可以将 Front-matter 字段设置为模板,每次写完文章直接套用模板发布即可,非常方便,它还可以借助插件帮你自动格式化、美化 MD 文档