hexo 博客系统的实现原理与搭建



原文地址



作为技术人员，定期写Blog是一个非常好的习惯。你可以通过它将自己的一些学习心得记录下来，也可以对平常的工作做一些经验总结等等。对于我来说Blog就更为重要了，因为Blog是我推广音视频技术的一块“阵地”，我需要将我写的一些音视频技术知识、视频课程中的问题解答等内容放在它上面，以便同学们交流学习。



以前，我的文章一直都在简书上发布，可最近不知为何，简书将我的账户封掉了。我经多次申诉却依然无果，既不告之那里违规，也不给我解封，真让人无语！考虑到在其它平台也可能遇到类似情况，因此决心搭建自己的博客，这样才能放心。



如何才能快速搭建一套比较专业的博客系统呢？通过调研，我发现开源项目hexo完全可以满足我的要求。它既可以发布文章，还支持一些常见的功能，如阅览数、文章字数统计、本地搜索等等。下面我就来详细讲述一下我是如何通过hexo搭建自已的博客系统的。

Blog系统

在搭建Blog系统之前，我们有必要先了解一下Blog系统是干什么的，它都应该有哪些功能。



Blog是在2000年左右出现的，原本的称法为weblog，即网络日志。后来逐渐被人们改为 we blog，进而简称为Blog。Blog中的每一篇文章/日志就是一个页面，Blog将这些页面聚集在一起就形成了现在的形式。



现在大家在写Blog时已经很少直接写在页面里了，而是改用Markdown语法，这种语法非常简洁，特别适合我们平常的写作。所以现今的Blog系统最重要的一个环节就是，将Markdown语法写成的文档转化成HTML页面，然后放到Web服务器上发布出来。除此之外，Blog还要有一个管理系统可以将这些页面管理起来，如生成目录、标签，分类、搜索等等。



如果要我们自己实现这样一套系统还是非常麻烦的，好在已经有开源项目实现了，这就是hexo。hexo 不但实现了这些功能，还实现了很多其它的功能，如文章浏览次数、打赏、接入评论系统等等。这些功能对于我们来说都是非常有用的，然而在讲解如何搭建这些功能之前，我们先来了解一下hexo的实现原理，这样可以让我们更容易理解后面的知识。

hexo基本原理

要了解hexo的实现原理，我们首先要知清楚 hexo 的目录结构，这样可以更有助于了解hexo。



hexo由以下几个重要文件/目录组成：

• _config.yml，该文件是hexo 的站级配置文件。所谓站级配置文件是指，对整个站点起效果的配置文件。

• source目录，该目录存放源文件。即用户编写的博文都放在该目录下。在该目录下又有几个子目录我们来分别看一下。

1. _post，用于存放博文，基本上每篇文章都是由Markdown语法编写的。

2. tags，存放tag 的文件。hexo中的tags是自动生成的，所以我们不用手动修改tags目录下的index.md文件，在发布时它会自动生成。

3. categories，存放分类。它与tags是类似的，也是自动生成的，所以不需要我们手工修改。

4. …

• themes目录，该目录用于存放主题，目前hexo中最热门的主题就是next了。最近的 next release 版本是 7.8 。

• public目录，该目录存放hexo转出的文件，如html、css、js等。

• scaffolds目录，它里面存放了一些“脚手架”程序，用于生成模板页面，如执行hexo new "title"时，就会生成一个Markdown文件模板。



上面就是hexo中最重要的几个文件和目录了。



清楚之hexo目录结构之后，我们再来看看hexo的基本原理。hexo最基本的功能是将Markdown程序转成HTML页面，而这个转换并不是一次完成的，要经历两步:

第一步，将Markdown翻译成下面格式的JSON对象：

article: {
  title:
  date:
  tags:
  categories:
  content:
  ...
}

• 第二步，根据上面生成的JSON对象生成 HTML 页面。



对于我们来说，清楚了上面hexo将Markdown转HTML页面的过程后，我们就很容易理解hexo 在执行不同命令时它都在做什么事儿了。



