Hexo搭建个人博客终极指南

Hexo 是一个基于 NodeJs 的博客框架，利用 Markdown 解析文章内容，可以在几秒内生成静态网页。本文详细介绍了 Hexo 搭建个人博客的全过程，包括安装步骤、后台模式启动、主题更换、构建分类列表页、添加评论功能以及使用 Hexo-Admin 插件发布文章。实践环境为 Ubuntu 16.04，适合新手快速上手搭建属于自己的博客系统。

一、前言

Hexo 是一个基于 NodeJs 的博客框架，能够快速搭建博客系统。它采用 Markdown（简称 MD）来解析文章内容，并在几秒内生成美观的静态网页。

推荐使用 Hexo 的三大理由：

1. 提供了丰富的主题选择
2. 使用 MD 解析文章，MD 是当前主流的文章格式
3. 可以快速生成静态网页，对系统性能要求低

本文将涵盖以下内容：

• Hexo 安装
• 以后台模式启动 Hexo
• Hexo 主题更换
• 构建 Hexo 分类列表页
• 添加评论功能
• 使用 Hexo-Admin 插件更方便地发布文章

本文的实践环境为 Ubuntu 16.04。

二、Hexo 安装

步骤1：安装 NodeJs 环境

下载对应平台的安装包，访问网址：https://nodejs.org/en/download/，找到合适的版本进行下载。如果是 Windows 平台，可以直接使用 .msi 文件进行傻瓜式安装；如果是 Linux 系统，需要下载安装包并上传到服务器，进行后续操作。

解压并设置全局变量后，NodeJs 环境即已安装完毕。使用命令查看 NodeJs 版本：

node -v

步骤2：安装 Hexo 脚手架

所谓的“脚手架”就是安装对应的客户端，使其具备操作自身的能力。例如，Hexo 脚手架可以创建 Hexo 框架项目、新建页面、编译和发布运行 Hexo 项目。

步骤3：初始化 Hexo

使用命令进行初始化：

hexo init

步骤4：启动 Hexo

hexo s 是 hexo server 的缩写。正常启动后，在浏览器输入 http://localhost:4000/ 即可查看搭建好的 Hexo 博客，非常便捷。

三、后台模式启动 Hexo

虽然我们已经搭建好了博客，但在退出控制台后发现无法访问，这是因为启动 Hexo 的命令终止了。此时，我们需要使用后台模式来启动 Hexo。

与后台启动 NodeJs 类似，我们有两种方式可以实现后台模式启动：

1. 使用 Linux 自带的 nohup 命令启动
2. 使用第三方守护线程的方式启动，比如 PM2

接下来我们分别实现以上两种方式。

3.1 使用 nohup 模式启动

nohup 启动命令如下，其中 -p 80 指定端口号：

nohup hexo server -p 80 &

停止命令：

killall hexo

3.2 使用 PM2 启动

步骤1：安装 PM2

npm install pm2 -g

步骤2：编写启动脚本

在博客根目录创建 app.js，代码如下：

const { exec } = require('child_process');
exec('hexo server -p 80', (error, stdout, stderr) => {
    if (error) {
        console.log(`exec error: ${error}`);
        return;
    }
    console.log(`stdout: ${stdout}`);
    console.log(`stderr: ${stderr}`);
});

步骤3：启动项目

进入博客根目录，输入命令：

pm2 start app.js

更多 PM2 命令：

pm2 stop all # 停止所有应用
pm2 restart all # 重启所有应用
pm2 delete all # 删除所有应用
pm2 list # 查看所有应用

3.3 总结 nohup 和 PM2 的区别：

• nohup 使用更简单
• PM2 功能更强大，提供完善的日志信息，可以查看详细的运行情况
• PM2 有相应的管理视图，便于多应用的管理和运行
• PM2 可以设置多实例运行 NodeJs 程序，充分利用系统资源

四、主题更换

