记一次 Hexo + NexT 搭建个人博客系统

搭建一个静态博客是去年的学习计划之一,然而因为种种原因(其实是拖延症加懒癌),迟迟没有动手。直到最近,空余时间慢慢富裕了起来,才想“要不把去年想做的博客给做了?”,那么说干就干。

简单谷歌了下相关资料,决定采用Hexo博客系统加NexT主题的方案搭建。本以为会花很点时间,没想到当前的静态博客系统功能居然已经如此完善,自己能想到的功能它几乎全有,要做的就是按照自己需求和喜好去改里面的配置文件。大概花了半天时间改配置,一切就OK了!

注:本文使用的Hexo版本为v3.3.7,NexT版本为v5.1.1

搭建当中遇到的一些坑

删除文章后,分类和标签统计不正确

  1. 删除目录下的 db.json 文件
  2. 清理 public 文件夹并重新生成

    1
    2
    $ hexo clean
    $ hexo generate
  3. 重启测试服务器(或重新部署)

    1
    2
    3
    $ hexo server
    # or
    $ hexo deploy --generate

静态文件全部没有经过压缩,不能忍

一开始的想法是用 gulp 写几个任务随便搞下,然后就建了个gulp任务文件待定。

后面随便翻hexo插件时候,发现了一个名叫hexo-all-minifier,我这种懒癌患者肯定是马上试用,然后就没有然后了,问题解决,我立马删除了gulp文件。

又发现了个更好用的插件hexo-filter-cleanup,不仅能压缩,还能合并JS(插件集成了useref)。
但是合并JS里面也有一个大坑,原以为我把主题里用到的JS一股脑打成一个包就OK了(如下)

NexT主题->layout->_layout.swig
1
2
3
4
5
6
7
8
9
10
11
12
<!-- build:js /js/theme-files.min.js -->
{% include '_scripts/commons.swig' %}

{% set scheme_script = '_scripts/schemes/' + theme.scheme | lower + '.swig' %}
{% include scheme_script %}

{% block script_extra %}
{% include '_scripts/pages/post-details.swig' %}
{% endblock %}

{% include '_scripts/boostrap.swig' %}
<!-- endbuild -->

完成!少了将近7个请求,非常兴奋,立马部署了上去。然而部署了半天之后才发现部分页面出了一点小问题,归档页面的年份标签不见了!经过了半天时间排查,才总算锁定的问题,解决如下:

NexT主题->layout->_layout.swig
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- build:js /js/theme-common.min.js -->
{% include '_scripts/commons.swig' %}

{% set scheme_script = '_scripts/schemes/' + theme.scheme | lower + '.swig' %}
{% include scheme_script %}

{% include '_scripts/boostrap.swig' %}
<!-- endbuild -->

# 以下JS文件为判断script_extra添加,在合并打包时造成编译失误,需要单独处理
{% block script_extra %}
<!-- build:js /js/theme-extra.min.js -->
{% include '_scripts/pages/post-details.swig' %}
<!-- endbuild -->
{% endblock %}

NexT默认从本地加载很多JS库

建议务必替换成CDN,不然都会从当前站点获取这些库文件。
在NexT主题的 _config.yml 配置中找到 vendors,网上找到相应的CDN地址填入。

部分未解决的坑

  • 二级域名无法配置404页面 线上版本已经可以访问,测试服务器中仍然不行

关于SEO

其他相关