懒癌发作,拖了这么久才开始写。。。

本教程采用butterfly 4.7.0模板,不同版本相关设置可能会有不同


安装Hexo

官方文档说得很清楚,我们需要给计算机安装Git和Node.js
我们打开http://nodejs.org/http://git-scm.com/完成安装这两个必需程序
然后新建一个文件夹用来存放hexo的源文件
然后按住shift+鼠标右键 ,选择Git Bash Here 打开命令窗口
输入npm install -g hexo-cli 安装hexo
等待一会后安装完成在当前文件夹内执行hexo initnpm install
新建完成后,指定文件夹的目录如下:

.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes
然后我们的一个最基本的Hexo站就ok了,下面是一些常用命令

1
2
3
4
5
hexo clean #用于清理public目录
hexo g #用于编译输出静态网站
hexo s #运行本地服务器,可以进行预览
hexo d #部署网站,可以通过git将网址上传至服务器进行部署
hexo new 文章名称 #创建新的文章

具体的一些使用方法请参考官方文档(已经写得很清晰明了了,没必要在这里又重复造轮子)

具体的主题设置请访问主题作者的介绍页面,写得非常非常详细了,同样是不想造轮子


要做的事情

固定链接

新文章

hexo官方原本的文章链接生成方式是包含了文件名称,如果你是中文文件名,那么网页链接就会爆长
这点相信不用我说都能体会到,这对网站收录和读者来说都不是什么好事
而其他方案其实都不怎么好,所以我们这里使用插件来固定链接
我们采用的插件是Hexo-abbrlink,这篇知乎写得很好,安装Hexo-abbrlink插件可以参考这个 知乎

旧文章

如果我们博客原来就有内容,是迁移到hexo的怎么办,那么我们就需要手动给每篇文章加上"permalink: "参数
链接形式是相对地址,不要填绝对地址!!!
而且permalink的优先级高于Hexo-abbrlink这个插件的,所以不用担心这个插件会导致permalink失效

加载页面

如果你使用的不是全页面那个加载动画的话那就没必要看这节了

默认的全页面加载动画会出现一个问题:当页面要加载很久的时候就会一直挡着主页面,直到全部加载完才会消失
这就很影响使用体验了,所以这里我们要对主题做一些小小改动,让其5秒之后如果还没加载完成就关闭加载动画
打开主题文件夹下\layout\includes\loading\fullpage-loading.pug这个文件,在下面代码下添加一行

1
window.addEventListener('load',()=> { preloader.endLoading() })
1
2
window.addEventListener('load',()=> { preloader.endLoading() })
setTimeout(function(){preloader.endLoading();}, 5000);

当然这里的时间可以根据自己的实际情况设定

artalk

如果你和我一样喜欢自己托管评论,采用的artalk,我只想说这里有一堆雷

内存占用大

我也不知道怎么回事,开着开着内存占用就变多了,目前有效的解决办法是将artalk的缓存设置为redis,有效减少内存占用

老是评论加载错误或者压根就加载不出评论界面

这个我当初真的无语了,一堆雷
首先在设置里添加可信域名

一定要带协议!!!

.

一定要带协议!!!

.

一定要带协议!!!

.
例如https//或者http://

一定要添加自己托管的artalk的域名!!!

.

一定要添加自己托管的artalk的域名!!!

.

一定要添加自己托管的artalk的域名!!!

然后新建一个站点,写站点名字的时候

千万中间不要有空格!!!

.

千万中间不要有空格!!!

.

千万中间不要有空格!!!

不然会出问题
当初差点没被这个雷气死!
And站点URL也要添加和可信域名一样的

最最最重要的是,要重启docker容器!!!

.

最最最重要的是,要重启docker容器!!!

.

最最最重要的是,要重启docker容器!!!

当然如果你采用二进制方式安装的话那就程序程序,才会生效!!!

无法连接mysql服务器

创建mysql账号的时候编码一定要选择utf-8编码,不能使用utf8mb4,不然会无法连接!!!
而且切换数据库后sqlite内的数据是不会转移到mysql的,转移前请做好手动迁移的准备

jsdelivr CDN

主题提供了可以使用第三方cdn的选项,但是在custom_format参数处需要自己拼接,而且只有staticfile的样例模板
经过我的测试每个模板的路径拼接都不一样。。。最后我在主题文件内找到了他们的匹配项

1
2
3
4
5
6
7
const cdnSource = {
local: cond === 'internal' ? cdnjs_file : `/pluginsSrc/${name}/${file}`,
jsdelivr: `https://cdn.jsdelivr.net/npm/${name}${verType}/${min_file}`,
unpkg: `https://unpkg.com/${name}${verType}/${file}`,
cdnjs: `https://cdnjs.cloudflare.com/ajax/libs/${cdnjs_name}/${version}/${min_cdnjs_file}`,
custom: (CDN.custom_format || '').replace(/\$\{(.+?)\}/g, (match, $1) => value[$1])
}

从上面我们就可以很清晰的看出各个路径的预制模板
我们按照上方拼接加速jsdelivr CDN即可(注:verType不用拼接进URL,这个变量是没有定义的)

搜索

我这里采用的是本地搜索,然这个东西和permalink有冲突(现在都还没解决)
加了permalink的文章在搜索中会丢失主站地址只剩下文章路径,就像https://1.html这样
这个我暂时也没解决,只能等之后慢慢摸索了。