完整搭建过程参考此系列博客（环境win10）

我的写作编辑器用的是typora

Next主题配置

Next主题是本人比较中意的hexo主题，所以在此只记录Next主题的配置过程

下载

建议安装6.0版本。利用git bash here,输入命令：git clone https://github.com/theme-next/hexo-theme-next themes/next

配置与个性化

1.添加作者头像并设置旋转效果

注意：最新版本的next主题已经添加了头像动画功能，直接在主题的配置文件里面修改，因此头像添加（路径）也是在主题配置文件里面添加，而不是在根目录的配置文件添加

# Sidebar Avatar
avatar: 
  # in theme directory(source/images): /images/avatar.gif
  # in site  directory(source/uploads): /uploads/avatar.gif
  # You can also use other linking images.
  url: /uploads/header.jpg     #/images/avatar.gif
  # If true, the avatar would be dispalyed in circle.
  rounded: true
  # The value of opacity should be choose from 0 to 1 to set the opacity of the avatar.
  opacity: 1
  # If true, the avatar would be rotated with the cursor.
  rotated: true

2.修改标签“#”符号和插入图片

3.添加社交账号

如果遇到没有的社交图标，可以在fontawesome中寻找添加。 ||后面的是图标名，建议不要找最新的。

4.菜单设置

本地搜索一旦开启会自动添加”搜索“菜单

5.添加版权信息。参考该文章

上面的链接是手动添加，现在可以在NEXT主题配置文件中进行修改

creative_commons:
  license: by-nc-sa
  sidebar: true
  post: true
  language:

6.利用leancloud加入阅读计数功能

若页面LeanCloud访问统计提示’Counter not initialized! See more at console err msg.’

参考该博客解决

问题：安装hexo-leancloud-counter-security报错：npm WARN babel-eslint@10.0.1 requires a peer of eslint@>= 4.12.1 but none is installed. You must install peer dependencies yourself.

因此缺什么就安装什么，在这里我是安装：npm install eslint@>= 4.12.1,之后再安装hexo-leancloud-counter-security就成功了。

另外最后在修正deploy的时候注意tab的控制，不然编译会报错

deploy:
  #type: git
  #repository: git@github.com:x695/thinkee.github.io.git
  #repository: https://github.com/x695/thinkee.github.io.git  
  #branch: master
  - type: git
    #repository: git@e.coding.net:yangshixian/blog.git
    repository: git@git.coding.net:thinkee/blog.coding.me.git
    branch: master
  - type: leancloud_counter_security_sync

然而，十分尴尬的是，阅读数依然没有显示，后来参考这篇博客得到了解决

7.利用valine+leancloud添加评论功能

参考

8.网站背景动画

如果修改主题配置文件之后不出现动画，建议下载主要的库到/source/lib中

9.加入本地搜索功能

10.加入Latex数学公式

这个除了在主题配置文件修改mathjax: true之外，还需要在每个post的博客里的头代码里面加入mathjax: true才可以正常显示。如果嫌每次书写都得添加麻烦，可以直接在根目录的scaffolds文件夹里的post.m文件夹直接加入mathjax: true，之后每次新建都会自动添加了。

不过再后续使用Latex语句的时候，发现博客上还是会显示源码，后来发现应该是渲染引擎的问题，根据这篇博客的指导修改后就好了。

2019.3.5日来更新，写完一篇blog进行generate时候出现了错误：

Template render error: (unknown path) [Line 62, Column 32]
  expected variable end
    at Object.exports.prettifyError

出现的原因要么是主题配置文件忘了打空格，要么就是自己写的blog文件里面用的符号与其他hexo配置文件语法有冲突，后来发现原因是我打公式时出现了两个“}}”，前面一个"}“是latex语法，后面是”}"，目的是为了输出括号“}”，之后参照latex的另一种打法“\lbrace \rbrace"就好了

2019.4.17日来更

公式直接用Mathpix进行LaTex命令复制吧，非常方便，也几乎没出现什么错误，还省时间。

11.博客图片点击放大

在NEXT主题的配置文件里面有fancybox选项，直接改为true就好了，不过在这之前要下载fancybox包到next/source/lib文件夹里面，即：

cd next/source/lib
git clone https://github.com/theme-next/theme-next-fancybox3 fancybox

12.并排插入两张图片

<figure class="half">
    <img src="xxx.jpg" width="400"/>
    <img src="xxx.jpg" width="400"/>
</figure>

不过这只能在.md文件中实现，博客中还是上下各一张。

13.NEXT主题内置标签（包括引用文本居中，图片最大化引用等），更详细的标签见hexo官网。注意在本地利用这些标签不会出现相应的结果，只有上传到博客上才能看到。

14.添加emoji表情功能

emoji大全

关于加入表情的功能，我一共找到了两种方法，一种是基于修改渲染引擎的，然后加入twemoji插件，但是我在之前为了支持mathjax已经更换了渲染引擎，结果导致我在按照博客1和博客2的操作进行时出现了fancybox图片放大和图片内部插入的问题，有时候甚至会影响到html语句，后来倒退删除渲染引擎和插件的时候，想要恢复到原来的状态，结果hexo g可以成功，本地却无法显示不出内容，结果只好重装。。目前原因未知。

此外，第二种方法是安装hexo-filter-github-emojis插件，可参考博客3和博客4，但是我看博客中也提到了图片干扰的问题，就没再继续试下去了。。。

