前言
Hexo是一个很流行的博客框架。之前一直想构建一个博客,也花费过很多功夫。其实一开始是想着完全自己从零实现,不使用框架,主要是为了学习一遍web开发。很可惜,到了后面愈发感觉力不从心。不套用博客框架自己实现,确实自由度非常广,可是要用到的知识也非常的多。对于后端,我用的是SSM+Redis,前端用的是Bootstrap和jQuery。最后让我放弃的是前端原因,我感觉自己对前端仅限于读懂,或者写一些简单的界面,或者是在别人的界面上进行修改。在找前端模板的过程中,我就想着不如试试Hexo吧,反正学习目的已经达到了,于是记录一下Hexo搭建博客的过程遇到的问题。这里使用的hexo版本是:4.2.0
如何使用Hexo
不同的博客框架有利有弊,如果是新手就直接选Hexo吧,不要去考虑Wordpress,Hugo等等的了,那些以后再慢慢接触,现在Hexo就足够用了!于是我参考了一个博客,大概的步骤都是完全按照它的,所以也无须再照搬一次了。
构建Hexo的过程遇到的问题
只要是上网学过教程的朋友,或者是看书的朋友,都肯定会遇到一个问题:跟着书上/文章上的去做,却发现出错。导致的原因一般有,自己忽略了步骤,版本的变更。无论如何,这些才是学习中最大的困难,所以这篇文章就是记录我在构建Hexo博客的过程中所遇到的问题,以及如何解决。
① 注册GitHub,使用GitHub Page。本地安装Git,配置好环境变量,本地Git与Github连接。在Git bash中安装node.js和hexo及其依赖文件。将本地hexo项目托管到GitHub
一般程序员都有GitHub,所以前面的步骤基本都可以忽略掉。直到安装hexo的时候,这时候原文有提到需要初始化hexo:
1 | $ hexo init hexo |
这里就出现了问题,显示:bash: hexo command not found。显然,没有找到hexo命令。对于此类错误,一般有两种可能。第一种可能的错误是没有安装hexo,于是再三确定了一下前面的安装代码是否出错,并没有,基本可以排除。第二种可能的错误是环境变量的设置问题。我们都知道只有把命令设置到环境变量里才可以直接在命令行里调用,或者就是安装的时候安装系统自动添加到了环境变量,只有这样才可以直接使用。于是我们到环境变量里添加hexo的安装路径:F:\XXX\node_modules\.bin 问题解决。
除此之外,如果yml配置文件出错(一般是格式错误,记住yml的冒号需要用英文格式,以及冒号后面要加空格即可),那么启动hexo会失败,导致无法访问主页。这时候就要具体地看一下启动的时候的报错信息去检查。
只要完成教程一,那么最简陋的hexo就搭建成功了,后续就是完善。
② 全局配置文件的设置,主题配置文件的设置。设置图片,设置菜单,添加几个菜单页面,发布文章。
配置文件处都没什么问题。图片那里值得一提的是,默认的图片路径是 hexo/source/下。而菜单页面看起来也是调用命令hexo new page xxx即可自动生成,在对应的路径下就能看到一个index.md(部署到GitHub的时候会变成index.html)。可是无法访问,一直报错,Cannot GET /about/%20/。这里的关键是%20,这是空格的意思!知道了这个,就很容易排查了,问题出在配置文件里。虽然它提供了默认代码,但它的||前后加了空格,导致出错。所以虽然这是默认代码,但我们还是老老实实把它的错误改了吧:
1 | menu: |
这时候一般是可以运行了的,如果还是不行,那么可能是因为你复制了上面教程作者的md文字?可能是由于版本的不同,教程作者的index.md的第一行是:”—“,如果你也跟着加了,那么就是画蛇添足了。我这里用的是Typora,只要在那条虚线下面开始写你的页面内容即可(上面的都是格式配置,一般不会直接显示出来)。于是,这里的问题也解决了。发布文章也是同理。
完成教程二,对于博客的关键功能:发布文章,分类查找等等,都已经可以实现,后续可以继续添加更多有趣的功能。
③教程三
教程三是教我们使用外部图床存储图片,添加了一个评论功能,以及文章浏览量,网站访问量,站内搜索等等。这里我个人只建议看浏览量和站内搜索。因为外部图床,其实新手暂时没必要,等到你觉得性能需要提高的时候才考虑,先把网站搭起来吧(其实直接用腾讯云COS就可以做图床了)。。至于评论功能,这个评论功能是过时的,不建议使用。
浏览量这里也存在问题,开启了之后只有图标,没有显示具体数据,这是因为hexo next主题中不蒜子脚本链接失效,这时候需要编辑:/themes/next/layout/_third-party/analytics/busuanzi-counter.swig 文件,将里面的链接:
1 | https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js |
改成:
1 | https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js |
这时候就能看到统计的数据量了。
对于站内搜索功能,设置了全局配置文件,发现仍然没有搜索功能,这是因为我们还需要一个步骤,在主题配置文件里找到 local_search。显然,还需要把enable的false值:
1 | local_search: |
④ 添加功能模块
教程四的内容我直接跳过了,感觉意义不是很大,但评论功能还是比较有用的,于是直接研究评论功能。一开始按照教程来使用Gitment,无论怎么样都显示Error: Not Found。原因竟然是。。Gitment已经过时了,大概是作者也不维护了,服务器也过期了等等,所以大家跳车吧,转战Gittalk。这里的使用的教程是这个。
Gitalk中值得注意的问题是:
Ⅰ. comments.swig处添加一个elseif,这里要注意elseif添加的位置,要与前面的elseif同一级别,自己细心看一下就知道要添加在哪里了,不要添加在endif后面。。
Ⅱ. 最常见的错误,Error: Not Found。在Gitment就是因为这个而弃坑的,可是在Gitalk依然遇到了这个情况。这里的错误点在于:repo的位置出错。这里的repo值必须是: xxx.github.io,而不能写 https://github.com/Xxx/xxx.github.io
解决了这两个问题,只要把项目部署到GitHub上,就能成功运行了。至此,hexo搭建基本结束,重要的功能都涵盖了,后续还能进行更多的补充。
⑤ 一些其他可能会出现的错误
即使是像本人的专业踩坑者,也不可能把所有的坑踩完(否则我应该去应聘测试!)。所以这里只能列举一些我本人遇到的错误,以及如何解决。
在关闭hexo server的时候,应该使用ctrl + c,不小心按成了ctrl + z,也就是挂起,导致后续再启动会显示端口占用。这属于Linux的基本命令问题。本来想通过ps,kill等等的命令去解决的,可是都不行。最后使用的是jobs命令。jobs命令可以查找job号(假设为num),这时候我们执行 stop %num ,即可解决。
踩完坑在本地修改完,发现打开网址还是没有改变?这个问题很多web开发者应该都曾经遇到,其实最简单的原因就是缓存的原因,浏览器直接读取了缓存的东西,导致服务器新改的东西并没有生效,这时候只需要:ctrl + F5,浏览器刷新,可能你就会发现有所改变了,避免了多做无用功。。