使用hexo在Github Pages搭建个人博客

发表于

本文介绍使用hexo和NexT主题在Github Pages搭建博客的方法与注意事项。

一、搭建方法

Github Pages，hexo，NexT主题的文档中已经有具体的教程，参看官方文档即可。

文档地址：Github Pages hexo NexT主题

对于搭建过程中的小坑，将在注意事项部分叙述。

二、注意事项

  1. 图片的引用

建议开启站点配置文件_config.yml中的post_asset_folder选项。然后将图片放在与文章对应的资源文件夹中，用法参看文档。

2021/05/24更新：可以使用hexo-renderer-marked以直接用markdown语法引用图片，详见文档

  1. 404页面的配置

关于404页面，Github Pages和NexT主题的文档中均有介绍。请直接忽视NexT文档关于404的内容，它对于此配置有些误导。可简单参看一下Github Pages的介绍。
具体而言，就是在source文件夹下直接建一个404.md，写入需要的内容即可，例如腾讯的公益404,只用写

1
<script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" charset="utf-8" homePageUrl="http://yoursite.com/yourPage.html" homePageName="回到我的主页"></script>

即可。另可使用skip_render跳过404.md的渲染，免去不必要的主题样式。

  1. NexT主题下的字体配置

默认的字体设置如何，我没深入研究。但可能是从谷歌加载在线的字体。这就存在访问问题。所以修改主题的配置文件，使用系统的字体。毕竟中文字体文件大，用作在线字体不现实。使用其他在线字体，恐怕不包含中文。

在主题配置文件中找到Font，enable设置为true，允许自定义字体。然后所有external设置为false，禁用在线字体。至于family的设定，只允许设置一个字体，具体选择看个人喜好。其余默认的字体是什么，参看NexT的文档说明。

  1. NexT主题配置方法

建议在站点的配置文件中设置theme_config。这样避免改动themes/next文件夹内容，便于后面使用git更新NexT主题可以作为npm的包安装。

2021/05/24更新：已有多种配置主题的方式，详见Hexo和NexT主题的文档。

  1. 自定义页面

有时需要自己修改页面的样式、内容等等。同样不建议直接修改NexT的文件。阅读Next文档的自定义文件部分，NexT里面有些使用了变量，更改变量的值更优雅。

例如：hexo搭配NexT主题，自定义顶部header的背景

在NexT主题v8.14.0之前（不含），可以直接自定义变量head-bg。

主题配置文件
1
2
custom_file_path:
  variable: source/_data/variables.styl
variables.styl
1
$head-bg                        = xxx;

在v8.14.0以及之后（准确来说，变化发生在提交25eb0bc），head-bg这个变量被取消。
参考这个提交中的代码变动，可以知道，原先head-bg是应用于column类的样式，并作用于所有schema。现在则去掉这部分内容，不再设置。同时，在Mist和Pisces中新增了对column类其他样式，说明这个类仍在使用。那么直接补上被删去的column类样式即可。

主题配置文件
1
2
custom_file_path:
  style: source/_data/styles.styl
styles.styl
1
2
3
4
5
6
.column {
  background-image: xxx;
  background-size: xxx;
  background-repeat: xxx;
  background-position: xxx;
}
  1. 插入链接

插入外部的链接直接用markdown原生语法，更加简便。如果对a标签的external和title有特殊需求，见文档