下次看到更好的解决办法再来更新。

15.加入RSS订阅

直接在NEXT主题配置文件里面更改，在这之前先在博客站点目录下安装npm install hexo-generator-feed --save

feed:
    type: rss2
    path: rss2.xml
    limit: 5
    hub:
    content: 'true'

16.博客被谷歌和百度收录

参考这个博客的做法

17.购买自己的阿里云域名并设置

参考

出现问题：leancloud阅读统计和评论系统出现问题，在安全中心更换了域名之后，deploy时出现Error，too much request，得知时免费版的限制导致错误，按照此博客修改并重新配置了一个leancloud Counter应用未能解决问题。此博客 通过加入lean-analytics.swig文件也未能解决问题。

偶然通过换回valine+leancloud评论系统出现code 403问题进行改正时也顺便解决了这个问题。

个人GitHub博客的settings页面的Github Pages有个Enforce HTTPS选项，我没勾，所以http://或者https://都可以访问我的域名，而我的leancloud安全中心中的安全域名只加了https://的，在加一个http://就好了。。

但是deploy时依然会有些莫名其妙的错误，比如ERROR Password must be string，但是既然正常显示了，我就没再管了。。

18.更换评论Gitalk系统

由于leancloud经常出现问题，不易维护，所以可以考虑更换评论系统为Gitalk，虽然评论必须登陆GitHub账号，但是可以接受，毕竟现在理工科都有Github账号，此外还加了字数统计和阅读时长等信息。具体操作参见链接。

需要注意，使用Gitalk评论系统时，每次deploy都需要在博客下登陆自己的账号初始化下

19.对博客进行代码压缩（加快访问速度）和备份（便于更换设备时进行迁移），另外更改文章链接失败。

参考：https://indexmoon.com/articles/1153730074/ （其中，.gitignore文件可通过在git bash中利用touch .gitignore命令创建）

20.插入GIF图片，利用html语法，直接上img标签：<img src="图片地址" style="zoom: 100%" />

21.优化文章链接，使得post的url可以成为定制链接，做法见此

如果你用的hexo-asset-image版本较低，可能会出现图片无法显示的情况，因为两个插件冲突导致最后的图片路径不对。新版的hexo-asset-image已经解决了这个问题，但是我自己的实验情况下是在abbrlink后加.html，否则还是无法显示，只能用abbrlink/. 此外必须用![](pic.jpg)这样的方式插入图片。如果你用的是typora编辑器，可以使用默认根目录显示图片。具体做法可以见这个issue.

此外由于abbrlink改变了原来的文章链接，所以leancloud的计数和评论都会消失。由于我的文章不多，所以我就自己改了过来。你也参考这篇文章的解决办法。

22.新主题推荐

fluid：https://github.com/fluid-dev/hexo-theme-fluid

icarus：https://blog.zhangruipeng.me/hexo-theme-icarus/

butterfly：https://butterfly.js.org/（最后选择了这个主题，很好用，也容易配置，不会有奇奇怪怪的问题）

需要注意一下这个主题中Pangu参数，如果设置为true，就会给中英文字符等自动空格，但是开了之后可能会让mathjax插件的行内公式出现奇奇怪怪的错误，所以慎用。

另外可以对博客进行优化，见此或这个，记得在hexo g之后进行gulp优化。

由于我是直接在next主题上换的butterfly，可能存在某些问题，所以我的gulp-imagemin一直压缩出错，提示某些npm安装的包没找到，我干脆就放弃压缩图片了(基本上图片全部用图床外链了)。

html压缩出现parse error，未解决，放弃此优化。

更多优化问题见此。

23.重装系统后恢复Hexo博客

https://zalmon.cn/2020/01/11/电脑重装系统后恢复hexo博客部署/

如果npm install失败，可能是npm国内网络问题，换用cnpm install即可

npm install -g cnpm --registry=https://registry.npm.taobao.org

恢复之后记得再去弄下数学公式显示问题，butterfly主题参考此链接。

21.更新hexo版本

https://www.imczw.com/post/tech/hexo5-next8-updated.html

22.建立图床

不再使用hexo-asset-image插件来插入本地图片，这样速度慢，还容易出错，不好维护。采用github+picgo+CDN建立免费图床，使用外链访问图片。教程1，教程2，教程3

调整图片比例，见[此回答](markdown中插入图片怎么定义图片的大小或比例？ - AnNo的回答 - 知乎 https://www.zhihu.com/question/23378396/answer/148278511)

23.文章开头加入类似一言的语句

在文章中插入引言，可包含作者、来源和标题，均可选。

标签方式：使用 blockquote 或者 简写 quote。

{% blockquote author, source link source_link_title %}
content
{% endblockquote %}

content

authorsource link source_link_title

更多见此

24.插入pdf并实现预览

参考此链接

首先npm安装hexo-pdf插件，然后利用语句

即可实现（外部链接）。

  1. 重装系统之后hexo g生成的page有些是0KB，后来搜索发现可能是node.js的版本过高，降级一下就好了。这里使用nvm进行node.js版本管理，教程链接，切换失败时使用管理员权限打开CMD进行node use version-id切换。
  2. 将mathjax换成katex来渲染latex公式，因为katex更加轻便，由于是使用butterfly主题，所以切换比较方便。但是有些公式在编译之后无法正确显示，排查之后原因有二：一是检查$符号前后有无空格，另一个是katex无法解析align或者align*，更换为aligned即可（链接）。