部署Hexo教程(以及博主成功踩的各种雷)

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

本教程采用 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 init 和npm install
新建完成后，指定文件夹的目录如下：

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

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);

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

以上代码转载于 https://akilar.top/posts/3d221bf2/

# artalk

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

# 内存占用大

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

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

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

一定要带协议！！！

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

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

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

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

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

最最最重要的是，要重启docker容器！！！

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

# 无法连接 mysql 服务器

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

# jsdelivr CDN

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

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 这样
这个我暂时也没解决，只能等之后慢慢摸索了。