这个系列记录我最初把博客搭起来的那段过程：第一篇是从安装 hexo-cli 到部署文章的完整上手流程；第二篇是围绕 NexT 主题的各种折腾——站点配置、abbrlink、favicon、侧边栏、emoji、背景图与注脚；第三篇则是用 LeanCloud 给文章加上阅读量统计。

Hi,米娜桑。这里是 ZRoger 的博客。由GitHub Page和Hexo构成。 所以在这篇文章中，我记录了关于一些Hexo的东西。

关于 Hexo

什么是 Hexo：

让我们看下官方的回答：Hexo是一个快速，简洁且高效的博客框架。Hexo使用Markdown(或者其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态页面。

我觉得它还是比较受欢迎，当你想记录生活中的事情，无论是琐碎的日志，技术分享，或者其他。都可以使用Hexo创建你的静态博客。但是在文章管理方面并不是很好，但我觉得还是可以一试的。

安装 Hexo

注意 目前只记录了在window系统下的过程。其他系统暂时没有办法涉及，以后有机会再补上。

1. 首先需要安装好Node.js和Git，Node.js用于安装Hexo，而Git则用于连接我们的远程仓库，别忘了创建自己的GitHub账号。下面是检查系统中Node.js版本，使用Git工具打开。

$ node -v

2. 使用git bash全局安装hexo-cli，为创建博客做准备。

$ npm install -g hexo-cli

3. 在GitHub上创建对应的用户名仓库，格式：github用户名.github.io

4. 在本地创建文件夹blog,打开该文件夹后，输入hexo init进行初始化。

$ cd blog
$ hexo init

5. 安装所需依赖

$ npm install

6. 将Hexo与GitHub Page关联。

先检查Git中是否有设置user name和email。

$ vi ~/.gitconfig

或者

$ git config user.name
$ git config user.email

如果没有信息，输入命令进行设置

$ git config --global user.name "你的名字"
$ git config --global user.eamil "你的邮箱"

之后，再检查本地中是否存在/.ssh：

$ cd ~/.ssh
$ ls

接着生成密钥，用于关联到你的GitHub账号中：

$ ssh-keygen -t rsa -C "你的邮箱"

7. 在连续回车 3 次，就生成密钥和公钥。将id_rsa.pub填到GitHub账户上。然后使用添加密钥到ssh-agent:

$ eval "$(ssh-agent -s)"

添加生成的ssh key到ssh-agent中

$ ssh-add ~/.ssh/id_rsa

关ssh-agent 是一个密钥管理器，将私钥交给ssh-agent保管后，其他程序需要身份验证的时候，就可以将验证的申请交给ssh-agent来完成。这里是解决每次Hexo部署新文章的时候，不需要重复输入登录名和密码。配置ssh-key让Git到GitHub切换自如，不用再验证身份。

8. 测试一下

$ ssh -T [email protected]

9. 修改blog文件夹下面的_config.yml文件，添加远程仓库

1
deploy:
2
  type: git
3
  repository: 你的仓库的ssh
4
  branch: master

生成和部署文章

新建一篇文章

10. 在git bash中输入：

$ hexo new post 文章名字

# -p 参数可以指定文章的路径
$ hexo new post -p hello/hello-world # 注意里面的title为post

# 此时里面的title为hello-world
# hexo new post title -p dir/filename
$ hexo new post hello-world -p hello/hello-world

11. 在生成以及部署文章之前，需要再安装一个扩展，不然很有可能你的文章会部署失败:

$ npm install hexo-deployer-git --save

12. 生成静态文件，然后在本地上先看下效果

$ hexo g

启动 Hexo 服务器，默认的端口4000：

$ hexo s

13. 部署文章到服务器上，查看的地址格式：github用户名.github.io

$ hexo d

当然也可以简单点，直接生成并更新文章到GitHub上：

$ hexo d -g

小结一下

大概的流程是这样的，Hexo将编辑好的md文件生成静态Web文件，当然还有其他的文件，再上传到GitHub上，添加ssh-agent，方便每次部署你的文章。

这里将记录关于Hexo一些东西，关于NexT主题，还有修改博客的东西都记录在这里。

Hexo 的文件结构

使用hexo init初始化文件夹，并在安装好所需的依赖，其文件夹的结构：

1. .deploy_git：是上传到GitHub中，如果你想添加一些额外东西的话，可以到下面的public文件夹中进行添加，然后在使用hexo d -g部署到GitHub中。

2. node_modules：是Hexo运行时需要的一些依赖文件。

3. public：和.deploy_git一样，生成的静态文件，只不过不用上传而已

4. scaffolds：是一些模板文件，可以预先定义一些博文的模板，通用的格式

5. source：我们编辑的md文件生成对应的静态文件就在这里，还有生成的一些分类文件夹也在这里。

6. themes：存放主题文件的地方。

7. .gitigonre：过滤上传的文件

8. _config.yml：站点配置文件

9. db.json：Hexo 生成的缓存文件

10. package-lock.json和package.json：类型 Maven 项目的 pom.xml，目的是记录当前项目安装哪些依赖。

站点配置文件：_config.yml

网站设置

1
title: 网站标题
2
subtitle: 网站副标题
3
description: 网站描述，这里的作用是便于搜索引擎找到你的博客
4
author: 作者
5
language: 网站使用的语言
6
timezone: 时区，默认是电脑使用的时区

网址

1
url: 网址
2
root: 网站根目录，默认为： /
3
permalink: 文章的永久链接格式，默认为： :year/:month/:day/:title/
4
permalink_defaults: 永久链接中各部分的默认值

注：若是把博客网站放在子目录中，比如：http://yoursite.com/blog，则需要将root改为/blog/

permalink - 生成的链接

​ 按照默认的生成规则，文字链接的格式是 时间 +文章名 这样的形式。如果你的文章名是中文的话，就会造成一定程度上面的困扰，也不利于SEO。

​ 所以可以借助hexo-abbrlink，修改生成规则，减少链接的层级。 但是对hexo-asset-image有影响，需要在文章头部修改abbrlink。安装命令如下：

$ npm install hexo-abbrlink --save

之后修改站点配置文件：

1
permalink: post/:abbrlink.html
2
abbrlink:
3
  alg: crc32 # 算法
4
  rep: dec # 进制

重新部署后，文章的abbrlink由算法生成，如下形式的：

1
http://localhost:4000/post/17e96663.html
2
http://localhost:4000/post/17e96663.html

同时，也可以直接修改abbrlink的值，直接自定义

1
abbrlink: '17e96663`
2
abbrlink: 'Hello-World`

hexo-asset-image& 图片

关于hexo-asset-image，原本引用图片的命令是：

1
![代替文字](图片名.jpg)
2
![代替文字](./md文件名/图片)

使用hexo-abbrlink插件，可以自定义abbrlink的值，来简化引入图片

如果你对这个插件比较感兴趣，可以去看下hexo-abbrlink 的官网。

改造 Hexo 博客 todoList¹

NexT 仓库地址 https://github.com/theme-next

核心配置

override

1
# 用于更新 NexT 项目
2
 override: false
3
 override: true

网站信息设置

favicon - 站点图标

先选好一张图片，然后到这里生成相应的图片，然后把图片放在主题的资源文件夹/themes/next/source/images/下面，我新建了一个favicon文件夹用来存放站点图标

1
favicon:
2
  small: /images/favicon/favicon-16x16-next.png
3
  medium: /images/favicon/favicon-32x32-next.png
4
  apple_touch_icon: /images/apple-touch-icon-next.png
5
  safari_pinned_tab: /images/logo.svg
6
  #android_manifest: /images/manifest.json
7
  #ms_browserconfig: /images/browserconfig.xml

keywords - 默认关键词

1
# Set default keywords (Use a comma to separate)
2
keywords: "Something Good"

rss - 订阅设置

无修改

footer - 页脚

1
footer:
2
  # 建站年份
3
  since: 2018
4
  # 年份后面的图标，为 Font Awesome 图标
5
  # https://fontawesome.com/v4.7.0/icons/
6
  icon: rocket
7
  # 作者
8
  copyright:
9
  # 是否展示Hexo的地址
10
  powered: true
11

12
  # 是否展示使用Hexo的主题
13
  theme:
14
    # Theme & scheme info link (Theme - NexT.scheme).
15
    enable: true
16
    # Version info of NexT after scheme info (vX.X.X).
17
    version: true
18

19
  # 自定义文本
20
  #custom_text: 'Hello'

SEO 设置

无修改

菜单设置

1
menu:
2
  home: / || home
3
  about: /about/ || vcard
4
  tags: /tags/ || tags
5
  archives: /archives/ || calculator
6

7
 #  开启图标
8
menu_icons:
9
  enable: true

主题方案选择

1
# Schemes
2
#scheme: Muse
3
#scheme: Mist
4
 scheme: Pisces
5
#scheme: Gemini

侧边栏设置

1
 # 社交链接
2
 social:
3
   GitHub: https://github.com/yourname || github
4

5
# Blog rolls
6
 # 侧栏友链设置
7
 links_icon: globe
8
 links_title: 神奇的链接
9
 #links_layout: block
10
 links_layout: inline
11
 links:
12
  UserA: xxxx
13
  UserB: ssss
14

15
# 侧边栏头像设置
16
# Sidebar Avatar
17
# in theme directory(source/images): /images/avatar.gif
18
# in site  directory(source/uploads): /uploads/avatar.gif
19
# 将头像放在blog/source/uploads中（新建uploads）
20
 avatar: /uploads/logo.jpg

emoji 表情（有问题）

先安装hexo-filter-github-emojis

npm install hexo-filter-github-emojis --save

安装完成后，修改站点配置文件

1
# emoji表情支持
2
githubEmojis:
3
 enable: true
4
 idName: github-emoji
5
 unicode: false
6
 styles:
7
 localEmojis:

接着我们要修改下这个插件，这里和reuixiy就不同了

1
if (options.inject) {
2
      $('body').append(`<script>
3
        document.querySelectorAll('.${options.className}')
4
        document.querySelectorAll('#${options.className}')
5
          .forEach(el => {...});
6
      </script>`)
7
}
8
.
9
.
10
.
11
 return `<span class="${options.className}" style="${styles.join(';')}" data-src="${emojis[name].src}">${codepoints}</span>`
12
 return `<span id="${options.className}" style="${styles.join(';')}" data-src="${emojis[name].src}">${codepoints}</span>`

最后补点东西

1
// 自定义emoji样式
2
img#github-emoji {
3
    margin: 0px;
4
    padding: 0px;
5
    display: inline !important;
6
    vertical-align: text-bottom;
7
    border: none;
8
    cursor: text;
9
    box-shadow: none;
10
}
11
// 文章超链接样式（为emoji特设）
12
.post-body a {
13
    border-bottom: none;
14
    text-decoration: underline;
15
}
16
.post-body a:hover {
17
    border-bottom: none;
18
    text-decoration: underline;
19
}
20
// 标签云页面超链接样式（为emoji特设）
21
.tag-cloud a {
22
    border-bottom: 1px solid rgb(80, 115, 184);
23
    text-decoration: none;
24
}
25
.tag-cloud a:hover {
26
    border-bottom: 1px solid rgb(161, 102, 171);
27
    text-decoration: none;
28
}
29
// 文章元数据中categories的样式（为emoji特设）
30
a.categories {
31
    border-bottom: none;
32
    text-decoration: underline;
33
}
34
a.categories:hover {
35
    border-bottom: none;
36
    text-decoration: underline;
37
}
38
// tabs标签（为emoji特设）
39
.post-body .tabs ul.nav-tabs li.tab a {
40
    text-decoration: none;
41
}
42
// 图片下方标题设置（为emoji特设）
43
a.fancybox{
44
    text-decoration: none !important;
45
}
46
// 按钮样式（为emoji特设）
47
.btn {
48
    text-decoration: none !important;
49
    border: 2px solid #222 !important;
50
}

