GitHub Pages+Hexo+Next博客搭建记录

1、前言

　　大二的时候看见学长搭建的个人博客，感觉好高大上的样子，想着自己啥时候不再是哪个只会喊：哇、牛批、666、厉害厉害的傻逼选手，然后浪啊浪，突然有一天，CSP考试上考到了一个Markdown转HTML的大模拟题：
计算机软件能力认证考试系统现场狂写2小时，黑箱测试最后只得20分，从此心理对MD留下了挥之不去的阴影，然后就没有了然后，此事不来了了之。大二的时候在CSDN上写过，但是感觉CSDN的广告是越来也严重了，上面，下面，左面，右面等等四面八方全是各种广告，于是乎，时隔三年，趁着中秋没钱出去浪啊，舍友也回家了，丧尸宿舍也搭建一个简单的个人博客吧，此文简单记录一下搭建过程。
本文使用的是 Github pages + Hexo + Next 主题。

2、基础环境搭建

2.1 注册GitHub账号并创建IO仓库

　　GitHub作为全球最大的同性交友网站，在程序员心中的地位不亚与~~PornHub~~在宅男心中的地位，有过之而无不及啊，登录官网填写相关信息进行账号注册，然后创建一个和注册名相同的仓库(Repository)，注意一定要是下图这种格式[username.github.io]，因为github page每个账号只有一个。

Create New Repository

　　现在，已经可以通过https://wangjibao.github.io/来访问了，后面还会在这上面做更多的设置。

2.2 安装node.js

　　Hexo是基于Node.js的，其实Node.js就是一个JavaScript的运行环境，用来生成我们所写的静态博客页面，去官网下载安装即可，并且会自动加入系统环境变量中。　
　　其中的 npm(Node Package Manager) 是随 node.js 一起安装的包管理工具，能解决NodeJS代码部署上的很多问题。常用命令如下:

npm install npm -g              #安装新版本的npm
npm install                     #安装npm依赖包
npm install <Mouble Name>       #安装包，分为全局安装和本地安装，全局安装添加 -g 参数
npm uninstall <Mouble Name>     #卸载包
npm update <Mouble Name>        #更新包
npm list -g                     #列出所有的全局安装包

2.3 安装Ｇit并配置SSH Key

Git是一个流行的版本控制工具，使用它和GitHub进行交互。前往Git官网下载安装到本地即可。因为你要提交代码到GitHub必须得拥有权限，但是直接使用用户名+密码不安全，所以使用 SSH Key来解决本地和服务器的连接问题。

在Git Bash中执行： cd ~/.ssh ，检查本机存在的ssh秘钥。如果提示： No such file or directory 说明你是第一次使用git。

ssh-keygen -t rsa -C "17600****26@163.com"

按照提示操作，最终会在用户目录下生成一个id_rsa.pub文件，这就是自己的公钥。复制里面的字符串到自己的GitHub中，settings >> SSH and GPG keys >> New SSH Key。

添加SSH Key

执行如下命令，测试是否添加成功：

`ssh -T git@github.com`

同时在git bash中进行如下配置:

1 2	git config --global user.name "wangjibao" #github用户名 git config --global user.email "17600****26@163.com #github注册邮箱

2.4 安装sublime

　　Sublime Text3，很方便快捷的代码编辑器，后期的很多文件修改编辑操作要借助此工具进行。官网下载安装的软件本身是付费的，但我大天朝能用付费的软件，呵，开玩笑！百度一发好多激活码直接用。

2.5 安装hexo

　　在某个目录下建一个文件夹，此文件夹作为hexo的工作区。在该文件夹中 Git Bash Here，执行如下命令安装hexo：
　　　npm install -g hexo

安装完成后，hexo -v 查看安装版本及是否安装成功。执行 hexo init，对此工作文件夹进行初始化（特别注意，此文件夹初始必须是空的，否则会报错）。完成后，将生成如下目录结构的文件树

