hexo建站记录

发表于 | 分类于 |
字数统计: 2.9k | 阅读时长 ≈ 11

建站过程

在遇到各种各样问题之后，终于搭建完成了这个博客。

其实回过头看看也并不是很麻烦，只是遇到了许多问题，有些是因为设备环境的问题，比如在测试“ssh -T git@github.com“这条命令时，一直提示”bad address“错误，让人很费解，重装环境重新来过还是报错，只好最后换了一台电脑就没有出现这个错误。当然经验证这个并不会影响整个博客的搭建，只要密钥复制的正确这些都不碍事。

还有一个问题是因为教程的问题，在修改主配置文件的“deploy”部署时，教程写的是https地址，我也是多次尝试也没成功，最后百度到原因写ssh地址就可以解决。当然也不能一概而论，若没有错误还是推荐使用https地址。

一个个的小地方就让我走了不少的弯路。最后终于找到一个比较详细准确的教程，在此分享给大家，在这也感谢作者Line, 无意侵犯作者原作，只是想让像我这样的小白少走些弯路。作者博客中有五篇关于hexo使用的教程，个人觉得比较适合小白看。

这就是这次建站的一些小心得，水平有限有什么说的不对的地方也感谢各位不吝赐教。

后期添加：

添加网易云音乐插件


在别人的博客看到了这样一个音乐插件，实现很简单，打开网易云音乐网页版，选择自己想要分享的歌单，然后点击生成外链播放器即可，插件分为两种形式：iframe插件和flash插件，可根据情况选择。

添加particles.js背景动画

particles.js.jpg
particles.js是一个粒子效果的js插件，在Github里可以找到这个项目的源码，但是百度了一下配置方法大多是在html中实现，反正我是小白，不知道怎么修改。回归正题，怎么在Hexo中实现particles.js效果呢？

1.首先在\themes\next\layout\_layout.swig的< /body >标签上面添加

{% if theme.canvas_nest %}
	 
	{% endif %}

2.在\themes\next\_config.yml中添加以下字段开启此功能：

# background settings
# add canvas-nest effect
# see detail from https://github.com/hustcc/canvas-nest.js
canvas_nest: true

3.这样动态效果就添加成功了，你会发现博客默认的白色背景遮挡了大部分区域使得只有边缘能看见动态效果，这时候只要修改一下背景颜色即可。在\themes\next\source\css\_schemes\Pisces_layout.styl中，把.content-wrap中的background修改为none，注意我这里使用的是Pisces主题，如果你使用的是别的主题，在相应路径下修改即可。这样如果用手机打开体验会比较差，我们单独设置一下手机，把.content-wrap的+mobile()中的background修改为white，这样手机端的体验就好很多，却又不影响电脑端的炫酷动画。

设置文章摘要

写出来的文章如果直接在首页全篇显示就比较别扭了，为了提高浏览体验，这时候就需要设置一下文章摘要了，我这里主要介绍三种方式。

1.在文章中使用< !–more–>

这种方法可以根据文章的内容，自己在合适的位置添加 < !–more–> 标签，使用灵活，也是Hexo推荐的方法。

2.在文章中的front-matter中添加description，并提供文章摘录。如图：
description.png

3.在主题配置文件中设置自动摘要

auto_excerpt:
enable: true
length: 150 #默认摘要为150字，可根据需要更改

needmoreshare2分享按钮

今天才知道jiathis已经于2018年4月30日关闭了旗下的分享业务，所以今天改成了needmoreshare2，在nest的配置文件中预先已经加入了此功能，只需要简单的启用修改一下就可以用了。
snipaste_20180904_213720.png

postbottom:文章底部分享按钮
float:浮动按钮
iconStyle:按钮的样式

default:snipaste_20180904_214818.png
box:snipaste_20180904_214810.png

鼠标点击特效

打开网址：

http://7u2ss1.com1.z0.glb.clouddn.com/love.js

复制网址中的代码，在/themes/next/source/js/src路径下，新建love.js并将刚刚复制的代码复制进去。然后编辑\themes\next\layout_layout.swig文件，在末尾加上如下代码：

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

如图：
snipaste_20180904_220551.png

修改文章底部标签符号

默认的标签符号是一个“#”，个人觉得并不是很好看，所以决定修改一下。
修改模板/themes/next/layout/_macro/post.swig，搜索rel=”tag”>#，将 # 换成，注意是只替换“#”。
snipaste_20180904_221216.png

侧边栏旋转头像

首先先把头像打开，在主题配置文件中，将如下图中的avatar前的#去掉，然后将自己的头像放到themes\next\source\images路径下，并将配置文件中默认的avatar.gif修改为头像的文件名。
snipaste_20180905_222132.png
然后就是设置头像旋转了，打开\themes\next\source\css_common\components\sidebar\sidebar-author.styl，在里面添加如下代码：

.site-author-image {
display: block;
margin: 0 auto;
padding: $site-author-image-padding;
max-width: $site-author-image-width;
height: $site-author-image-height;
border: $site-author-image-border-width solid $site-author-image-border-color;

/* 头像圆形 */
border-radius: 80px;
-webkit-border-radius: 80px;
-moz-border-radius: 80px;
box-shadow: inset 0 -1px 0 #333sf;

/* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束 
(1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/


/* 鼠标经过头像旋转360度 */
-webkit-transition: -webkit-transform 1.0s ease-out;
-moz-transition: -moz-transform 1.0s ease-out;
transition: transform 1.0s ease-out;
}

img:hover {
/* 鼠标经过停止头像旋转 
-webkit-animation-play-state:paused;
animation-play-state:paused;*/

/* 鼠标经过头像旋转360度 */
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}