然后直接去 Emoji Cheat Sheet 点一下自己想要的表情复制，再粘贴到自己的文章中即可😝😎🐾

背景图片

我们需要用到jquery-backstretch，然后修改如下文件：

1
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>
2
  <script>
3
  $("body").backstretch("https://背景图.jpg");
4
  </script>
5
</body>

当然还有另外的方法：

1
// 站点背景
2
@media screen and (min-width:1200px) {
3

4
    body {
5
        background-image:url(/images/图片);
6
        background-attachment:fixed;
7
        background-position:50% 50%;
8
        opacity: 0.97;
9
    }
10

11
    #footer a {
12
        color:#eee;
13
    }
14
}

文章注脚

安装hexo-footnotes²

npm install hexo-footnotes --save

使用的方法：

1
basic footnote[^1]
2
here is an inline footnote[^2](inline footnote)
3
and another one[^3]
4
and another one[^4]
5

6
[^1]: basic footnote content
7
[^3]:
8
    paragraph
9
    footnote
10
    content
11

12
[^4]: footnote content with some [markdown](https://en.wikipedia.org/wiki/Markdown)

引用

用法：

1
人生乃是一面镜子， 从镜子里认识自己， 我要称之为头等大事，
2
也只是我们追求的目的！

效果：

人生乃是一面镜子， 从镜子里认识自己， 我要称之为头等大事， 也只是我们追求的目的！

note 标签

现在主题中启动 note 标签

1
# Note tag (bs-callout).
2
note:
3
  # 风格
4
  style: flat
5
  # 要不要图标
6
  icons: true
7
  # 圆角矩形
8
  border_radius: 3
9
  light_bg_offset:

1
<div class="note default"><p>default</p></div>

其他还有primary,success,info,warning,danger，若不想要带有图标可以用no-icon

参考资料

​

关于文章阅读数量，可以使用LeanCloud，还有Google的，或者是不蒜子统计

这里选用的LeanCloud，可以看 doublemine 这篇文章

时间：2020 年 4 月 5 日

如果 LeanCloud 的服务长时间不用，会被停掉并且归档，所以还是需要时不时上去看看~