Hexo是一款基于Node.js的静态博客框架，依赖少易于安装使用，可以方便的生成静态网页托管在GitHub和Coding上，是搭建博客的首选框架。

博客部署

(1) 安装git

到git官网上下载（https://gitforwindows.org/）

(2) 下载node.js

windows直接进入这个网址（https://nodejs.org/en/download/），选择windows Installer一路下载就可以了。

检查以下命令，以判断node.js是否安装成功：

1
2
node -v
npm -v

(3) 安装Hexo

先在某个目录下创建一个文件夹blog，然后cd到这个文件夹下。git bash进入命令行，输入：

1
npm install -g hexo-cli

检查以下命令，以判断Hexo是否安装成功：

1
hexo -v

(4) 配置Hexo

先初始化Hexo：（假设目录名是blog）

1
hexo init blog

初始化之后，这个目录已经有一个博客的模板了，我们先来看看博客能否正常打开：

1
2
hexo generate
hexo server

输入这些命令后，到浏览器的地址栏输入：localhost:4000，如果出现了一个Hexo博客的页面，那么恭喜你已经配置成功了。

(5) 创建Github个人仓库

创建Github账号，new repository，创建一个名为：用户名.github.io的仓库。

然后检查邮箱，用户名配置以及添加SSH：

1
2
3
4
git config --global user.name "yourname"
git config --global user.email "youremail"

ssh-keygen -t rsa -C "youremail"

这样就在电脑中生成.ssh文件夹了，找到它，然后在github的设置中，找到SSH Keys的设置，点击new SSH Key，把id_rsa.pub的信息复制进去。检查是否成功：

1
ssh -T git@github.com

(6) 将Hexo部署到Github

将Hexo与Github进行关联，也就是将hexo博客部署到Github上，打开blog文件夹下的_config.yml，翻到最后，修改为：

1
2
3
4
deploy:
  type: git
  repo: https://github.com/YourgithubName/YourgithubName.github.io.git
  branch: master

安装deploy-git工具：

1
npm install hexo-deployer-git --save

最后：

1
2
3
hexo clean
hexo generate
hexo deploy

这样，过一会就可以在https://yourname.github.io 这个网站看到你的博客了！

博客个性化

原来默认的Hexo博客必然不是我们所喜欢的，我们可以通过各种个性化配置，来美化博客。

更换主题

主题对于博客的美观程度是影响最大的，我们可以选择最流行的NexT主题进行配置。使用方法也很简单：

(1) clone repo

在blog目录下，进入git bash，输入：

1
git clone https://github.com/theme-next/hexo-theme-next themes/next

(2) 进入blog目录下的_config.yml文件

在100行左右的位置，修改为：

1
theme: next

(3) 更新Hexo

1
hexo clean && hexo g && hexo d

其他美化或功能

  • menu界面：

创建tags，categories等页面

详见：https://blog.csdn.net/Wonz5130/article/details/84666519

  • 炫酷美化：

参考：https://www.jianshu.com/p/f054333ac9e6

关于文章的截断显示，可以在makedown中手动添加

1
<!--more-->

来实现。参考：https://www.jianshu.com/p/78c218f9d1e7

  • 添加萌物：

在hexo根目录下执行以下命令，安装live2d插件

1
npm install --save hexo-helper-live2d

挑选喜欢的模型，可以在这个页面中选择（https://huaji8.top/post/live2d-plugin-2.0/）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
live2d-widget-model-chitose
live2d-widget-model-epsilon2_1
live2d-widget-model-gf
live2d-widget-model-haru
live2d-widget-model-haruto
live2d-widget-model-hibiki
live2d-widget-model-hijiki
live2d-widget-model-izumi
live2d-widget-model-koharu
live2d-widget-model-miku
live2d-widget-model-ni-j
live2d-widget-model-nico
live2d-widget-model-nietzsche
live2d-widget-model-nipsilon
live2d-widget-model-nito
live2d-widget-model-shizuku
live2d-widget-model-tororo
live2d-widget-model-tsumiki
live2d-widget-model-unitychan
live2d-widget-model-wanko
live2d-widget-model-z16

本人安装的是 live2d-widget-model-koharu

1
npm install live2d-widget-model-koharu

接下来：

  1. 在hexo的根目录创建名为live2d_models的文件夹

  2. 把之前安装的模型文件夹从node_modules文件夹复制到live2d_models中

  3. 在hexo根目录下的_config.yml中的最后面添加以下内容

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    live2d:
      enable: true
      scriptFrom: local
      pluginRootPath: live2dw/
      pluginJsPath: lib/
      pluginModelPath: assets/
      tagMode: false
      debug: false
      model:
        use: live2d-widget-model-haruto
      display:
        position: right
        width: 150
        height: 300
      mobile:
        show: true
  • 添加文章置顶

参考：

Hexo默认只提供了按发布日期排序文章的方式，如果不修改js文件，只是在文章中添加top值，就只会显示置顶标签，但是文章并不会排在最前面。

解决置顶问题有两种方式：

1，手动修改相关文件

2，直接安装相关的node_module