下面我们再来看看hexo的组成，它由三部分组成: hexo-cli、hexo-core以及hexo plugs。在这三部分中最核心的是hexo-core模块，它的作用就是执行上面讲的两步转换，从而生成目标文件；hexo-cli为我们供了一些非常方便的命令。当我们敲入命令时，它会根据命令调用不同的模块；hexo plugin是hexo的扩展，当hexo本身不能完成某项任务时，它允许你自己开发一个插件来完成。当然你也可以使用其它人写好的插件。



上以就是hexo的基本原理。

hexo的常用命令



hexo 提供了几个常用命令，如hexo clean、hexo g、hexo s等等。下面我们分别看一下这几个命令的具体作用是什么：

• hexo clean: 删除 hexo 生成的所有文档。当我们执行这个命令后，你会发现public目录被删除了。

• hexo g: 根据 source 目录中的文件生成html等可以发布的文件。

• hexo s: 在本地起动 http 服务，将生成的 html 等输出文件布署到本地服务器上。

• hexo d: 将生成的html代码推送到 github 上

这几个命令的含义都非常清晰，我就不再做其它赘述了。

hexo发布页面

如上面所介绍的，我们可以使用hexo d命令将生成的目标文件发布出来，但在使用它之前，你需要在站节点的_config.yml文件中配置发布的方法。我们举个例子：

deploy:
- type: git #leancloud_counter_security_sync #git
  repo: git@github.com:avdance/avdance.github.io.git

当我们执行hexo d命令时，它会调用 hexo 中的 hexo-deployer-git 插件。在该插件内部会启动一个进程调用git命令，从而将生成的html等代码上传到 github上。



这里可能有些同学会有疑问，为什么上传到github上就算是发布了呢？这是因为github为我们提供了免费的个人博客空间。只要你在github上创建一个用户名.github.io的项目，github就会自动将这个项目中的文件发布出来。



当然你也可以采用传输的方式，自己购买台云主机，然后在云主机上用ngnix、nodejs等搭建一个Web服务，最终将页面发布出来。

next主题的安装与配置

hexo中有很多的主题，但其中用的最多的、最著名的就是next主题了。下面我们就来介绍一下，如何安装next主题并对其做一些简单的配置。



next的安装比简单了，你只需要将next源码从github上下载下来，然后放到hexo的themes目录下即可。如下面这行语句:

git clone --branch v7.8.0 https://github.com/theme-next/hexo-theme-next.git themes/next



这里需要注意的是，我们在github中搜索关键字hexo-theme-next时，你会发现有两个github star数特别多，这两个地址分别是

https://github.com/iissnan

和

https://github.com/theme-next

上面的地址是next老版本的官方地址，下面这个是新版本的官方地址。你清楚他们之间的关系就不会给你造成混乱了。



next下载好后，下一步就是进行配置了。在themes/next目录下也有一个_config.yml文件，它是next主题的配置文件，千万不要将它与站点的_config.yml弄混了。



如果你要配置next主题时，需要修改的是themes/next目录下的_config.yml文件。



打开该文件，找到Scheme关键字，你会发现next支持多种Scheme。你可以根据喜好选择你自己喜欢的Scheme，我这里选择的是Gemini。选择好Scheme后，我们博客的基本结构就定下来了。接下来你可以对它进行配置了。具体的配置我会在下面再做详细论述。



当所有的配置都修改好后，你可以执行下面的命令将博客发布出来了。

hexo clean

hexo g

hexo s

高级知识

通过上面的操作，我们就将自己的Blog搭建好了。但此时这个Blog还只是一个最基本、最简单的Blog。如果你想让你的Blog更专业的话，还要对它进行细细的打磨。



接下来，我们就来看看还需要对我们的Blog做哪些处理?

• 为文章设置摘要

• 增加图片床

• 统计阅读次数

• 显示文章字个数

• 添加评论区

• 文章置顶

• 设置标签

• 设置标签云

• 增加本地搜索

• 设置关于

• 设置404

• SEO优化

下面我们就按着这个清单细细打磨我们的Blog吧。

为文章设置摘要

在hexo中实现摘要有两种方法，一种主是在正文中加入如下代码:

<!-- more -->

它的作用是将more之前的文字作为摘要。



需要注意的是，一般情况下摘要都在 200 字以内，所以你自己要控制好放置more的位置。这种方式是我最常使用的方式，感觉非常方便。



