时隔一年,最后还是觉得重拾GitHub Page搭建的一个hexo博客,之前因为是刚开始接触,所以一切都按照网上的教程来,对那些命令的理解一窍不通,所以前多天把一年前搭的博客给删了,从0又开始搭建一个。

因为已经接触这方面的学习一年,对博客的搭建很轻松的就完成,但是对hexo的主题的配置硬生生的花了我两个多小时来看文档,其中遇到了很多坑,边写边改,最后配置成自己的喜欢的博客样子

下面文章仅是对于Butterfly hexo主题的配置

1.主题安装

首先在博客的根目录下 Get Bash Here ,然后运行一下命令:

1
2
git clone -b master https://github.com/jerryc127/ 
hexo-theme-butterfly.git themes/Butterfly

如果想要安装比较新的dev分支,可以:

1
git clone -b dev https://github.com/jerryc127/hexo-theme-butterfly.git themes/Butterfly

安装成功后,在根目录下的themes文件夹下会出现一个Butterfly的文件夹
image

2.主题的配置

安装好后,如果自己对博客的主题颜值较高!就重点在这个地方进行修改

主要是对 \themes\Butterfly 下的 _config.yml 文件的修改
具体的配置文档可参考:https://jerryc.me/posts/21cfbf15/

3.遇到的坑

也不算坑,主要是自己没注意,并且整个过程,命令行没有报错,最后为了找自己跳进的坑,只好删库,重新来过!

在配置字数统计的时候,直接把 wordcount 的 enable 参数改成了 true

1
2
wordcount:
enable: true

结果博客中最开始的生成的 Hello World 文章就打不开了,点击后浏览器一直转圈,如图:
image (1)

后来在第二次搭建博客的配置主题时,一点一点的更改,看是哪一条配置的更改影响了里面内容,终于在字数统计这里发现了坑

当把配置选项改成 false 时,博客预览正常,但是改成 true 后,博客里面的文章便不能打开了

于是打开文档发现这里需要安装一个插件
image

于是安装后再打开便能正常预览文章了:

word

image (3)

PS:如果自己的主题配置好后再本地开启服务预览的时候,发现网页上没有效果并且只有一行代码的话,是因为你没有你沒有 pug 以及 stylus 的渲染器,只需要执行:

1
npm install hexo-renderer-pug hexo-renderer-stylus --save 

或者

1
yarn add hexo-renderer-pug hexo-renderer-stylus

安装完在重新生成一下主题静态内容就行:

1
2
hexo generate      //重新生成静态博客的所有内容
hexo server //重启 hexo 本地服务