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

发表于 分类于 阅读次数： 本文字数： 2.1k 阅读时长 ≈ 3 分钟

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

简单谷歌了下相关资料，决定采用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

其他相关