搭建 hexo 博客 + 安知鱼主题,直接部署到 CF Pages,实现在 git 里写文章后直接发布
搭建 hexo 博客 + 安知鱼主题,直接部署到 CF Pages,实现在 git 里写文章后直接发布
雨天狂奔搭建 hexo 博客 + 安知鱼主题,直接部署到 CF Pages,实现在 git 里写文章后直接发布
前置工作
安装必要的软件
- node.js:Node.js — Run JavaScript Everywhere
- git:Git - Downloads
在本地安装 hexo
过程不详述,看CM的教程
按以下流程执行:
- 本地新建一个文件夹,如
E:\hexo-blog
- 在此文件夹右键打开 git,依次运行以下命令:
1 | npm config set registry https://mirrors.huaweicloud.com/repository/npm/ |
E:\hexo-blog\blog-demo
就是你博客文件的目录- 启动项目
1 | hexo cl && hexo s |
- 预览项目:打开浏览器,输入地址:http://localhost:4000
- 按
ctrl+c
退出预览
在本地安装安知鱼主题
方式一: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 | git config --global user.name "你的github用户名" |
- 检查是否配置成功:
git config -l
- 生成 生成 git 的 sshkey,依次运行
1 | ssh-keygen -t rsa -C "你的github邮箱" |
推送本地文件到远程仓库
步骤 1:在本地博客的同级目录,也就是 E:\hexo-blog\
目录,在 blog-demo
同级,新建一个 sh 脚本文件,假设为 push_blog.sh
,输入以下代码:
1 |
|
步骤 2:在 push_blog.sh
的同级目录,新建一个 bat
文件,假设文件名为 run.bat
,输入以下代码:
1 | @echo off |
步骤 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 文档