第二种方法是，在文章头的 description 域写摘要，如下所示：

---
title: xxxx
date: xxxx-xx-xx
...
description: xxxxxxx...
---

这处方式的好处是，可以将文中某一段设置为摘要，或者自己单独写一段摘要。所以这种方式更灵活，也更便于做 SEO 优化。



以上两种方法都可以，你可以根据自己的习惯选择最合适自已的方法。

增加图片床

我们文章发布时，一般都是通过github发布出来，但必竟github给我们每个人的资源是有限的。如果你在github上放一些特别大的文件的话，那么你博客的访问速度一定很慢，甚至会严重影响用户的体验。



另外不论你在哪儿发布文章，一条必须遵守的原则是，尽量避免在主站上放置特别大的文件，尤其是图片。但现实是残酷的，有写作经验的同学都知道，在文章中放一些图片不但可以让读者更容易理解的要表达的思想，而且还有美化文章的作用。



如何解决上述的矛盾呢？ 答案就是使用图床。所谓图床，其实就是使用云存储(像阿里云、腾讯云、七牛云)来存储图片，然后用CDN进行加速。这样可以大大优化网站的访问速度。



我搭建的Blog使用的就是阿里云的云加速。对于使用阿里云加速的方法我这里就不赘述了，有兴趣的小伙伴可以到阿里的官网上自行查阅使用说明。

统计阅读次数

由于hexo自己没有提供数据库的功能，因此对文章访问次数的统计需要通过第三方云服务来提供支持。

大多数情况下，我们使用leancloud做服务统计，而且hexo中也实现了与之相关的接入代码。当然，你也可以通过云数据库来实现这个功能，至于你选择那种方案就看你自己的喜好了。



下面我就来介绍一下通过leancloud如何实现统计阅读次数这一功能。



首先，你要注册一个leancloud账户。leancloud上提供了两种用户类型，一种是developer，一种是商业用户。developer用户是免费的，但有限制。不过这种限制对于我们这种访问量很少的Blog来说是无所谓的。



注册好用户后，我们需要在leancloud上创建一个class，这里的class类似于关系型数据库中的表。class的名子是固定的，必须是Counter，只有这样 hexo 才能将数据保存到leancloud上，也才能真正的实现阅读量的统计，leancloud class创建好后，我们就要对hexo进行配置了。实际上，真正进行统计的模块是next。如果你使用的是其它主题的话，那就要找对应的统计方法。



对于next来说，它的V5版本与V7版本在使用leancloud的方法是不一样的。据说V5版本存在统计漏洞，很容易被黑客攻击，因此改为现然V7的方式了。



不过经我测试，V5的方式配置起来比较简单，V7的方式我没有验证通过。也就是说，通过V7的方法无法进行阅读量统计。我想一定是我那里没有配置对，希望有这方面经验的同学可以分享一下。



下面我们来看看如何修改next的配置使其与leancloud相联(这里讲的是V5的方法)。打开themes/next目录下的_config.yml文件，找到leadcloud_visitors关键字，修改其配置如下：

leancloud\_visitors:
  enable: true
  app\_id: <your app id>
  app\_key: <your app key>

这三个字段的含义如下，enable表示是否开启leadcloud_visitors功能，所以这个选项我们要修改为true；app_id是你注册leancloud时分配给你的ID; app_key也是你注册leancloud时分配的。只要我们将上面的参数配置好后，当你再浏览你的文章时，就会发现访问次数发生变化了。

统计文章字数

hexo本身并不支持文章字数的统计，因此要想实现这一功能我们需要安装一个插件，即hexo-symbols-count-time。在以前，大家都使用wordcount插件，但到了next V6之后hexo-symbols-count-time逐渐替代了wordcount。



下面我们来看一下如何使用hexo-symbols-count-time插件。使用它之前我们需要先将其安装好，执行下面的命令即可：

yarn add hexo-symbols-count-time --save

hexo-symbols-count-time插件安装完成后，我们要修改两个配置文件: hexo 中的_config.yml文件和next主题中的_config.yml文件。



第一步，修改hexo中的_config.xml的symbols\_count\_time项，修改配置如下：