Hexo 的另一个优势在于它有许多主题可供选择。方法地址：https://hexo.io/themes/

选择你喜欢的主题，以“MaterialFlow”为例，更换步骤如下：

步骤1：下载主题

访问：https://github.com/stkevintan/hexo-theme-material-flow，点击“Clone or download” => “Download ZIP”下载文件到本地。

步骤2：复制主题到服务器

将下载好的文件解压后，拷贝到 Hexo 的 themes 目录下。

步骤3：修改配置文件

找到 Hexo 根目录的 _config.yml，修改：

theme: material-flow

继续更改根目录的 _config.yml 文件为自己的信息，比如 title，author 等，可以参照这个配置文件：

https://github.com/stkevintan/hexo/blob/master/_config.yml

而主题 material-flow 下也有一个 _config.yml 文件，这个文件是配置使用过程的，比如分类、标签的名称顺序等，查找配置文件：

https://github.com/stkevintan/hexo/blob/master/themes/material-flow/_config.yml

步骤4：重启项目

到目前为止已经完成了主题的更换。如果使用 nohup，使用“killall hexo”停止，然后重新启动项目；如果使用 PM2，使用“pm2 restart all”重启项目，查看新换的主题吧。

五、构建 Hexo 分类列表页

使用 Hexo 时没有分类集合页面，需要用户自己创建，步骤如下：

步骤1：创建分类页面

步骤2：配置分类导航

打开主题内的 _config.yml（注意不是根目录的 _config.yml），配置如下：

menu:
  - name: 首页
    slug: home
    url: /
  - name: 分类
    slug: categories
    url: /categories

将分类显示到导航的第二个，如下图：

步骤3：修改模板

打开文件 layout/_partial/article.ejs，找到：

<div class="article-entry" itemprop="articleBody">

替换 div 的所有内容为下面这段代码：

<div class="article-entry" itemprop="articleBody">
  <%- page.content %>
</div>

步骤4：修改样式

以“material-flow”主题为例，打开文件“themes/material-flow/source/less/_article.less”，在文件底部添加以下样式：

/*tag-cloud*/
.tag-cloud {
  text-align: center;
  margin-top: 50px;
}
.tag-cloud a {
  display: inline-block;
  margin: 10px;
}
.tag-cloud-title {
  font-weight: 700;
  font-size: 24px;
}
.tag-cloud-tags {
  margin-top: 15px;
  a {
    display: inline-block;
    text-decoration: none;
    font-weight: normal;
    font-size: 10px;
    color: #fff;
    line-height: normal;
    padding: 5px 5px 5px 10px;
    position: relative;
    border-radius: 0 5px 5px 0;
    font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace;
    &:hover {
      opacity: 0.8;
    }
    &:before {
      content: " ";
      width: 0;
      height: 0;
      position: absolute;
      top: 0;
      left: -18px;
      border: 9px solid transparent;
    }
    &:after {
      content: " ";
      width: 4px;
      height: 4px;
      background-color: #fff;
      border-radius: 4px;
      box-shadow: 0 0 0 1px rgba(0, 0, 0, .3);
      position: absolute;
      top: 7px;
      left: 2px;
    }
  }
  a.color1 {
    background: #FF945C;
    &:before {
      border-right-color: #FF945C;
    }
  }
  a.color2 {
    background: #F5C7B7;
    &:before {
      border-right-color: #F5C7B7;
    }
  }
  a.color3 {
    background: #BA8F6C;
    &:before {
      border-right-color: #BA8F6C;
    }
  }
  a.color4 {
    background: #CFB7C4;
    &:before {
      border-right-color: #CFB7C4;
    }
  }
  a.color5 {
    background: #7B5D5F;
    &:before {
      border-right-color: #7B5D5F;
    }
  }
}
/*category-all-page*/
.category-all-page {
  margin-top: 50px;
  .category-all-title {
    font-weight: 700;
    font-size: 24px;
    text-align: center;
  }
  .category-list-item:after {
    content: '';
    clear: both;
    display: table;
  }
  .category-list-count {
    float: right;
    margin-left: 5px;
  }
  .category-list-count:before {
    content: '一共 ';
  }
  .category-list-count:after {
    content: ' 篇文章';
  }
}