文件目录树

　　其中_config.yml是全局配置文件，_posts是放置博客文章的文件夹，具体各文件功能查看这里。此时，我们执行 hexo server来启动Hexo服务，在浏览器中输入 http://localhost:4000查看初始效果。 Hexo初始效果

常用的 Hexo命令如下：

hexo -v              #查看版本信息
hexo new "tilte"     #创建新文章，放在\source\_posts目录下
hexo new page ***    #创建页面
hexo generate        #用来生成静态文件，简写： hexo g
hexo server          #开启服务器实现本地预览功能，简写：  hexo s
hexo deploy          #部署网址，上传到github仓库，简写：  hexo d
hexo clean           #清除缓存(db.json)和已生成的静态文件(public),例如在更换博客主题后执行该命令

2.6 域名购买及解析

　　前往阿里云购买属于自己的域名，当然，不买也是可以的，直接使用 wangjibao.github.io也能访问博客，只是为了博客更加个性化一点，遂购买一个属于自己的域名。购买完成后，前往域名解析页面设置域名解析，如下图：

域名解析

　　其中第二行的IP地址是在cmd命令框中通过 ping wangjibao.github.io 命令得到。同时，在github pages的设置页面，填写购买的域名。

配置域名

最后，在source文件夹中新建名为 CNAME的文件，在文件中填入www.wangjibao.com.cn；执行 hexo g -d命令，此时，即可通过在浏览器中的地址栏输入 www.wangjibao.com.cn 进行博客的浏览。

2.7 本地与Github连接

　　之前已经配置好了SSH Key，此时只要修改一下_config.yml文件即可轻松实现本地博文发布。修改_config.yml如下：

deploy配置

　其中repository的值在下图中获得，注意，此处每个字段的冒号后面都跟有一个空格，否则会出错。

git_address

　在发布博文前，执行如下命令安装必要的插件：

　　　npm install hexo-deployer-git --save

2.8 配置NexT主题

NexT的官方说明文档，将各基础配置讲述得非常清楚，按照官方文档一步一步配置即可。包括：

安装NexT
- 下载主题
- 启用主题
- 验证主题
主题设定
- 选择Scheme（此处选用Gemini主题）
- 设置语言（zh-Hans）
- 设置菜单
- 设置侧栏
- 设置头像
- 设置作者昵称
- 设置站点描述
设置RSS（hexo install hexo-generator-feed --save）
添加标签页面
添加分类页面
设置字体
设置代码高亮主题（night eighties）
侧边栏社交链接
开启打赏功能
设置友情链接

腾讯公益404页面

此处官网提供的是 http模式的404页面，在https模式下蹦出的404页面会出现排版问题，如firefox会报 Mixed Active Content警告，如图：

404warning

两种解决方案，一种是关掉浏览器对此站点的保护功能，但却不是很实用，因为你不能要求所有人解除对你站点的保护。

解除浏览器的保护

第二种解决方案是，将官网提供的404页面的代码做一下修改，具体如下：

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="robots" content="all" />
  <meta name="robots" content="index,follow"/>
</head>
<body>
  <script type="text/javascript" src="//qzonestyle.gtimg.cn/qzone/hybrid/app/404/search_children.js" homePageName="返回主页" homePageUrl="https://ymwangzhuan.com">
  </script>
</body>
</html>

可以看到，改版后的404页面的src字段并没有指明使用的是http协议还是https协议，会自动根据你的站点做适配，问题完美解决[注意将404.html放到站点根目录的source文件夹中]。

站点建立时间
订阅微信公众号
设置背景动画

3、NexT主题个性化设计

3.1 设置网站图标 `Favicon`

在网上找一张32*32大小的 ico 图标，当然，不是 ico 格式也是可以的，如 png 等。将图标放到目录 \thems\next\source\imges 文件夹中，然后修改主题配置文件即可，操作如下图：

