2024年底,hexo博客的迁移部署、升级和重启

2024年底,以前学生价活动租的腾讯云服务器的续费次数已经用光,租了个新服务器,以前挂在上面的服务都得迁移,五年前搭建的Hexo博客也是如此。

迁移之后,将相关依赖全都升级了一遍,又加了一些新的功能,比如夜间模式。

以前部署的时候很多东西不了解,现在基本上都能弄明白是怎么回事了。

安装Hexo

文档 | Hexo

现在用的主要是pnpm:

1
$npm install -g pnpm

不只是服务器,电脑也换了新的,不过所需的Nodejs和Git在之前就安装好了,只差Hexo。

1
2
$pnpm install -g hexo-cli

在github上拉取自己的博客代码目录安装依赖并启动:

1
2
3
$pnpm install
$hexo clean
$hexo server

没启动成功,因为存在一些版本冲突。

安装主题

我新建了另一个文件夹,使用如下命令安装Icarus主题时报错,难道是主题的问题?

1
2
3
4
$hexo init
$pnpm install -S hexo-theme-icarus hexo-renderer-inferno
$hexo config theme icarus
$hexo server

我找到了情况相同的issue:ERROR Process failed: layout/tag.jsx · Issue #1318 · ppoffice/hexo-theme-icarus

image.png

issue中的解决方案和我在报错里面看到的两个缺失的依赖一样,只不过我不太明白为什么会缺这两个。

除了装那两个缺失的依赖之外,还装了hexo-log,否则也运行不起来。

1
2
3
$pnpm install -S @babel/preset-env
$pnpm install -S babel-plugin-inferno
$pnpm install -S hexo-log

安装完毕后,用于测试的新Hexo项目就可以运行了。

按照前面的流程其实将原本无法启动的源码也启动起来了。

部署到服务器

本地的hexo源代码修复了,该部署到服务器了。以前部署服务器的时候还基本什么都不懂,照着网上的资料一通操作,用宝塔面板搭好了,现在什么也想不起来,正好借此回忆一下。

新服务器我改用了Debian(以前的是CentOS),没选宝塔应用模板,开局只有装好系统的机子,没有其他应用。之后也尽量不使用宝塔这类运维面板,毕竟有时候限制有点大,还会让自己学不到东西。

安装git并添加git用户

1
2
3
$apt install git
$useradd -m git #参数m代表为该用户生成家目录
$passwd git #为git用户设置密码

添加公钥

