Hexo博客调教笔记

Hexo 安装与配置

Hexo安装

自行百度 | 官方文档

测试环境

操作系统: MacOS Sierra 10.12.6
博客主题: next

启动搜索功能

首先到博客根目录(这里指你 Hexo init 后的博客目录)执行:

1
npm install hexo-generator-search --save

然后到你的主题目录下修改 _config.yml 文件
我使用的是Next主题,进入博客根目录,找到 themes/next/_config.yml 文件,搜索 local_search:
会看到如下内容:

1
2
3
4
5
6
7
8
9
10
11
# Local search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
enable: false
# 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
# unescape html strings to the readable one
unescape: false

enable: false 改成 enable: true 即可启用本地搜索功能。
然后在 themes/next/_config.yml 文件中添加:

1
2
3
4
5
6
# Search
search:
path: search.xml
field: post
format: html
limit: 10000

启用本地图片

博客中往往会频繁使用到图片,外链图片到博客最简单的方法就是

1
!(图片描述 可选)[图片链接]

但是往往去找一个靠谱的图床是一件很头疼的事情,如果你的服务器带宽够大,可以选择使用本地图片,开启本地图片的方法:
首先进入博客根目录,编辑 _config.yml 文件,找到 post_asset_folder:false 修改为 post_asset_folder:true
然后在博客根目录执行

1
npm install https://github.com/CodeFalling/hexo-asset-image --save

此时你使用 hexo new "一篇博客" 的时候,会在博客根目录下 source/_posts/ 下创建与博客同名的文件夹用于存放本地图片,方便在博客中调用。
博客调用本地图片时如下:

1
![“图片描述”(可以不写)](/文件夹名/你的图片名字.JPG)

插入音乐

例如网易云,直接获取播放器外链,iframe代码直接写到Blog中即可。

启用分类页

首先执行:

1
hexo new page "categories"

新建一个页面为 categories 的分类页面,然后会自动在博客根目录下的 source/_posts/ 生成一个 categories 的目录,里面有一个 index.md
打开看看内容如下:

1
2
3
4
---
title: "categories"
date: 2018-02-22 11:44:07
---

修改成如下

1
2
3
4
5
6
---
title: 文章分类
date: 2018-02-22 11:44:07
type: "categories"
comments: false
---

这里就是需要添加一个 type 字段,类型值为 categories

如果启用过 多说 或者是 Disqus 等评论插件,默认页面也会带评论,需要关闭则添加 comments 字段,并设置值为 false

进入博客根目录 ,找到 themes/next/_config.yml ,找到主题配置文件,修改其 menu 标签。

1
2
3
4
5
menu:
home: / || home
tags: /tags/ || tags
categories: /categories/ || th
archives: /archives/ || archive

这里把 categories 标签前面的注释 # 去掉即可。

启用标签页

首先执行:

1
hexo new page "tags"

新建一个页面为 tags 的标签云页面,然后会自动在博客根目录下的 source/_posts/ 生成一个 tags 的目录,里面有一个 index.md
打开看看内容如下:

1
2
3
4
---
title: "tags"
date: 2018-02-22 11:44:07
---

修改成如下

1
2
3
4
5
6
---
title: 标签云
date: 2018-02-22 11:44:07
type: "tags"
comments: false
---

这里就是需要添加一个 type 字段,类型值为 tags

如果启用过 多说 或者是 Disqus 等评论插件,默认页面也会带评论,需要关闭则添加 comments 字段,并设置值为 false

进入博客根目录 ,找到 themes/next/_config.yml ,找到主题配置文件,修改其 menu 标签。

1
2
3
4
5
menu:
home: / || home
tags: /tags/ || tags
categories: /categories/ || th
archives: /archives/ || archive

这里把 tags 标签前面的注释 # 去掉即可。

博客中添加标签的方法

source/_posts 中找到你创建的博客,编辑头部内容,格式如下:

1
2
3
4
5
6
7
8
9
---
title: Hexo博客调教日记
date: 2018-02-21 17:16:03
categories: "Hexo教程"
tags:
- Hexo
- Next
description: 记录自己安装与使用Hexo时踩过的坑与解决方法
---

当然 tags 标签也可以这么写

1
2
3
4
5
---
... (此处省略前后文)
tags: [Hexo,Next]
...
---

categories 字段为分类,description 字段为描述。

标签删除的方法

理论上在 MD 文件的头部可以删除标签 然后重新生成可以更新 tags 标签页
如果无法成功删除的时候,可以尝试下面的方法:
删除根目录的 db.json 然后 hexo clean && hexo g

添加RSS

需要安装 hexo-generator-feed 插件

RSS还需要一个Feed链接,而这个链接是通过 hexo-generator-feed 插件生成的,所以要先安装插件:

1
npm install hexo-generator-feed --save