网站图标

作为抓包组中的一员，搭建的博客必须上 wireshark 图标啊，皮一波~~，效果如下图：

facion图像展示

3.2 修改文章底部 `#` 号标签样式

在 \themes\next\layout\_macro\post.swing 文件中搜索 rel="tag"># ，将 # 号替换成 <i class="fa fa-tag"></i>，如下图：

footer_tag

3.3 文章末尾添加 `本文结束` 标记

添加本文结束标记的步骤，其实也是主题编写的基本步骤，主要分3步：

添加模板文件

在目录 themes\next\layout\_macro中新建名为 passage-end-tag.swig的文件，并添加如下代码：

<div> 
    {% if not is_index %} 
    	<div style="text-align:center;color: #ccc;font-size:14px;">
            -------------本文结束<i class="fa fa-paw"></i>感谢您的阅读------------
    	</div>
    {% endif %} 
</div>

导入模板文件
在文件 themes\next\layout\_macro\post.swig中找到如下代码块（第332行）:

1
2
3

{#####################}
{### END POST BODY ###}
{#####################}

在此代码块的上面添加如下代码：

<div>
      {% if not is_index %}
          {% include 'passage-end-tag.swig' %}
      {% endif %}
</div>

配置

在主题配置文件中添加 passage-end-tag 字段，并设置为 true ：

1
2
3

# 文章末尾添加“本文结束”标记
passage_end_tag:
  enabled: true

最终效果为：

博文结束标记

3.4 添加顶部加载条

在next主题的配置文件 _config.yml 中搜索关键词 pace ，设置为 true ，还可以设置加载条的样式，修改如下图所示：

加载进度条

3.5 隐藏网站底部 `由hexo强力驱动`

方案一：在目录 themes\next\layout\_partials\中打开 footer.swig文件，将对应网站底部的描述部分给注释掉即可，html的注释符 ：

注释网站底部代码

方案二：在主题配置文件中，配置 powred字段和theme字段，将其用 #号注释掉：

隐藏网站底部信息

两者都能实现下图所示的效果：

注释网站底部信息效果图

3.6 博文置顶

使用 top 属性， top 值越大，排序就越靠前，如果文章不设置 top 属性，就按照博文的推送时间排序。如果使用的next主题在5.1之后，会自带此功能，修改站点配置文件中的 order_by字段即可；如果使用的是更老的版本，修改node_modules\hexo-generator-index\lib\generator.js中的内容即可，在var posts =那一行的后面添加如下博文排序函数：

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; // 都没定义按照文章日期降序排
});

这里我们使用第二种方案，每次写文章的时候，都要手动添加 top 属性，很麻烦，这里，我们可以修改 scaffolds\post.md 文件，修改后的内容如下，其实相当于创建了一个博文的初始模板。

新建博文模板

到此，如果文章设置了 top 属性并有值得话，根据 top 值排序，没有的话，按照博文的推送时间排序。

3.7 添加分享

NexT主题支持多种方式的分享，包括 Baidu Share 、duoshuo_share、needMoreShare2、jiathis等等，这里我们使用needMoreShare2，在主题配置文件中修改对应的字段如下图所示，资深抓包民工表示对这里的很多软件好熟悉~，怕是要被打~

修改后，执行 hexo g -d指令，效果如图：

分享效果图

3.8 显示当前页面的浏览进度

在主题配置文件中 ctrl+f 搜索 scrollpercent，将 false 改为 true。如果想把 top按钮放在侧边栏，可以把 b2t字段设置为true ，实现效果如图所示：

scroll percent

3.9 首页博文自动卷起

在首页显示一篇文章的部分内容，并提供一个链接跳转到全文页面是一个常见的需求。NexT 提供三种方式来控制文章在首页的显示方式。也就是说，在首页显示文章的摘录并显示 阅读全文 按钮，可以通过以下方法：

在文章中使用  手动进行截断，Hexo 提供的方式
在文章的 front-matter中添加 description，并提供文章摘录
自动形成摘要，在主题配置文件中将 auto_excerpt设置成 true ，并自行设定自动截取长度（默认150）

这里，我们使用第一种方式，实现效果如下图：

阅读全文

3.10 实现鼠标点击出现桃心

将 love.js文件添加到主题目录的\source\js\src 下，找到 \themes\next\layout\_layout.swig文件，在文件的后面， </body>标签之前添加以下代码：

1 2	<!-- 页面点击小红心 --> <script type="text/javascript" src="/js/src/love.js"></script>

实现效果为每次鼠标点击页面的时候，会出现一个彩色的桃心，如下图所示：

3.11 添加站内搜索

NexT主题支持多种搜索插件，我们这里使用 hexo-generator-searchdb插件，原理是在本地生成一个search.xml文件，搜索的时候从这个文件中根据关键字检索出相应的链接。首先执行 npm install hexo-generatordb --save 指令进行插件的安装，之后将下面的代码复制进站点配置文件的末尾。

search:
    path: search.xml
    field: post
    format: html
    limit: 10000

然后将主题配置文件中的对应字段设置为 true 即可。

最终，会在网站的侧栏出现搜索 选项，搜索效果如下图所示：

搜索效果图

3.12 生成站点地图

站点地图是一种文件，可以通过该文件列出网站上的网页，从而可以将个人网站内容的组织架构告知 baidu、google等搜索引擎。搜索引擎的网页爬取工具会读取此文件，以便更加高效的爬取个人网站。

1、先安装对应的插件，以下两个插件对应的是 baidu 和 google

1 2	npm install hexo-generator-sitemap --save npm install hexo-generator-baidu-sitemap --save

2、在站点配置文件中添加如下代码：

# auto create sitemap
sitemap:
	path: sitemap.xml
baidusitemap:
	path: baidusitemap.xml

运行指令 hexo g -d ，在public目录下会发现生成了 sitemap.xml 和 baidusitemap.xml 两个文件，这表示成功了。接下来就是如何操作让百度、谷歌收录我们的博客了。

3、站点收录，由于并没有想被搜索引擎检索的需求，私下里自己先玩一玩，所以，此项，To Do….

3.13 实现统计功能

在Hexo的根目录下执行 npm install hexo-wordcount --save 指令，进行字数统计模块的安装，然后修改主题配置文件，将对应的开关打开，即 false 改为true。

wordcount

使用 sublime打开文件 \themes\next\layout\_macro\post.swig ，ctrl+f搜索如下代码字段，并在后面添加字、分钟。

<span title="{{ __('post.wordcount') }}">
    {{ wordcount(post.content) }} 字
</span>
<span title="{{ __('post.min2read') }}">
    {{ min2read(post.content) }} 分钟
</span>

最终的效果图，如下：

字数统计效果展示

3.14 上传本地图片

在站点配置文件中将 post_asset_folder字段设置为 true，同时安装对应的插件 npm install hexo-asset-image --save。以后运行hexo n "xxxx"来生成md博文时，/source/_posts文件夹内除了xxxx.md文件还有一个同名的文件夹，该文件夹用于存储本地图片。在xxxx.md中想引入图片时，先把图片复制到xxxx这个文件夹中，然后只需要在xxxx.md中按照markdown的格式引入图片：![你想输入的替代文字](xxxx\图片名.jpg)

3.15 添加近期文章模块

将下面的代码贴在 next/layout/_macro/sidebar.swig 中的 if theme.links 对应的 endif 后面，就ok了，是不是很简单。

{% if theme.recent_posts %}
    <div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.recent_posts_layout  }}">
      <div class="links-of-blogroll-title">
        <!-- modify icon to fire by szw -->
        <i class="fa fa-history fa-{{ theme.recent_posts_icon | lower }}" aria-hidden="true"></i>
        {{ theme.recent_posts_title }}
      </div>
      <ul class="links-of-blogroll-list">
        {% set posts = site.posts.sort('-date') %}
        {% for post in posts.slice('0', '5') %}
          <li>
            <a href="{{ url_for(post.path) }}" title="{{ post.title }}" target="_blank">{{ post.title }}</a>
          </li>
        {% endfor %}
      </ul>
    </div>
{% endif %}