如果之前没有生成SSH公钥,就回到本地计算机用如下命令生成(参见:生成新的 SSH 密钥并将其添加到 ssh-agent - GitHub 文档

1
2
3
4
$ssh-keygen -t ed25519 -C "your_email@example.com"
# 或者
$ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

your_email@example.com替换为自己的邮箱。

在用户文件夹的.ssh目录下,会生成id_rsa和id_rsa.pub文件,分别是私钥和公钥。

视角回到远程计算机

1
2
3
4
$su - git #切换到git用户
$mkdir ~/.ssh
$vim ~/.ssh/authorized_keys

将id_rsa.pub文件里面的公钥复制粘贴进去,就添加好了。

添加完公钥之后调整权限使得只有git这个用户可用。

1
2
$chmod 600 /home/git/.ssh/authorized_keys
$chmod 700 /home/git/.ssh

在本地主机的终端检查是否可以登录:

1
$ssh -v git@服务器IP #参数v代表verbose,详细显示调试信息,可以去掉

这样就可以用git用户免密登录到服务器了。这也是要单独新建git用户并严格限制权限的原因,总不能用root用户免密登录。(以前我没配这个,确实是用root账号每次输密码登录的)

配置hooks

关于Git钩子可参见官方文档:Git - Git 钩子

和其它版本控制系统一样,Git 能在特定的重要动作发生时触发自定义脚本。 有两组这样的钩子:客户端的和服务器端的。 客户端钩子由诸如提交和合并这样的操作所调用,而服务器端钩子作用于诸如接收被推送的提交这样的联网操作。

你将其理解为一个触发器即可,发生某个事件或者说动作的时候就执行自定义脚本。

Hexo部署博客的过程:

  1. 使用源代码(未渲染的markdown以及主题的代码等)生成网站静态文件
  2. 将静态文件通过git从本地库提交到远程库
  3. git的远程库使用bare参数做成没有工作区的裸仓库形式,将网站目录当做其工作区,在远程裸仓库接收到推送时,将收到的内容检出到网站目录中,完成对网站内容的更新。

首先建好网站目录:

1
2
3
4
5
6
$su -
$mkdir -p /data/www/blog
$chown -R git:git /data/www/blog
$chmod -R 755 /data/www/blog


接着建好裸仓库(相关概念参见:Git init和Git init –bare的区别,以及Git init –bare如何创建工作空间-腾讯云开发者社区-腾讯云

1
2
3
4
5
6
$cd /home/git
$git init --bare blog.git

$vim blog.git/hooks/post-receive


最后编写hooks/post-receive脚本:

1
2
#!/bin/bash
git --work-tree=/data/www/blog --git-dir=/home/git/blog.git checkout -f

这个命令是用于从指定的 Git 仓库(参数git-dir)检出文件到一个非标准的工作目录(参数work-tree),强制覆盖原有文件。

由于新建的是裸仓库,没有工作空间,所以在触发post-receive(接收提交)的时候,需要利用以上钩子将提交内容检出到指定的工作空间中,也就是网站目录下,这样就实现了,git提交到这个远程库就可以更新网站。

最后调一调权限就大功告成了:

1
2
3
$chown -R git:git /home/git/blog.git
$chmod +x /home/git/blog.git/hooks/post-receive

配置Nginx

安装不必多言:

1
$apt install nginx

修改配置

1
$vim /etc/nginx/nginx.conf

主配置文件nginx.conf中导入了sites-enabled目录下所有配置的配置

1
2
3
http {
include /etc/nginx/sites-enabled/*
}

里面只有一个default文件,还是链接着sites-enabled同目录下sites-available下的default的软链接文件。

相关概念参见:Nginx 的 sites-available 和 sites-enabled 的区别 - 简书

这是为了方便配置各个站点而设计的结构。于是在sites-available复制了一份default文件,在sites-enabled新建了对应的链接文件:

1
2
3
4
$cp /etc/nginx/sites-available/default /etc/nginx/sites-available/hexo-blog
$ln -s /etc/nginx/sites-available/hexo-blog /etc/nginx/sites-enabled/hexo-blog


这里要注意,ln命令新建的链接文件是后面那个,而不是前面那个,一开始我写反了提示我文件已存在。

1
2
$nginx -t # 测试配置文件有无语法错误
$nginx -s reload # 重载配置文件

这样一来就全部配置好了,可以输入IP在浏览器访问。

部署SSL证书

将域名解析记录修改为新的IP之后,还需要部署SSL证书来让用户可以通过https访问。

腾讯云的免费证书的签发有效期限从一年变为了三个月,不过好歹仍然免费,不过是到时候麻烦点,三个月要重新申请一次。

旧的一月份才过期,先用旧的顶着。

在nginx配置目录新建一个目录用来专门放ssl证书的4个文件。

1
$mkdir /etc/nginx/certificate

nginx配置如下,要注意这里的地址是相对于nginx.conf文件的地址而不是相对于sites-available/hexo-blog的地址,因为站点配置最终是被导入到主配置文件当中。

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
server {
# listen 80 default_server;
# listen [::]:80 default_server;

# SSL configuration
#
listen 443 ssl default_server;
ssl_certificate certificate/yxchangingself.xyz_bundle.crt;
ssl_certificate_key certificate/yxchangingself.xyz.key;
ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_protocols TLSv1.2 TLSv1.3;
ssl_prefer_server_ciphers on;

root /data/www/blog;

# Add index.php to the list if you are using PHP
index index.html index.htm index.nginx-debian.html;

server_name yxchangingself.xyz;

location / {
# First attempt to serve request as file, then
# as directory, then fall back to displaying a 404.
try_files $uri $uri/ =404;
}
}

这样一来就完成了,可以通过域名访问到博客,和几天前过期前一样。

升级依赖

升级Icarus主题,不过遇到了Error [ERR_REQUIRE_ESM]: require() of ES Module not support的问题:错误 [ERR_REQUIRE_ESM]:不支持 ES 模块的 require()怎么解决_require() of es module-CSDN博客

查看了一下有很多依赖已经过时了,需要升级。

趁着这个机会,我打算全面升级一下博客源码的依赖版本:

1
$pnpm update

执行之后仍然有17个依赖过时

1
WARN  17 deprecated subdependencies found: axios@0.19.2, chokidar@1.7.0, core-js@1.2.7, cuid@2.1.8, fsevents@1.2.13, glob@6.0.4, glob@7.2.3, hexo-bunyan@1.0.0, highlight.js@9.18.5, inflight@1.0.6, resolve-url@0.2.1, rimraf@2.4.5, source-map-resolve@0.5.3, source-map-resolve@0.6.0, source-map-url@0.4.1, swig-templates@2.0.3, urix@0.1.0

参考以上资料,npm全局安装npm-check-updates,并执行ncu -u命令,将如下过时依赖的版本在package.json文件中修改:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
bulma-stylus              ^0.8.0  →  ^0.9.1
chokidar ^3.6.0 → ^4.0.1
hexo ^5.4.2 → ^7.3.0
hexo-component-inferno ^0.10.5 → ^3.1.2
hexo-deployer-git ^2.1.0 → ^4.0.0
hexo-generator-archive ^1.0.0 → ^2.0.0
hexo-generator-category ^1.0.0 → ^2.0.0
hexo-generator-feed ^2.2.0 → ^3.0.0
hexo-generator-index ^1.0.0 → ^4.0.0
hexo-generator-tag ^1.0.0 → ^2.0.0
hexo-log ^2.0.0 → ^4.1.0
hexo-pagination ^1.0.0 → ^4.0.0
hexo-renderer-ejs ^1.0.0 → ^2.0.0
hexo-renderer-inferno ^0.1.3 → ^1.0.2
hexo-renderer-marked ^2.0.0 → ^6.3.0
hexo-renderer-stylus ^2.1.0 → ^3.0.1
hexo-server ^1.0.0 → ^3.0.0
hexo-util ^2.7.0 → ^3.3.0
inferno ^7.4.11 → ^8.2.3
inferno-create-element ^7.4.11 → ^8.2.3

运行时遇到了问题:

1
2
ERROR Asset render failed: css/default.css
Error: D:/02_Areas/Blog/ChangingSelf_blog_src/node_modules/bulma-stylus/stylus/utilities/functions.styl:8:5

查找issue发现有人已经遇到过了:【已解决】主题与bulma-stylus@0.9.2-rc.1不兼容。请不要手贱乱更新依赖。 · Issue #1243 · ppoffice/hexo-theme-icarus

把那个依赖的版本改回旧版本就ok。

其他优化

live2D

升级完之后live2D不见了,因为原本的live2D涉及修改主题的源代码。

参考着以前自己写的博客很快恢复了:记第三次博客切换主题以及主题优化 - 编程技术笔记

写博客还是挺有用的,帮助别人也帮助未来的自己。

关于图片

之后就不用图床了,直接将图放在/source/images文件夹里面了,图片还是放自己这里安心,占空间就占空间吧,总比图片丢了好。

obsidian可以设置将图片放在“当前文件所在文件夹下的指定子文件夹中”,指定为attachments目录就可以了。

本地存放文件有两种方式,方案一就是上面那种,方案二是hexo提供的,每次新增会生成一个和文章同名的文件夹用于放该文章的图片。

虽然可以更方便地知道图片的归属了,但文章间图片共享变复杂了,也没法用obsidian实现,得手动放图片,更麻烦。

删除未引用图片这件事可以交给obsidian。

编辑:以上做法好像不行,还是得放在/source/images下面,等之后有空再去调整。

热力图

hexo-graph,一个基于 echarts,集成博客热力图,博客月份统计图,分类统计图,标签统计图的多元化可交互插件。

其他插件

其他插件主要添加功能性的,涉及hexo内嵌标签等非markdown语法的插件就算了。

参考文章:「推荐」本站用到的 hexo 插件 | 若风

文章置顶

npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save
Front-matter 插入 top:100,数字越大文章在首页的位置越靠前。

文章隐藏

npm install hexo-hide-posts --save 默认 hidden: true 用于隐藏,hidden 可自定义为自己喜欢的名字。

热力图

可以激励写作,所以单开了一个页面放相关的数据。

夜间模式

照着这一篇修改就行:Hexo-icarus主题黑夜模式以及背景

日间模式的背景图没啥想法就先不加了,其实博客主体组件都挡着背景,也不太适合放,夜间模式的流星挺好的。

2024年底,hexo博客的迁移部署、升级和重启

https://yxchangingself.xyz/posts/hexo-blog-reboot-2024/

作者

憧憬少

发布于

2024-12-15

更新于

2024-12-15

许可协议