2024年底,hexo博客的迁移部署、升级和重启
2024年底,以前学生价活动租的腾讯云服务器的续费次数已经用光,租了个新服务器,以前挂在上面的服务都得迁移,五年前搭建的Hexo博客也是如此。
迁移之后,将相关依赖全都升级了一遍,又加了一些新的功能,比如夜间模式。
以前部署的时候很多东西不了解,现在基本上都能弄明白是怎么回事了。
安装Hexo
现在用的主要是pnpm:
1 | $npm install -g pnpm |
不只是服务器,电脑也换了新的,不过所需的Nodejs和Git在之前就安装好了,只差Hexo。
1 | $pnpm install -g hexo-cli |
在github上拉取自己的博客代码目录安装依赖并启动:
1 | $pnpm install |
没启动成功,因为存在一些版本冲突。
安装主题
我新建了另一个文件夹,使用如下命令安装Icarus主题时报错,难道是主题的问题?
1 | $hexo init |
我找到了情况相同的issue:ERROR Process failed: layout/tag.jsx · Issue #1318 · ppoffice/hexo-theme-icarus
issue中的解决方案和我在报错里面看到的两个缺失的依赖一样,只不过我不太明白为什么会缺这两个。
除了装那两个缺失的依赖之外,还装了hexo-log,否则也运行不起来。
1 | $pnpm install -S @babel/preset-env |
安装完毕后,用于测试的新Hexo项目就可以运行了。
按照前面的流程其实将原本无法启动的源码也启动起来了。
部署到服务器
本地的hexo源代码修复了,该部署到服务器了。以前部署服务器的时候还基本什么都不懂,照着网上的资料一通操作,用宝塔面板搭好了,现在什么也想不起来,正好借此回忆一下。
新服务器我改用了Debian(以前的是CentOS),没选宝塔应用模板,开局只有装好系统的机子,没有其他应用。之后也尽量不使用宝塔这类运维面板,毕竟有时候限制有点大,还会让自己学不到东西。
- 将 Hexo 部署/迁移到腾讯云轻量服务器_hexo部署到腾讯云-CSDN博客
- Hexo 博客部署到腾讯云教程-腾讯云开发者社区-腾讯云****
- Hexo博客进阶:将Hexo部署到云服务器(CentOS)_centos运行hexo博客-CSDN博客
- 静态博客Hexo搭建——本地and服务器_hexo 宝塔-CSDN博客(主要参考此博客)
- linux 大家一般把web目录放在哪个分区下面呢?放在/data目录下面安全吗? - SegmentFault 思否
安装git并添加git用户
1 | $apt install git |
添加公钥
如果之前没有生成SSH公钥,就回到本地计算机用如下命令生成(参见:生成新的 SSH 密钥并将其添加到 ssh-agent - GitHub 文档)
1 | $ssh-keygen -t ed25519 -C "your_email@example.com" |
your_email@example.com替换为自己的邮箱。
在用户文件夹的.ssh目录下,会生成id_rsa和id_rsa.pub文件,分别是私钥和公钥。
视角回到远程计算机:
1 | $su - git #切换到git用户 |
将id_rsa.pub文件里面的公钥复制粘贴进去,就添加好了。
添加完公钥之后调整权限使得只有git这个用户可用。
1 | $chmod 600 /home/git/.ssh/authorized_keys |
在本地主机的终端检查是否可以登录:
1 | $ssh -v git@服务器IP #参数v代表verbose,详细显示调试信息,可以去掉 |
这样就可以用git用户免密登录到服务器了。这也是要单独新建git用户并严格限制权限的原因,总不能用root用户免密登录。(以前我没配这个,确实是用root账号每次输密码登录的)
配置hooks
关于Git钩子可参见官方文档:Git - Git 钩子
和其它版本控制系统一样,Git 能在特定的重要动作发生时触发自定义脚本。 有两组这样的钩子:客户端的和服务器端的。 客户端钩子由诸如提交和合并这样的操作所调用,而服务器端钩子作用于诸如接收被推送的提交这样的联网操作。
你将其理解为一个触发器即可,发生某个事件或者说动作的时候就执行自定义脚本。
Hexo部署博客的过程:
- 使用源代码(未渲染的markdown以及主题的代码等)生成网站静态文件
- 将静态文件通过git从本地库提交到远程库
- git的远程库使用bare参数做成没有工作区的裸仓库形式,将网站目录当做其工作区,在远程裸仓库接收到推送时,将收到的内容检出到网站目录中,完成对网站内容的更新。
首先建好网站目录:
1 | $su - |
接着建好裸仓库(相关概念参见:Git init和Git init –bare的区别,以及Git init –bare如何创建工作空间-腾讯云开发者社区-腾讯云)
1 | $cd /home/git |
最后编写hooks/post-receive
脚本:
1 |
|
这个命令是用于从指定的 Git 仓库(参数git-dir)检出文件到一个非标准的工作目录(参数work-tree),强制覆盖原有文件。
由于新建的是裸仓库,没有工作空间,所以在触发post-receive(接收提交)的时候,需要利用以上钩子将提交内容检出到指定的工作空间中,也就是网站目录下,这样就实现了,git提交到这个远程库就可以更新网站。
最后调一调权限就大功告成了:
1 | $chown -R git:git /home/git/blog.git |
配置Nginx
安装不必多言:
1 | $apt install nginx |
修改配置
1 | $vim /etc/nginx/nginx.conf |
主配置文件nginx.conf
中导入了sites-enabled
目录下所有配置的配置
1 | http { |
里面只有一个default文件,还是链接着sites-enabled
同目录下sites-available
下的default的软链接文件。
相关概念参见:Nginx 的 sites-available 和 sites-enabled 的区别 - 简书
这是为了方便配置各个站点而设计的结构。于是在sites-available
复制了一份default文件,在sites-enabled
新建了对应的链接文件:
1 | $cp /etc/nginx/sites-available/default /etc/nginx/sites-available/hexo-blog |
这里要注意,ln命令新建的链接文件是后面那个,而不是前面那个,一开始我写反了提示我文件已存在。
1 | $nginx -t # 测试配置文件有无语法错误 |
这样一来就全部配置好了,可以输入IP在浏览器访问。
部署SSL证书
将域名解析记录修改为新的IP之后,还需要部署SSL证书来让用户可以通过https访问。
腾讯云的免费证书的签发有效期限从一年变为了三个月,不过好歹仍然免费,不过是到时候麻烦点,三个月要重新申请一次。
旧的一月份才过期,先用旧的顶着。
在nginx配置目录新建一个目录用来专门放ssl证书的4个文件。
1 | $mkdir /etc/nginx/certificate |
nginx配置如下,要注意这里的地址是相对于nginx.conf
文件的地址而不是相对于sites-available/hexo-blog
的地址,因为站点配置最终是被导入到主配置文件当中。
1 | server { |
这样一来就完成了,可以通过域名访问到博客,和几天前过期前一样。
升级依赖
升级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 | bulma-stylus ^0.8.0 → ^0.9.1 |
运行时遇到了问题:
1 | ERROR Asset render failed: css/default.css |
查找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语法的插件就算了。
文章置顶
先
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博客的迁移部署、升级和重启