/* Z 轴旋转动画 */
@-webkit-keyframes play {
0% {
-webkit-transform: rotateZ(0deg);
}
100% {
-webkit-transform: rotateZ(-360deg);
}
}
@-moz-keyframes play {
0% {
-moz-transform: rotateZ(0deg);
}
100% {
-moz-transform: rotateZ(-360deg);
}
}
@keyframes play {
0% {
transform: rotateZ(0deg);
}
100% {
transform: rotateZ(-360deg);
}
}

底部全站字数统计

如图：
snipaste_20180906_193500.png
在根目录下，执行：

$ npm install hexo-wordcount --save

然后在/themes/next/layout/_partials/footer.swig末尾加上：

<div class="theme-info">
  <div class="powered-by"></div>
  <span class="post-count">博客全站共{{ totalcount(site) }}字</span>
</div>

文章字数统计

刚才设置了全站的总字数统计，接下来设置一下单篇文章的字数统计，如图：
snipaste_20180906_194648.png
首先在根目录下安装hexo-wordcount,执行：

$ npm install hexo-wordcount --save

然后在主题配置文件中，将post_wordcount的选项改为true：
snipaste_20180906_194831.png

网站顶部加载进度条

在主题配置文件中，搜索pace，改为true启用功能：
snipaste_20180906_200843.png
有多种表示加载进度的样式，可根据自己喜好选择。

添加来必力评论系统

新建这个博客的时候我用的是gitment，但是使用效果并不是很理想，今天开始使用来必力了，但愿这个能命久一点。
首先到https://livere.com/insight/myCode注册并获取安装代码，在代码里找到自己的id，也就是下图中这个位置：
snipaste_20180906_202604.png
然后在主题配置中找到livere_uid，将你的id复制上就ok了：
snipaste_20180906_203922.png

valine评论系统

首先在LeanCloud注册账号并创建一个应用，很简单这里不做赘述，需要主要的是注册的时候填写的邮箱最好不要用私人域名邮箱，我在第一次注册时填写的是自己的域名邮箱导致接收不到验证邮件，后来使用163邮箱就ok了。

然后修改主题配置文件，找到valine字段，将在LeanCloud中创建应用的appid和appkey复制到配置文件中，并将enable: false修改为true：
04.png
配置完成后的样式：
05.png

侧边栏返回顶部按钮

之前默认使用的是右下角的返回顶部按钮，后来发现侧边栏的这个返回顶部按钮还带有阅读进度。
在next/_config.yml里找到b2t这个地方进行如下配置：

# Back to top in sidebar (only for Pisces | Gemini).
b2t: true
# Scroll percent label in b2t button.
scrollpercent: true

添加视频

Idina Menze和Caleb Hyles激情对唱Let It Go：
<iframe height=498 width=510 src="http://player.youku.com/embed/XNjcyMDU4Njg0" frameborder=0 allowfullscreen></iframe>

修改nexT主题中Pisces的宽度

突然感觉主题默认宽度有点窄，遂改之。编辑themes\next\source\css_variables\custom.styl文件，添加如下内容：

$main-desktop = 1200px 
$content-desktop = 900px

修改后的效果：
06.png

接入谷歌广告联盟Google Adsense(已删除)

我使用的是next主题，编辑\themes\next\layout_partials\head.swig，在任意位置加入谷歌提供的代码即可:
google adsense.png
head_scripts.png

官方文档：

文档|Hexo

NexT

参考链接：

walesexcitedmei.github.io

错误汇总

在使用hexo博客的过程中，遇到了如下一些错误：

{ }引起的报错

今天写了一篇博客后按流程进行部署的时候，发现在生成静态页面的时候出现了如下的错误：
snipaste_20180325_163706.png

snipaste_20180325_163648.png

查了一下说什么的都有，每个方法也都试了一遍，最后发现是因为文章中直接引用了”{ }”的原因，解决办法是将”{ }”通过&#123 &#125后面加上分号”;”进行转换，就可以正常部署了。
这里也有一些常见的特殊字符,可以根据需要转换。
特殊字符.png

标题无法正常解析

在浏览别人的博客的时候发现Hexo有自动解析目录的功能，是依靠markdown的标题实现的，在加了一个“#标题”这样时却发现博客无法解析到这是一个标题，查了一下原因是正规的标题写法是在”#”和标题之间加一个空格。

换行

一开始刚刚接触markdown的时候一直用html的<br/>换行，这种换行方式貌似在换行的同时增加了行间距，无意间发现一个更好也更简单的换行方式，就是在要换行的位置敲两个空格，就可以换行。

FATAL Cannot read property ‘replace’ of null

今天在修改站点配置文件进行操作时报出“FATAL Cannot read property ‘replace’ of null”的错误：
snipaste_20180903_214210.png
上网查了一下原因是url地址不能为空，按照注释要求改为相应地址即可。

自定义域名

之前每次使用hexo d上传一次文章都需要重新设置自定义域名，也是很苦恼，今天终于找到了原因。
在GitHub代码库中有一个CNAME文件，存放着我们修改的自定义域名：
02.png
而我在本地并没有这个文件，所以每次在执行hexo d上传了本地的文件后，GitHub中的CNAME就被覆盖掉了，所以需要在设置中设置自定义域名，其实也就是创建这个CNAME文件的过程。
问题找到了，解决就简单了，在source文件夹中创建CNAME文件即可：
01.png
03.png

hexo generate生成index.html为0kb空白文件

最近更换了电脑，所以将本地博客文件迁移到了新电脑，使用新电脑更新博客，但是在deploy到github之后访问页面是空白页面。经过一些列折腾后突然发现generate后的html等静态文件都是0kb，上网查了一下是node的版本过高的原因，卸载本地的版本，在node.js官网下载最新版本安装后再次deploy，解决！