为了配置方便，在主题的 _config.yml 中添加了几个变量，如下：

1
2
3

recent_posts_title: 近期文章
recent_posts_layout: block
recent_posts: true

3.16 右上角加fork me on github

点击这里或者这里挑选你喜欢的样式，修改成你的GitHub链接，复制到themes/next/layout/_layout.swig文件中的以下位置：

1
2
3

<div class="{{ container_class }} {% block page_class %}{% endblock %}">
	<div class="headband"></div>
	<a href="https://github.com/wangjibao" ......</a>

3.17 添加 latex 数学公式支持

在 next 主题中，已经自动支持 mathjax 了，只需要在配置文件中将开关打开即可，不用像很多博客说的换markdown渲染引擎，更改markdown和latex的语法冲突，安装mathjax插件等等那么麻烦。

在主题配置文件中搜索 mathjax ，将开关设置为 true ，其中的 per_page字段如果设置为 true ，那么只有主页和文章头部带有mathjax: true 字段的博文才会加载 mathjax引擎。这里注意下，要更改默认的 cdn 地址，之前的地址已经停用了。

详见：https://github.com/iissnan/hexo-theme-next/pull/1712

　　　https://github.com/iissnan/hexo-theme-next/pull/887

3.18 启用点击下载功能

在网站的source目录下，新建download目录，和_posts、About、tags、categories等目录并列。
然后，将需要分享的文件或者图片统一放到该download下。在写文章时，通过诸如[点击下载](/download/xx.exe)这样的链接，直接写入。