我采用的是第一种的方法：修改Hexo根目录下的node_modules/hexo-generator-index/lib/generator.js，在生成文章之前进行top排序。

需添加的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
posts.data = posts.data.sort(function(a, b) {
    if(a.top && b.top) { // 两篇文章top都有定义
        if(a.top == b.top) return b.date - a.date; // 若top值一样则按照文章日期降序排
        else return b.top - a.top; // 否则按照top值降序排
    }
    else if(a.top && !b.top) { // 以下是只有一篇文章top有定义，那么将有top的排在前面（这里用异或操作居然不行233）
        return -1;
    }
    else if(!a.top && b.top) {
        return 1;
    }
    else return b.date - a.date; // 都没定义按照文章日期降序排
});

其中js的比较函数：

1
2
3
cmp(var a, var b) {
    return  a - b; // 升序，降序的话就 b - a
}

修改完成后，只需要在front-matter中设置需要置顶文章的top值，将会根据top值大小来选择置顶顺序top值越大越靠前。需要注意的是，这个文件不是主题的一部分，也不是Git管理的，备份的时候比较容易忽略。

以下是最终的generator.js内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
'use strict';

var pagination = require('hexo-pagination');

module.exports = function(locals) {
  var config = this.config;
  var posts = locals.posts.sort(config.index_generator.order_by);

  posts.data = posts.data.sort(function(a, b) {
      if(a.top && b.top) {
          if(a.top == b.top) return b.date - a.date;
          else return b.top - a.top;
      }
      else if(a.top && !b.top) {
          return -1;
      }
      else if(!a.top && b.top) {
          return 1;
      }
      else return b.date - a.date;
  });

  var paginationDir = config.pagination_dir || 'page';

  return pagination('', posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};
  • 为某些文章设置加密查看

参考：https://xsin.gitee.io/2019/01/11/hexo-blog-encrypt/

(1)安装相关的库：npm install --save hexo-blog-encrypt

(2)在站点配置文件_config.yml中添加：

1
2
3
4
# Security
##
encrypt:
    enable: true

(3)在相关文章的头部加上对应的字段：password, abstract, message

1
2
3
4
5
6
7
8
9
---
title: hello world
date: 2016-03-30 21:18:02
tags:
    - fdsafsdaf
password: Mike
abstract: Welcome to my blog, enter password to read.
message: Welcome to my blog, enter password to read.
---

个人域名配置

参考：https://xiangzhihong.blog.csdn.net/article/details/53355036

注意：需要在/source/下自己新建CNAME文件，写入购买的域名，再将hexo推到github上。否则直接修改github page，在hexo下次部署时，github自动创建的CNAME文件被删除，就会链接失败。

功能简介

（1）发布/删除文章

发布/删除只需要在hexo根目录中的source/_post/文件夹下创建/删除 md文件，并输入 hexo d -g 就可以了。

发布也可以用 hexo new "文章名" 来创建。

（2）写文章时插入图片

在本地写makedown的时候能看到图片，但是部署之后，在网页上却看不到

具体解决办法参考：https://fuhailin.github.io/Hexo-images/

常见问题

（1）配置博客后，进入的页面访问出现一堆英文，如下：

1
{% extends ‘_layout.swig‘ %} {% import ‘_macro/post.swig‘ as post_template %}

这是因为hexo在5.0之后把swig给删除了，需要自己手动安装，输入以下命令：

1
npm i hexo-renderer-swig

（2）博客显示时没有css样式

这个问题可能是因为hexo根目录中_config.yml中的url配置有问题，可以配置成：（也跟hexo版本有关，这个方法不一定都可行）

1
url: https://yourgithubname.github.io

（3）侧边栏头像下面的日志跳转失败

这个是hexo主题的bug。可以找到\theme\next\layout\_macro\sidebar.swig，在49行左右：

1
<a href="{{ url_for(theme.menu.archives).split('||')[0] | trim }}">

将其修改为：

1
<a href="{{ url_for(config.archive_dir) | trim }}">

（4）分页时，出现多余的标签代码

这也是一个主题bug，可以找到\themes\next\layout\_partials\pagination.swig，将：

1
2
3
4
5
6
7
8
9
10
11
{% if page.prev or page.next %}
  <nav class="pagination">
    {{
      paginator({
        prev_text: '<i class="fa fa-angle-left"></i>',
        next_text: '<i class="fa fa-angle-right"></i>',
        mid_size: 1
      })
    }}
  </nav>
{% endif %}

替换为：

1
2
3
4
5
6
7
8
9
10
11
12
{%- if page.prev or page.next %}
  <nav class="pagination">
    {{
      paginator({
        prev_text: '<i class="fa fa-angle-left" aria-label="' + __('accessibility.prev_page') + '"></i>',
        next_text: '<i class="fa fa-angle-right" aria-label="' + __('accessibility.next_page') + '"></i>',
        mid_size : 1,
        escape   : false
      })
    }}
  </nav>
{%- endif %}

扩展功能

以下todo-list为本博客未来的扩展功能：

  • 实现字数统计，预计阅读时间
  • 实现评论系统（出了些问题，无法显示）
  • 配置个人域名
  • 相关文章加密