效果如下图：

如上的配置设置完之后，还差一步给文章设置了分类之后，才会显示出来。

步骤5：设置文章属性

在 MD 文件开头添加如下属性：

---
title: RabbitMQ在Ubuntu上的环境搭建
date: 2018-06-02
tag: "rabbitmq"
categories:
  - [Java]
  - [MQ]
---

其中：

• title 文章标题
• date 文章发布日期
• tag 文章标签
• categories 文章分类，多个独立的分类使用上面代码的格式

设置了文章分类之后，所有文章的分类就会自动显示出来了。

六、添加评论功能

本文对接的评论为畅言，畅言是 SOHU 出品的，在行业中广泛使用，例如 17173、人民网、中国新闻网等。优点是对接简单，国内的速度快，不需要 FQ；缺点是嵌套的域名需要备案。

步骤1：注册畅言账号

访问：https://changyan.kuaizhan.com/ 注册账号，按照畅言的引导注册应用，获取评论安装代码，每个应用的都不一样，其中 appid 和 conf 是独立的，复制畅言评论安装代码。

步骤2：修改主题配置

找到主题下的 _config.yml，在底部添加：

changyan:
  on: true

步骤3：修改代码

打开文件“material-flow/layout/_partial/article.ejs”，替换代码：

<div class="article-entry" itemprop="articleBody">
  <%- page.content %>
</div>

为：

<div class="article-entry" itemprop="articleBody">
  <%- page.content %>
  <div id="SOHUCS" sid="<%- page.path %>"></div>
  <script charset="utf-8" type="text/javascript" src="https://cy-cdn.kuaizhan.com/upload/changyan.js"></script>
  <script type="text/javascript">
    window.changyan.api.config({
      appid: '你的appid',
      conf: '你的conf'
    });
  </script>
</div>

修改完之后，重启项目。

评论效果如下：

七、使用 Hexo-Admin 更方便地发布文章

使用 Hexo 虽然快捷，但每次发布文章都需要手动发布到服务器上，并且还要进行服务器重启，这是一件很麻烦的事情。那么有没有简单的方法，可以直接通过后台进行文章录入和发布呢？

这就是 Hexo-Admin 插件的作用，让你可以直接通过后台管理和新增文章，真是太爽了。接下来我们看看实现步骤。

步骤1：安装 Hexo-Admin 插件

npm install --save hexo-admin

步骤2：启动插件

经过上面安装已经完成了 hexo-admin 的安装，这个时候只需要重启项目，访问 http://localhost/admin/ 就可以看到管理后台了，如下图：

步骤3：设置密码

我们发现第一次登录是没有密码的，这可不行，接下来我们要设置一个密码。点击管理后台的“Settings”，如下图：

进入页面之后，输入用户名、密码，保存生成的账号信息，复制到根目录下的 _config.yml 文件最底部，配置账号信息，如下图：

重启服务，这个时候，我们重新访问 http://localhost/admin/，发现生效了，我们只有输入正常的用户名或者密码才能进入系统。

文章的添加和修改与简书类似，这里就不再详细描述了，用户可以自己慢慢研究。

八、总结

到目前为止，我们已经把整个博客系统搭建起来了，包括与用户的互动留言。如果需要打赏功能的话，可以在 article.ejs 文章下面贴上自己的微信或支付宝的二维码。当然，还有很赞的博客搜索功能，Hexo 也是直接支持的，不需要用户过多的配置。就这样，这个博客系统已经搭建完毕了。

本篇关于《Hexo搭建个人博客终极指南》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！