Hexo博客架设日记

好久之前就想把博客搭起来的来着,结果一直咕到了现在,终于有空来搭啦 ✿✿ヽ(°▽°)ノ✿

博客使用 Hexo 搭建,博客源码位于 https://github.com/Centaurus99/centaurus99.github.iomaster 分支,静态页面同步部署于 gh-pages 分支和个人 VPS 上。

下面是搭建(踩坑)记录~ 其实是搭完后的回忆

Hexo 安装

对着官方文档搞,没啥好说 QWQ。

先装 nodejs,我这儿装的版本是 v16.13.2

然后 npm install -g hexo-cli

最后到博客文件夹下 hexo init,然后 npm install,完成!

GitHub Pages 的自动部署

关于如何使用 Hexo 写博客之类的官方文档里都有介绍,这儿就记录一点自动化部署的设置吧。

为了方便管理,我这儿将博客源码和部署后的静态页面放在了同一个库中,下面的配置以我的配置为例。

为了使用 用户名.github.io 访问,需要创建名为 用户名.github.io 的存储库。

配置 Hexo

首先配置运行 hexo deploy 时的部署方式。

先安装 Git 部署插件:

1
npm install hexo-deployer-git --save

然后在 _config.yml 中修改配置:

1
2
3
4
deploy:
type: git
repository: [email protected]:Centaurus99/centaurus99.github.io.git
branch: gh-pages

这样然后运行:

1
2
hexo generate
hexo deploy

应该就能在仓库的对应分支看到部署好的静态页面啦~

在仓库的 Settings > Pages 中将 Source 设为 gh-pages 分支,然后就可以通过 用户名.github.io 访问到博客了。

如果以后还要拓展部署方式,还可以继续往配置里面添加,如果用到了再来更新~

配置 Github Actions

Github Actions 是个好东西,搞自动工作流非常方便,白嫖真香!

这个部分基本是参照大佬的博客完成的,参见:https://tommy.net.cn/2020/08/06/deploy-hexo-with-github-actions/

仅对配置文件做了一点更新和修改,最终如下:

2022-01-15 更新:由于将主题以子模块的形式加入版本控制,添加了 submodules: 'recursive' 表示递归检出子模块

2022-09-02 更新:添加环境变量 TZ: Asia/Shanghai 设定时区,确保本地和远端生成的日期路径相同

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
name: Hexo Deploy

on:
push:
branches:
- master

env:
TZ: Asia/Shanghai

jobs:
build:
runs-on: ubuntu-latest
if: github.event.repository.owner.id == github.event.sender.id

steps:
- name: Checkout source
uses: actions/checkout@v2
with:
ref: master
submodules: 'recursive'

- name: Setup Node.js
uses: actions/setup-node@v1
with:
node-version: '16'

- name: Setup Hexo
env:
ACTION_DEPLOY_KEY: ${{ secrets.HEXO_DEPLOY_KEY }}
run: |
mkdir -p ~/.ssh/
echo "$ACTION_DEPLOY_KEY" > ~/.ssh/id_rsa
chmod 700 ~/.ssh
chmod 600 ~/.ssh/id_rsa
ssh-keyscan github.com >> ~/.ssh/known_hosts
git config --global user.email "[email protected]"
git config --global user.name "Centaurus99"
npm install hexo-cli -g
npm install

- name: Hexo deploy
run: |
hexo clean
hexo deploy

这样,当我更新博客源码时,Github 就会帮我自动部署好静态页面啦。

配置 Webhooks

手头还有一台 VPS,还是打算把它作为博客的服务器。

Github 上有个功能叫 Webhooks,可以在你的库发生一些动作(比如有人 push 东西上来)的时候对着一个网址发个请求。利用这个就可以在更新时通知我的 VPS 去 pull 最新的静态分支,从而实现自动部署了。

关于 Web 服务器的搭建,Nginx 的使用这里就不记录了。 摆烂咯!

Webhooks 的使用也是学习大佬的博客,参见:https://maphical.cn/2020/03/build-blog-using-hexo/

在部署这个的过程中遇到了一堆奇奇怪怪的问题,由于时间久远了记不太清了,这里就不做记录了。 摆烂咯!×2

依稀记得一点点,比如脚本跑不起来考虑是 php 用户权限问题,最终通过给予它运行 git 命令的 sudo 权限解决;git pull 每次在更新的时候都需要处理冲突问题,原因是上面那个 git 部署工具每次会将这个分支完全覆盖,包括历史 commit 都会被删除,所以在一开始选择 pull 方式的时候要选择 rebase。

由于我把博客源码和静态页面放在了同一个存储库内,这会导致 Webhooks 每次更新会被激活两遍(两个分支的更新各激活一遍),不过问题不大。

总结

关于博客的配置文件 _config.yml 可以在我的 Github 对于仓库找到。

这样就完成了博客的自动化部署的配置,下一篇博客将记录配置主题的吐血过程。

参考

作者

Centaurus99

发布于

2022-01-14

更新于

2022-09-02


评论

Your browser is out-of-date!

Update your browser to view this website correctly.&npsb;Update my browser now

×