然后去配置 站点配置文件 里的Feed信息:

1
vim _config.yml

找到如下内容:

1
2
3
4
5
6
# 配置RSS
feed:
type: atom
path: atom.xml
limit: 20
content: 'true'

feed 属性下的各个子属性的含义借用feed官方英文解释如下:

  • type - Feed type. (atom/rss2)
  • path - Feed path. (Default: atom.xml/rss2.xml)
  • limit - Maximum number of posts in the feed (Use 0 or false to show all posts)
  • hub - URL of the PubSubHubbub hubs (Leave it empty if you don’t use it)
  • content - (optional) set to ‘true’ to include the contents of the entire post in the feed.

SEO优化

seo优化对于网站是否能被搜索引擎快速收录有很大帮助,因此适当做一些seo还是有必要的,以下内容参考:https://lancelot_lewis.coding.me/2016/08/16/blog/Hexo-NexT-SEO/

添加Sitemap文件

安装以下2个插件,然后重启hexo后,网站根目录(source)下会生成sitemap.xml与baidusitemap.xml文件,搜索引擎在爬取时会参照文件中的url去收录。

1
2
3
4
npm install hexo-generator-sitemap --save-dev
hexo d -g
npm install hexo-generator-baidu-sitemap --save-dev
hexo d -g

添加robots.txt

新建robots.txt文件,添加以下文件内容,把robots.txt放在hexo站点的source文件下。

1
2
3
4
5
6
7
8
9
User-agent: * Allow: /
Allow: /archives/
Disallow: /vendors/
Disallow: /js/
Disallow: /css/
Disallow: /fonts/
Disallow: /vendors/
Sitemap: http://你的博客域名/sitemap.xml
Sitemap: http://你的博客域名/baidusitemap.xml

给博客添加评论功能

这里使用Next主题,评论插件使用的是 LiveRe

LiveRe的官网是:https://livere.com

  • 注册livere并获取uid

首先注册,注册这里就不累述了,注册好了点击右上角自己的头像,然后选择 管理页面

询问你是否要安装,按照向导一步一步来就好了

LiveRe有两个版本:

  1. City 版:是一款适合所有人使用的免费版本;
  2. Premium 版:是一款能够帮助企业实现自动化管理的多功能收费版本。

City版功能已经够我们使用了。

依次点击右上角头像 => 管理页面 => 代码管理 => 一般网站

会看到一对代码,找到 data-uid=" 后面到双引号之间的一段base64编码过的内容。

复制下来,这个是专属你的用户身份识别uid,然后回到自己的博客目录。

  • 为主题配置 livere 插件

进入博客目录 ,找到博客目录下 themes/next/_config.yml 主题配置文件,编辑搜索内容关键字livere_uid: 搜索到以后,去掉前面的井号,并且在后面填写你刚才复制的uid,注意 : 冒号后面和uid之间有一个空格。

然后就没有然后了 …..

各种坑和解决方法

导航解析错误

问题描述:

你发现你写的MD格式都是正常的,但是发现Next自动解析的导航,却不合人意,甚至你可以发现正文的代码段混乱什么的情况

解决方法:

找找全文代码段中的用来划分代码段用的三个点末尾是否出现空格,删除之,解决。

ERROR Deployer not found: git

问题描述:

在执行 hexo d 的时候,出现 ERROR Deployer not found: git错误

解决方案:

进入博客根目录,执行:

1
npm install  hexo-deployer-git --save

关于 Hexo 的 Local Search 失效的问题

问题描述:

你会发现一开始你的Blog搜索功能还是正常的,搜索出结果一直在转圈圈等待,或者 搜索功能能搜索但是不能跳转过去,随着添加了几篇文章以后,搜索就不正常了,访问你的博客 http://你的博客域名/search.xml 的时候,提示有存在不可解析的字节的错误,大致如下:

1
2
3
4
5
6
This page contains the following errors:

error on line 66 at column 35: Input is not proper UTF-8, indicate encoding !
Bytes: 0x08 0xE8 0xAF 0x84

Below is a rendering of the page up to the first error.

此时,是因为你的xml解析有问题,换成json来解析即可,编辑你的站点配置文件 _config.yml

找到搜索的地方 把 Search的xml解析改成json解析,具体改完后 如下:

1
2
3
4
5
search:
path: search.json
field: post
format: html
limit: 10000

完美解决搜索问题。

解决Hexo Next主题加载太慢的问题

通过网页抓包分析发现加载时间最长的是 fonts.googleapis.com 域名,修改字体请求服务器:

编辑 博客目录下 themes/next/_config.yml

1
2
# Uri of fonts host. E.g. //fonts.googleapis.com (Default).
host:

改成

1
2
# Uri of fonts host. E.g. //fonts.googleapis.com (Default).
host: //fonts.lug.ustc.edu.cn