# 设置博客单词统计
symbols_count_time:
  # 文章字数统计
  symbols: true
  # 文章阅读时间统计
  time: true
  # 站点总字数统计
  total_symbols: false
  # 站点总阅读时间统计
  total_time: false
  exclude_codeblock: false

第二步，修改 themes/next 目录下的 _config.yml 文件，仍然找 symbols_count_time 项，配置如下：

# 设置博客单词统计
symbols_count_time:
  # 是否另起一行（true的话不和发表时间等同一行）
  separated_meta: true
  # 首页文章统计数量前是否显示文字描述（本文字数、阅读时长）
  item_text_post: true
  # 页面底部统计数量前是否显示文字描述（站点总字数、站点阅读时长）
  item_text_total: false
  # 平均字长
  awl: 4
  # 每分钟阅读字数
  wpm: 275

上面的配置修改后，文章字数统计功能就算配置好了，现在只要你重新生成静态页面，然后发布出来就可以看到效果了。

如何添加评论系统

hexo还可以接入评论系统，而且可以接入多种评论系统。在从多的评论系统中，Valine是其中一款比较出众的评论系统。



hexo接入valine非常容易，就像之前介绍的接入阅读统计系统一样，它也需要在leancloud系统上创建一个类，即 Comment类，用于保存用户的评论。



因此我们在接入用户评论系统时，需要经过以下几步:

• 第一步，在leancloud上创建comment类；

• 第二步，修改 themes/next 目录下的_config.yml 文件，做如下配置：

valine:
  enable: true #是否接入valine 系统
  appid:  #LeanClound获得的appid
  appkey: #LeanClound获得的appkey
  notify: false # 邮件提醒
  verify: false # Verification code
  placeholder: 欢迎畅所欲言 # 占位字符串 
  avatar: mm #默认头像设置
  guest_info: nick #评论区的title 
  pageSize: 10 # Pagination size
  language: zh-cn # Language, available values: en, zh-cn # 语言，设为zh-cn
  # 是否开启当前文章阅读量统计
  visitor: false #这个要设置为false，以免与 leancloud_visitors 突冲 
  comment_count: true #是否在主页里也显示评论个数，为false是不显示

通过上面的设置后，你就可以在文章中看到评论区了。



实际上，我们还可以真对每一篇文章单独设置是否显示评论区，如何做呢？只要你在想要关闭评论区的文章头加上comments: false这句即可。具体例子如下：

----
title: 标签
date: 2019-07-18 15:16:50
type: "tags"
...
comments: false
---

到此为止，我们就将评论系统接入到我们的博客中了。

文章置顶

文章写好后，有一些我们认为特别好的文章希望置顶，这该如何做呢？



hexo默认的方式是按时间顺序排放文章的，也就是最后写完的文章会放在最一个。如果要打破这个规则，我们就需要给它建立一个新规则。



应该定义个什么样的规则呢？实际上已经有人帮我们想好了，就是给文章做个编号，有编号的优先排序，并且按照编号进行排序；而没有编号的再按时间排序，这样就解决了我们想将文章顶置的需求。



更好的消息时，现在hexo已经有了这样一个新的排序插件叫hexo-generator-index-pin-top，我们只需要用它替换原来老的排序插件即可。具体操作步骤如下：

• 先将老的排序插件删除掉

yarn remove hexo-generator-index

• 按装新插件

yarn add hexo-generator-index-pin-top

光安装好插件还不行，我们要想让文章置顶还要修改文章的title域，在title域中增加一个top 域，这样这篇文章就会被置顶了。例如：

----
title: xxxx
date: xxxx-xx-xx
...
top: 1
...
----

经上面这样设置后，我们想置顶的文章就会跑到主页的顶部，马上去试试看吧。



不过这里还有一个小问题，文章是置顶了，但对于用户来说却感受不到。从用户的角度看，如果不仔细观察的话还真不会发现前面几篇文章是置顶文章。有没有办法可以将置顶文章做个标识呢？



当然有办法，不过我们需要修改一点next主题的代码了。我们进行到next/layout/_macro目录下，打开post.swig文件，找到 <div class="post-meta"> 标记，然后在它下面添加如下代码：

