部署Hexo教程(以及博主成功踩的各种雷)网站首页 学无止境

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

GoodBoyboy- 2023-05-30 16:00:02

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

本文转载于我的博客部署Hexo教程(以及博主成功踩的各种雷)

{% note info flat %}
懒癌发作，拖了这么久才开始写。。。
{% endnote %}

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

安装Hexo

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

.
├── _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的怎么办，那么我们就需要手动给每篇文章加上"{% label permalink: blue %}"参数
链接形式是相对地址，不要填绝对地址！！！
而且permalink的优先级高于Hexo-abbrlink这个插件的，所以不用担心这个插件会导致permalink失效

加载页面

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

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

window.addEventListener('load',()=> { preloader.endLoading() })

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

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

{% note info flat %}
以上代码转载于https://akilar.top/posts/3d221bf2/
{% endnote %}

artalk

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

内存占用大

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

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

这个我当初真的无语了，一堆雷
首先在设置里添加可信域名
{% label 一定要带协议！！！ red %}
.
{% label 一定要带协议！！！ red %}
.
{% label 一定要带协议！！！ red %}
.
例如https//或者http://

{% label 一定要添加自己托管的artalk的域名！！！ red %}
.
{% label 一定要添加自己托管的artalk的域名！！！ red %}
.
{% label 一定要添加自己托管的artalk的域名！！！ red %}

然后新建一个站点，写站点名字的时候
{% label 千万中间不要有空格！！！ red %}
.
{% label 千万中间不要有空格！！！ red %}
.
{% label 千万中间不要有空格！！！ red %}

不然会出问题
当初差点没被这个雷气死！
And站点URL也要添加和可信域名一样的
{% label 最最最重要的是，要重启docker容器！！！ red %}
.
{% label 最最最重要的是，要重启docker容器！！！ red %}
.
{% label 最最最重要的是，要重启docker容器！！！ red %}

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

无法连接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])
      }