效果图：

4、集成第三方服务

4.1 Valine评论系统

针对评论系统来讲的话，多说和网易云已经倒了，畅言需要备案，Disqus，Hypercomments和LiveRe等都是国外的，不仅加载速度慢还容易被墙，找来找去，决定使用valine（2017年8月诞生的一款基于LeanCloud的极简风评论系统）。NexT主题本身就已经集成了valine，所以设置起来也比较简单。

4.1.1 注册LeanCloud，获取`appid`和`appkey`

在官网注册账号并创建应用，应用选择开发版即可，毕竟穷孩子，免费的好啊。应用名字随便起，创建完成后，在 设置 >> 应用key 中可以看到此应用的appid和appkey。

appid和appkey

4.1.2 配置web安全域名

为了数据安全，在 设置 >> 安全中心中设置web安全域名，如下图：

web域名安全

4.1.3 创建`Class`对象

在 存储 >> 数据栏中，创建两个Class，一个名为Counter，用于记录统计每篇博文的阅读次数；另一名为Comment用于记录存储每篇博文的评论。注意，此处两个Class的名字是固定的，不能更改。

创建Class

可以手动修改 Counter表中time字段的值，也就是修改了博文的阅读次数，美滋滋~~~

4.1.4 修改`主题配置文件`

搜索 leancloud字段，将 enable字段设置为 true，app_id和app_key填写之前获得的值，此时，就可以在页面中启用博文阅读次数统计功能。

valine配置文件修改

搜索valine字段，将 enable字段设置为 true，app_id和app_key填写之前获得的值，此时，就可以在页面中启用博文评论及回复功能。其中的notify字段代表有评论时邮件提醒，verify字段代表开启验证码，avatar代表评论者的头像，placeholder字段代表初始评论框中显示的文字，等等。。。

4.1.5 最终效果展示

后台数据管理：

后台数据管理

阅读次数统计：

阅读次数统计