{% if post.top %}
  <i class="fa fa-thumb-tack"></i>
  <font color=7D26CD>置顶</font>
  <span class="post-meta-divider">|</span>
{% endif %}

经过这样的设置后，我就可以在博客主页中看到前面被置顶的文章被打上标记了。打开我的博客你应该就可以看到真实的效果了。

如何开启打赏功能

hexo 中 next 主题开启打赏功能非常简单，只要稍微配置一下就可以了。在里需要普及一些支付的基本知识，对于正常的支付来说，当用户点击打赏时，可以选择要打赏的金额，之后应该调用腾讯或阿里的支付接口，最终完成支付。但对于hexo来说，显然它做不了这么复杂的交互逻辑，那它是如何做的呢？



实际上，它只是将微信/支付完的收款二维码放到网页上面来实现打赏功能的。具体的步骤如下：

• 生成收款二维码，打开微信/支付宝，将收款二维码保存成图片。

• 编辑next主题下面的_config.xmy文件，将该文件中的reward\_settings打开即可。具体配置如下：

# Reward (Donate)
reward\_settings:
  enable: true
  animation: true
  comment: 只想买包辣条

reward:
  wechatpay: /images/wechatpay.png   #微信收款码
  alipay: /images/alipay.png   #支付宝收款码
  #bitcoin: /images/bitcoin.png

通过上面的设置，我们就将hexo的打赏功能设置好了。

添加标签和分类

在hexo中给文章添加标签并给文章分类很容易，只要在文章头里加 tags 和categories域即可。如下所示：

---
title: xxx    //在此处添加你的标题。
date: 2016-10-07 13:38:49   //在此处输入编辑这篇文章的时间。
tags: [aaa, bbb, ccc]    //在此处输入这篇文章的标签。
categories: xxx, yyy    //在此处输入这篇文章的分类。
---

通过上面的例子我们可以看到，可以给一篇文章增加多个tag，也可以将文章划分到多个不同的类别中去。

除了在文章中我们可以给文章打多个标签和分类外，我们还应该将hexo next中的标签/分类入口打开，这样可以方便用户查看博客中所有的标签和分类，从而可以快速找到它们感兴趣的文章。



具体做法如下，进入到 themes/next 目录，打开_config.yml 文件，找到menu项，配置如下：

menu:
home: /|| home
tags: /tags/|| tags
categories: /categories/|| th
...

通过上面的配置，我们就将标签和分类入口打开了。不过光打开入口还不行，我们还要创建 tag 和 categories 目录和文章，执行下面的命令即可完成。

hexo new page tags/categories

执行完上述命令后，我们就可以在source目录下看到tags和categories目录了。



此时，我们重新执行hexo g生成页面，你就可以看到我们在文章中打的标签和分类被写到各目录的index文件中了。

如何设置标签云

当我在浏览其它人使用hexo搭建的博客时，发现它的标签特别炫，有一些标签用的少就会是很小的字体，而一些经常用的标签则是很大的字体。经了解才知道这就是标签云。可以通过hexo-tag-cloud插件来实现。该插件除了可以实现我上面所说的功能外，还能在你的博客的左边或右边出现标签滚动的效果。



下面我们就来看看该如何设置标签云吧。第一步自然不必多说，一定是安装插件，命令如下：

yarn add hexo-tag-cloud --save

插件安装好后，在站点的_config.yml文件中添加如下配置信息:

# hexo-tag-cloud 标签云 | see https://github.com/MikeCoder/hexo-tag-cloud
tag_cloud:
  textFont: Trebuchet MS, Helvetica # 字体
  textColor: '#555' # 字体颜色
  textHeight: 25 # 字体高度
  outlineColor: '#E2E1D1' # 字体背景色
  maxSpeed: 0.1 # 标签云最大移动速度

上面的配置信息是用于控制标签云显示的效果的。其中，maxSpeed我们要介绍一下，该值为 1 时运转的速度最快，该值为0是基本处理不动的状态。当然如果你不喜欢标签滚动的效果，则可以不设置这些信息。



