Boremycin's Blog
0%

建站记录

发表于 更新于 分类于
本文字数： 4.1k 阅读时长 ≈ 7 分钟

这里简要记录我如何使用Hexo开源框架和NexT主题结合Github Pages搭建了第一个个人博客

他山之石

Hexo和Next都是相当成熟的博客模板并对中文有较好的支持，此外中文互联网上也有大量且详细的博客搭建指导贴。在这里就不再赘述从0到1的博客搭建与部署细节，而是列出对自己帮助较大，且更新日期较新的建站说明。

  • CSDN建站贴，细致清晰！
  • Hexo-Next中文文档，不确定是否为官方文档，但涵盖了大部分内容的说明。
  • 高级说明，Next博客博主的建站记录贴，记录了更多的高阶优化内容。
  • 博客说明，另一位博主的hexo-next建站记录贴，额外给出了许多hexo博客写作技巧。
  • Hexo与NexT官方文档，最权威的建站参考资料。

遇到的问题

在上述帖子的基础上博客搭建的大部分过程都非常顺利，但仍然有一些相对麻烦的部分，在此进行单独记录。

npm换源

我在使用npm下载hexo时及时挂了梯子依然会很慢很卡，在换了对应的镜像源后丝滑解决问题！powershell换源脚本如下：

1
2
3
4
#查询当前使用的下载源
npm get registry  
#更换为淘宝源  
npm config set registry https://registry.npmmirror.com/

NexT主题下载与命名

通过git clone下载相应仓库代码后，仓库名称为hexo-theme-next，设置hexo的config中的theme项为next后无法正确显示主题，这种情况下需要将该文件夹重命名为next，更改之后就可以正常调用NexT主题了。

GitHub Pages部署过程中的username设置问题

我原本GitHub的username为YM-ZHANG-Adv，在以此为基础进行GitHub Pages部署的结果就是创建的仓库为YM-ZHANG-Adv.github.io，而实际浏览器读取的地址为ym-zhang-adv.github.io，虽然这个问题可能有解决的办法，但我还是不想再多花时间解决这个问题，而且自己的第一个username确实蠢得离谱。后续就用了一个自己在其他平台用了好久的usernameBoremycin来当作GitHub的username，一通改名之后顺利完成了博客网站部署。

另外，改username是一件非常需要谨慎考虑的事情，很多依赖github username但容易被遗忘的链接都需要重写，例如我作为图床的PicGO。

Markdown中的Latex渲染

Hexo的原生Latex数学公式渲染器并不友好，与常用的md数学语言相比差距较大，因此需要重新设置相应的渲染器和部署文件。以下内容基本按照该博客贴进行优化。

首先，Hexo默认使用”hexo-renderer-marked”引擎渲染网页，该引擎会把一些特殊的markdown符号转换为相应的html标签，比如在markdown语法中，下划线 _ 代表斜体，会被渲染引擎处理为<em>标签。因为类Latex格式书写的数学公式下划线 _ 表示下标，有特殊的含义，如果被强制转换为<em>标签，那么MathJax引擎在渲染数学公式的时候就会出错。例如$x_i$在开始被渲染的时候，处理为 $xi$，这样MathJax引擎就认为该公式有语法错误，因为不会渲染。类似的语义冲突的符号还包括 *, {, }, \等。

通过更换markdown中的latex渲染引擎可以轻易地解决该问题，这次采用hexo-renderer-kramed引擎。

1
2
npm uninstall hexo-renderer-marked --save #卸载原引擎，否侧可能会出现错误
npm install hexo-renderer-kramed --save

但hexo-renderer-kramed引擎也存在行内冲突的问题，因此需要对相应的js文件做进一步修改，目标文件的路径为blog/node_modules\kramed\lib\rules\inline.js，更改其中的部分代码。

1
2
3
4
//  escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
  escape: /^\\([`*\[\]()#$+\-.!_>])/
//  em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
  em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/

最后，在主题中开启mathjex开关，进入到theme/next/_config.yml，将mathjax项的默认false改为true即可。 

1
2
3
4
# MathJax
mathjax:
    enable: true
    per_page: true

完成上述配置后，需要在post的md文件开头手动选择是否开启该文章的latex渲染。鉴于可能会需要写较多的数学公式，因此希望每个文章都默认渲染，将上述yml配置文件中math选项的per_page改为true即可实现，源代码中也给出了相应的注释说明。

1
2
3
4
5
math:
    # Default (true) will load mathjax / katex script on demand.
    # That is it only render those page which has `mathjax: true` in Front-matter.
    # If you set it to false, it will load mathjax / katex srcipt EVERY PAGE.
    per_page: false

实现文章置顶

原始的主题模板提供了sticky的置顶功能，但再三摸索后仍没有成功实现，因此选择改动模板实现文章置顶功能。

首先，需要更改hexo的generate插件，卸载原有的index插件并安装新插件，脚本如下： 

1
2
npm uninstall hexo-generator-index --save
npm install hexo-generator-index-pin-top --save

接着，修改blog/node_modules/hexo-generator-index/lib/generator.js中的内容，可直接复制替换的完整代码如下： 

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
'use strict';

var pagination = require('hexo-pagination');

module.exports = function(locals) {
  var config = this.config;
  var posts = locals.posts.sort(config.index_generator.order_by);

  posts.data = posts.data.sort(function(a, b) {
      if(a.top && b.top) {
          if(a.top == b.top) return b.date - a.date;
          else return b.top - a.top;
      }
      else if(a.top && !b.top) {
          return -1;
      }
      else if(!a.top && b.top) {
          return 1;
      }
      else return b.date - a.date;
  });

  var paginationDir = config.pagination_dir || 'page';

  return pagination('', posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};

然后，需要在主题模板中添加置顶标志，修改/blog/themes/next/layout/_macro/post.swig文件，在<div class="post-meta">标签下插入如下代码：

f4bb7b9b0d5953981c43dd5704cb22a7

完成上述步骤后，只需在每篇文章的Front-matter中加入top: true或top: x，即可实现文章的置顶。

回顾与总结

我为什么需要一个博客？

这个博客可能是本应一年前就该完成的工作，当时还是大三的自己已经收藏了不知道多少个大佬的博客，也懵懵懂懂写了一些代码，自以为可以像完成课程PJ一样完成这么一个项目，但一开始就踏入了Django的无底洞，几乎是从零开始手搓前端，这显然不是我希望的结果，于是只能将其搁置。过了大三大四两学期整整一年，才想起来自己还曾经有这么个念想，于是在寒假马不停蹄地把这个博客搭了起来（当然绝大部分是依赖现有的成熟模板）。可能这就是念念不忘，必有回响 吧。

此外，我也希望通过这个博客改改自己好高骛远，眼高手低的毛病，后面读了什么论文或者跑了什么代码和算法，都会在这个博客上留下记录，而不是在脑子里过一遍了事，这个博客既是一个公开的笔记，也是一种督促。

再从功利的角度出发，有一个不断更新的技术博客本身就是互联网求职的加分项，加分权重依照博客维护者的年龄或者学历层次逐渐递减。抛开内容不谈，一个完成度高的高中生博客给人的印象深刻程度一定是远远大于一个博士研究生的博客的，所以希望抓住自己本科的尾巴，把自己的博客搭起来，这样就可以在简历里大肆宣扬本科阶段建立个人博客并不断维护。

最后如果真的要回答搭建博客到底对自己的学习，对当下的任务有什么促进的话，那显然是没有的。不过自己还是本科，这就是所有的自由而无用的事情发生的充分理由。