Hexo博客优化篇(matery)(三)

前言

又是一年年底，小站又迎来年更啦（doge），2022年，小苏做了两种尝试：

1. Hexo迁移云服务器

   1. 先说结果：成功。
   2. 原因：由于coding早在21年大概5月份就已经不支持搭建静态网站，github作为国外站点，搭建国内的网站加载速度往往不尽人意。于是小苏一不做二不休，将Hexo迁移到了云服务器上，效果确实很快，再也不用担心免费带来的不稳定性了，但随之而来的是云服务器的费用问题。

2. typecho博客搭建

   1. 先说结果：成功，但废弃了。
   2. 原因：迁移Hexo时有一个思考，Hexo体量属于比较大的（100M+），上传文章需要打开控制台输入指令，手机也不能上传，于是有了换博客引擎的想法。不得不说，typecho博客完美解决了这些问题，搭建起来非常方便，安装宝塔相当于傻瓜式操作，最主要还有后台web页面，方便小白上手使用博客。
   3. 但为什么废弃了呢？typecho我正能用别人设置好的主题，通过web后台页面改一些可配置的参数，但如果主题作者没有设置改的地方，是无法调整的，这就给我这个喜欢DIY的带来了局限性。其次是对Hexo的不舍，小站体量虽然大，但都是我一点点diy出来的结果，而且发博客一般都是电脑操作，对于手机写博客其实是个”伪需求“，于是，还是选择Hexo辣！

本次优化重点在：图片失效的恢复，主要因为jsdelivr挂了，导致原先图床上的图片都无法访问，解决方法是换了阿里云的oss对象存储作为图床。

言归正传

调整记录

本次不能说是优化了，对一些地方做了简单的调整

❌删除

• 相册

✅新增功能

• 无

✅新增美化

• 无

🆗内容修改

• 追番信息更新
• logo更换

🔱博客优化

• CDN图片失效，更换图床（重点）

• 字体、搜索加载速度优化（尝试）

正片开始

1. ❌删除功能

1.1相册

“关于我”页面有相册功能，为缩减博客体量，将相册的标签页去掉。

方法：根据Hexo+github搭建matery博客二（主题配置篇） 的相册搭建方法去掉即可。

---

2. ✅新增功能

无

---

3.✅新增美化

无

---

4.🆗内容修改

4.1追番信息更新

1. 删除过去的追番信息

   hexo bangumi -d
   

   注意：该插件不需要我们每次部署都要输入更新数据的命令，只有你自己番剧更新时才需要执行更新指令，之前的番剧数据会一直保留，直到被你删除

2. 更新追番信息

   hexo bangumi -u
   

3. 正常部署即可

   hexo cl
   hexo g
   hexo s
   

4.2Logo更新

原先的logo，favicon都是cdn加速的链接，由于jsdelivr失效，因此更换图床。

在主题的_config.yml文件中，修改链接即可。

---

5.🔱博客优化

5.1CDN图片失效，更换图床

jsdelivr失效，原先我的图床是github+jsdelivr的方式搭建，因此所有图片均为404。

有三种解决方法：

1. 在网上找免费图床，将图片上传上去生成图片，但免费图床不好找，如果之后也失效，咱们一点办法也没

2. （小苏选择）找大厂的收费存储当图床，便宜好用放心，我用的阿里云oss对象存储，40G存储/年9元。

3. 服务器存储，顾名思义直接将图片放博客服务器里，但Hexo的markdown不清楚怎么放图片进文章里，Hexo5.0之前都可以用插件实现。但我的是Hexo6.0，以后琢磨琢磨可以的话用这种方式，就更省钱了。唯一缺点就是对服务器有一定负载，博客体量变大。

具体教程可参考：https://blog.csdn.net/weixin_46471601/article/details/124932929

我是按照一步步走下来没问题的，用的是阿里云OSS+Picgo。

有两点需要注意：

1. 由于我是github图床迁移，先将github上的图片下载下来，再上传到oss上。

   

2. 替换markdown文章上的图片链接时，要选择好前缀https://cdn.jsdelivr.net/gh/fenghen0918/jm-imgs/markdown/，直到图片名称的上一级，一级级的替换，不能全部https://cdn.jsdelivr.net覆盖，后缀没有去掉会导致图片加载不出来。（替换链接前，一定要备份文章！不然替换错了后悔莫及）

这里拓展一点，对象存储：

通俗来说，对象存储就类似于一个云盘，可以把任何东西存进去，并且给你生成一个网络链接，可以通过链接访问和下载。

当我把文章图片放对象存储器后，我访问博客，页面是服务器加载的，而图片是阿里云帮我加载，不占用我的博客资源，并且速度很快。

关于收费：对象存储的收费条例很复杂，通俗可理解为：基本使用费（40G，9元/年）+流量费（按量计费），流量费是根据你的文件访问量下载量来计费，我的博客访问量很低，所以这个费用微乎其微，几分钱，可以忽略不计。如果你的访问量很大，可以买流量包（下行流量包），如果不买就是按量计费。

5.2字体、全局搜索加速

字体：

1. 找到 /themes/matery/source/css/下的 my.css 文件，填入下面的代码：

   @font-face{
       font-family: 'myFont';
       src: url('https://sulog.oss-cn-hangzhou.aliyuncs.com/myfont.ttf');
   }
   
   body{
       font-family: 'myFont';
   }
   

全局搜索：

在网站F12时查看了加载逻辑，全局搜索是加载了search.xml文件。该文件是在hexo g构建时，会在public文件夹中生成了该文件，该文件就是遍历了所有文章的结果集。

于是，我把生成后的search.xml上传到了oss上，并在themes\matery\layout\_partial\search.ejs中，对链接进行更换。

$(function () {
    searchFunc("https://sulog.oss-cn-hangzhou.aliyuncs.com/search.xml", 'searchInput', 'searchResult');
});

在你更新了文章后，需要将xml文件重新上传一次图床，以保证结果集是最新的，当然更新比较少时，你不介意可以隔一段时间再更新索引。