对于要达到滚动效果的标签云来说，光有这些信息还不够，还要修改一点代码。打开source/layout/_macro/sidevar.swig文件，在文中搜索找到sidebar-inner 的 div 元素，在其下面加入下面这段代码：

{% if site.tags.length > 1 %}
<script type="text/javascript" charset="utf-8" src="{{ url_for('/js/tagcloud.js') }}"></script>
<script type="text/javascript" charset="utf-8" src="{{ url_for('/js/tagcanvas.js') }}"></script>
<div class="widget-wrap">
    <div id="myCanvasContainer" class="widget tagcloud">
    <canvas width="220" height="250" id="resCanvas" style="width=100%">
        {{ list_tags() }}
    </canvas>
    </div>
</div>
{% endif %}

通过上面的配置我们就将标签云设置好了。

如何添加本地搜索

在hexo中支持很多种搜索，这里我就不一一介绍了，我只用到了其中的本地搜索，并感觉hexo本地搜索的表现还是不错的，所以我也推荐大家用本地搜索。hexo本地搜索的原理很简单，就是通过hexo-generator-search插件在本地生成一个search.xml/json文件，通过这个文件实现搜索功能。



为hexo添中本地搜索功能的步骤很简单，第一步是按装插件，如下所示：

npm install hexo-generator-search
npm install hexo-generator-searchdb

然后修改 hexo 下面的配置文件_config.yml，在其中增加下面配置:

search:
  path: search.xml
  field: post
  format: html
  limit: 10000

接下来我们把本地搜索入口打开，打开next/_config.yml文件，找到local\_search选项，将该选项设置为true就好了。具体设置如下：

local\_search:
  enable: true
  # if auto, trigger search by changing input
  # if manual, trigger search by pressing enter key or search button
  trigger: auto
  # show top n results per article, show all results by setting to -1
  top\_n\_per\_article: 1
  ...

上面都配置好后，使用hexo命令重新生成代码并重新进行布署，这样我们就可以看到搜索功能的效果了。

设置关于

hexo上设置关于与设置标签是类似的，首先执行下面的命令生成关于目录和源码:

hexo new page "about"

该命令执行后，你就可以在source/ 目录下面看到about目录了。然后向 about 目录中的index.md 写入关于的信息就好了。



除此之外，我们还应该像创建标签一样在 themes/next 目录下_config.yml文件中将 about 的入口打开。示例如下：

menu:
home: /|| home
tags: /tags/|| tags
...
about: /about/|| about
...

这样我们就将关于页面加载好了。

设置404

设置 404 与设置关于是类似的，也是首先执行 hexo new page '404'命令生成对应的目录和文件，之后是编写404页面。在编写 404 页面时有一点需要注意，就是在404页面的头部要加permalink关键字，如下所示：

---
...
permalink: /404
...
---

这样当用户访问非发布的页面时，hexo会始终定位到 404 页面上。

将文章名修改为数字码

当我在hexo发布文件时发现一个问题，就是hexo生成的文章名如果有中文的话会被转码，这样就变成了一个特别长的字符串，让人看起来非常别拗。能不能将它修改为像简书一样的字符串呢？hexo同样提供了这样一个插件，叫hexo-abbrlink。我们只要装上这个插件再修改一下配置文件就OK了。下面我们就来偿试下吧。



首先还是安装插件，命令如下：

yarn add hexo-abbrlink --save

插件安装好后，我们再来修改一下配置文件，打开站目录下的_config.yml文件，找到permalink并将它的值修改为 post/:abbrlink/，之后添加abbrlink属性。具体代码如下：

...
permalink: posts/:abbrlink/
abbrlink:
  alg: crc32
  rep: hex
...

全部配置好后我们就可以重新生成静态文件了。当我们将静态文件发布出来后，你再访问文章时你就会发现以前一长号字符的地址现在已经变的非常短了。



小结

本文是我自己搭建博客的总结文章。该文记录的是从我对hexo有所了解，到逐步深入，再到一步一步搭建出我们自己比较满意的博客的过程。在整个过程中，我感触最多的是我在搭建过程中对博客技术的思考以及对技术的重新认知，这两个方面是我对hexo特别兴奋点。也正因于此，才使我写出这一万多字的文章。



原文地址



hexo博客系统的实现原理与搭建​