建站记录
Mattian LLM鼓励师

记一次不太成功的建站经历

题主之前一直使用WordPress框架管理自己的网站,但总苦于wordpress繁琐的主题管理与相对死板的布局模式,而且还要自己配置服务器。很久前也是听说过可以白嫖git page的托管服务,不过一直没时间迁站。正好赶上自己的服务器到期,再加上学院很贴心的布置了使用git page + hexo建站的作业,于是趁着这个机会把博客迁到git page上。

建站的过程还是很容易的,首先在本地hexo init初始化博客目录,确定本地能启动hexo服务后,将其托管到git page上。托管的方式也很简单,就是在github上建一个名为用户名.github.io的仓库,让后把该仓库地址写入_config.yml即可。

不过我这里遇到了一个小问题(说是小问题,但其实找到问题的原因花了很久):我的github用户名带有-,属于特殊字符,所以作为域名的时候无法访问,迫不得已我只好改了我的用户名,所以我之前的本地仓库都要重新设置远程仓库地址,唉,啥时候用啥时候说吧。总而言之,最后执行一下hexo d就可以成功部署了。就算拥有了你的博客了,并且还不用自己维护服务器,还是很香的。

建站的过程很容易,但从发文章这一步开始,事情逐渐麻烦了起来。

文章页无法正常渲染数学公式

我使用的是keep主题,官方文档的建议是使用hexo-filter-mathjax插件进行渲染,而非hexo-mathjax,但是当我下载好插件也配置了mathjax相关属性后,发现文章中只有in-line形式的公式被渲染了,而正常的公式块却被识别成了斜体。数学公式渲染对于程序猿的博客来说简直是不能出毛病的,所以经过我持之以恒的google后发现有人提出了这样的说法:

hexo默认使用marked.js去解析我们写的markdown,比如一些符号,_代表斜体,会被处理为*标签,比如x_i在开始被渲染的时候,处理为xi,比如__init__会被处理成init。*

因此,我选择更换MarkDown默认渲染器为hexo-renderer-pandoc(pandoc是一个标记语言(也可以说排版语言)转换器。可以将一种标记语言(如markdown、textile、tex、latex、html、epub等)转换到另一种标记语言)

首先要安装Pandoc,再在Hexo站点根目录执行以下命令:

1
2
npm uninstall hexo-renderer-marked  # 删除默认渲染器
npm install hexo-renderer-pandoc # 安装hexo-renderer-pandoc

之后再看数学公式,渲染正常。比如下列文本会被渲染成如图所示的效果。

L = L_0+L_1L_1 = ^{|D|}{i=1}^{|S_i|}{j=1}BCE(label_{i,j},f(input_i,j))

使用图床显示图片

这倒也不算是一个问题吧,但还是记录一下如何使用图床显示图片。其实我第一次知道图床这个东西不是在建站的时候,而是之前用Github的时候发现自己的README总是无法正常显示图片,google之后发现需要使用图床这个东西。而这次建站也遇到了,虽然直接将图片放在source/img下面也可以,但是加载的时候会很慢,最好还是用一个图床,github也能用,一劳永逸。

我选择使用PicGo+github仓库的方式建图床,把github仓库,token配置好就可以使用了,还是很方便的。具体操作可以参考这篇文章:

2022【保姆级教程】手把手带你使用PicGo+Github搭建自己的免费图床 - 知乎 (zhihu.com)

导航栏中的分类及标签页

个人博客肯定少不了导航菜单,而菜单里一般可以直接跳转至主页、分类页、标签页等等。比如像下图这样:

但是在初始化网站的时候,这些页面是没有的,需要自己生成。比如我想生成一个标签页面,这个页面有所有文章的标签,点击该标签就可以显示所有具有该标签的文章列表,那么我要先使用命令hexo new page "tags"创建一个tags页面,执行完该命令后,你会发现多了一个source/tags文件夹,而里面的index.md就是标签的主页面,而在该index.md的Front-matter中设置type: "tags"后,该页就会自动显示所有标签,还是十分神奇的。

当然,最后还要去主题下的配置文件中加入menu配置,这样才能在导航栏中显示:

1
2
3
4
5
6
7
menu:
Home: / # 首页
Archives: /archives # 归档
# Tags: /tags # 标签
# Categories: /categories # 分类
# Links: /links # 链接
# About: /about # 关于

不过我生成categories页面时,不小心首字母大写了,执行了hexo new page "Categories"命令,所以导致生成的文件夹名字页首字母大写,而menu配置中的文件夹名字是小写的,所以点击导航栏中的categories按钮一直显示404。我心想那我就把source/Categories文件夹删了,然后再按正确步骤执行一次就没问题了吧,没想到即便我生成了正确的文件夹、index.md文件,但是访问categories页面时还是显示404。不论我执行了多少次hexo c & hexo g & hexo d,直到一次偶然的机会(一定是老天看不下去了),我打开了.deploy_git文件夹,这里面存着我上一次部署后的所有文件,我发现这里面竟然有Categories文件夹,也就是说,不论我deploy多少次,我一直都在重复部署那个错误的首字母大写的文件夹。虽然不知道为什么它没有部署新的正确的文件夹,但是我把整个.deploy_git文件夹删除后,再hexo c & hexo g & hexo d三连,问题就解决了,真的很无语。

部署时网络问题

最后一个问题是部署时经常遇到以下报错,

这个一看就是wall的问题,需要等等,Patience is key in the life,一开始的时候我clash开全局模式还比较管用,后来就不行了,不过等一下啊也就好了。这没啥办法,不可抗力因素是这样的。

总结

不过总的来说这次建站虽然遇到了不少问题,但是不用买服务器白嫖一个博客还是很香的,而且其实在解决各种问题的过程中也是解决了不少我之前想解决但一直拖延的问题,利是远远大于弊滴。最后也希望自己能把更博客这件事坚持下去吧,真的是一件很有意义的一件事。