底部评论区：

评论区

4.1.6 邮件提醒功能配置

至此，已经能够使用评论系统了，但它虽然支持邮件提醒（基于密码重置提醒邮件），功能却很弱，无法提示到具体文章，也无法给评论者进行有效的回复通知，通常别人留完言，怎么还会再来你的博客看你是否回复了呢？所以，这里我们引用GitHub上某位大佬的配置，它满足了：

完善的邮件通知，自定义 SMTP 发件频率和内容不再受限
基于 Akismet 的垃圾评论自动标注和过滤
评论管理，避免直接操作数据库
……

邮件效果如下图所示：

邮件展示

管理界面如下图：

评论管理

4.2 卜算子统计

在主题配置文件中搜索 busuanzi_count，将开关打开，并做如下图修改，即可统计站点的 UV和PV：

卜算子统计

实现效果如下图：

站点统计

第一行的 Site words total count很是刺眼，改！之前的leancloud留下来的历史问题。在 \themes\next\layout\_partials\footer.swig中第19行做如下修改：

1	#}{{ totalcount(site, '0,0.0a') }} 字{#

在\themes\next\language\zh-Hans.yml文件中，修改第36行，如下：

#修改前：
　　totalcount: Site words total count
#修改后：
　　totalcount: 本站共计

5、To DO List

侧边栏添加日历

点击查看教程链接
SEO优化
CND优化
静态资源压缩（github pages提供的免费空间有限）

添加动态萌宠

先安装必要的模块

1 2	npm install --save hexo-helper-live2d npm install live2d-widget-model-hijiki #此行不同的萌宠，对应不同的模块

在站点配置文件的末尾添加如下代码段：

# live2d    
live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  model:
    use: live2d-widget-model-hijiki/
  display:
    position: left
    width: 80
    height: 300
    hOffset: 20 #水平相对位移
    vOffset: -200 #垂直相对位移
  mobile:
    show: true

代码区添加点击复制按钮
隐私博文加密访问

点击查看教程链接

设置背景及透明度

打开 \themes\next\source\css\_custom\custom.styl文件，添加如下代码即可：

body {
　　background:url(https://source.unsplash.com/random/1920x1080);    
　　background-repeat: repeat;    
　　background-attachment:fixed;    
　　background-position:50% 50%;
}
//改变背景色和透明度
.main-inner {
　　background: #fff;
　　opacity: 0.9;
}

添加网易云音乐

在网易云音乐网页版，找到自己想要的歌曲，点击生成播放外链，生成如下所示的代码，将iframe模块放到主题中 layout/_macro/sidebar.swig文件的适当位置即可。
1
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=298 height=52 src="//music.163.com/outchain/player?type=2&id=570240588&auto=0&height=32"></iframe>
个性化字体设置–设置代码块字体大小

NexT 从 5.0.1 版本开始提供一个字体定制特性，编辑主题下的 source/css/_variables/custom.styl 文件，新增如下代码：
1
2
// 代码字体的大小
$code-font-size = 15px
文章顶部添加最近更新时间

在主题设置文件中搜索update，将其设置为true即可。
个性设置文章间分割线
取消博文段落自动编号

将主题配置文件中的 toc ：number 字段设置为 false
安装PDF插件

执行命令 npm install hexo-pdf --save，之后编辑博客的时候即可使用标签：引用本地的pdf文件。
。。。。。。

6、bug解决

6.1 busuanzi统计失效问题

前往 http://busuanzi.ibruce.info/ 卜算子官网，可以发现有提示说 因七牛强制过期『dn-lbstatics.qbox.me』域名，与客服沟通无果，只能更换域名到『busuanzi.ibruce.info』！。所以接下来的bug修复工作就十分简单了。在主题文件 themes/next/layout/_third-party/analytics/busuanzi-counter.swig 文件中，将 <script> 标签中的 src字段改为：

src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" 即可解决。