关于Hexo博客的调试方法

前言

本文的关注点在于博客后期的优化，维护上，而不是博客的运行修复，配置，更新上。调试的前提是你已经安装并成功运行了hexo博客，而且是已经成功发布了博文。而且对于博客的优化，美化等工作是长期的，不可能一蹴而就，这些工作往往需要花费我们更多的时间以及精力来完善博客。本篇教程将会处于长期更新状态，所以你需要不定时查看。

这个教程的火狐浏览器的版本已经很老旧了，火狐调整了控制台的一些选项和参数，但是基本的功能和调试方式还是没有变化的。所以我们还是可以按照本教程放心正常调试。

Hexo调试

下面说几个对hexo的调试方法。首先你应该了解hexo的运行原理，然后清楚hexo的目录结构以及作用。这些都是你调试的基础。如果你不懂这些，请你一定要三思后再去调试。不然你的博客可能会整个瘫痪。官方的hexo文档是最权威的，请仔细阅读后再做调试。

Hexo文档地址:https://hexo.io/zh-cn/docs/

然后有了这些基础后，你还需要懂得html，js，css这些知识，你不需要会写代码，但是你一定要可以看懂一些基础简单的代码。其实在hexo中，出错率最高的是js，所以你一定要先排查js，然后排查html和css的原因。在网页中html负责结构，CSS负责样式，js负责功能。

首先你要在给博客增加新功能后，如果未成功出现应该有的效果，首先应该右击浏览器，查看源代码。接着按”Ctr+F”，查找关键字，查看一下css或者js文件是否已经成功加载到了html页面中。
如果已经加载到了html页面，那么我们现在就只能通过控制台来调试了。首先你需要会使用浏览器的开发者工具。F12大法永远是你调试网站最有力的工具。

需要注意的是有些插件并不支持https，此时我们需要部署到本地调试。

我本人一直使用的火狐浏览器，所以我也只用火狐浏览器调试为例进行说明。但是要知道的是调试的方法都大致相同，所以你即使使用的是其他类型的浏览器，我们所关注的重点还是那些。

火狐浏览器一直更新频繁，因此很多功能选项卡都会出现些许不同，所以并不能保证你现在使用的版本和我这篇文章的一致。

打开你的博客，然后按“F12”,打开控制台后，首先调整到“错误”一栏，然后刷先网页。你查看报错信息即可。如果你看不懂报错信息，就把报错信息全部复制粘贴进搜索框，网上会有解决办法。

然后你再去你的博客的配置文件中，找到该段代码所在的文件。你打开后找到该段代码，进行分析即可。一般来说，出错的原因都是因为调用不到，这个时候你只需要查找代码的位置，然后使用相对于代码的位置来使代码可以成功调用即可。但是有一点必须要说明一下。就是这个调用的代码也许是在本地的配置文件中，也有可能是调用的cdn的代码。(那么什么是cdn调用的代码呢？在最下面我有讲到)如果是cdn的代码，你需要测试一下是否可以正常使用，并且需要查看一下是http的还是https的，你的博客支不支持调用等。因为就是很有可能一些代码已经不维护了，或者关闭了。比如网易跟帖的评论系统，jiathis的分享功能等。这些就只能换其他的了。

我使用hexo也才刚半年的时间，所以说，提供的方法可能不到位，还请各位给我多多反馈意见和建议。

还有就是当你运行hexo d和hexo g命令时候，如果出现了很多的报错，那么就将你刚才更改的文件再更改过来，然后重新审核你更改的代码，是否出现了比如”字母大小写，中文符号或者多了字母或多了空格”等问题。
还有就是即使你的代码运行时没有出现报错，而且按照教程做的也全都对，但是并没有出现特殊的效果。
有可能是出现了逻辑错误。比如，我曾经给博客加valine评论，我已经严格按照教程进行了设置了，但是最会出现逻辑错误。下面讲解一个我遇到的问题。特别麻烦，几乎折腾了我一天一夜。我各种百度谷歌，各种查找教程。当我准备放弃的时候，突然看到了这么一条语句，终于开窍了，原来是逻辑判断造成的。

这个红线所示的代码是我在增加阅读统计功能时候加上去的，本来放上去是没有任何问题的。但是后来我在做valine评论的时候，直接将这么一条语句也放到了他的后面。

1 2	leancloud_visitors: enable: false

这段话的意思就是当此选项设置为true时候，才会加载valine文件和lean文件，然后才能出现评论和阅读统计。当设置为false时候，无论你的valine如何设置，都不会出现评论，我在调试过程中，也发现了此问题，但是一直没搞明白。这一下子终于明白了。其实和我们些代码一样，即使没有任何的报错，还是会出现逻辑错误。而逻辑错误恰好是编译器查找不出来的。所以也希望各位多多重视一下此问题。

衷心提醒

但是我需要给各位使用hexo以及其他类似于hexo博客的使用者说一句，并不是功能越多就越有趣。相反的，你增多了功能，反而会遏制博客打开的速度。很多插件看着是只有几行代码，短小精悍，其实你要是知道功能越花哨越复杂，代码量就会越多。当你一味的增大功能的时候，hexo需要调用很多api，外部的css等，这样反而弄巧成龊，把你的博客搞得速度很慢，那么访客的浏览体验就会下降。至少对于我来说，20秒还打不开一个网页的话，我便会丢弃使用。
所以你只需要做的是提高个人技术，写好博文，让更多的技术爱好者受益，并可以真正解决别人的问题。这是我做博客的一点体验。

CDN

下面我讲几句关于cdn加速的问题。

CDN的全称是Content Delivery Network，即内容分发网络。CDN是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。

网页中引用代码的两种方式：

下载代码文件至本地项目中引入。
通过 CDN（内容分发网络）引用。

使用CDN引用的一个好处：许多用户在访问其他站点时，已经从百度、又拍云、新浪、谷歌或微软加载过 jQuery。所有结果是，当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。减少等待时间,增加网页的同时载入速度,更好的缓存,内容分发，解决网络拥挤和提供网站相应速度。

CDN公共库是指将常用的JS库存放在CDN节点，以方便广大开发者直接调用。与将JS库存放在服务器单机上相比，CDN公共库更加稳定、高速。一般的CDN公共库都会包含全球所有最流行的开源JavaScript库。

免费的js库：