blog/source/_posts/Make_Blog_Better.md

11 KiB
Raw Blame History

title date tags categories
优化博客 2022-01-07 20:10:00
博客
Hexo
Icarus
Vercel
写BUG日常
教程

怎么才能让博客加载速度更快呢(呆

博客已经运行了一段时间了,但是一直以来主站点使用 GitHub Pages 套 CloudFlare导致整体加载速度一直不尽人意。这几天集中处理了一下博客的问题。

解决文章时间问题

Hexo 更新日期问题

自从更换到了 GitHub Actions 来部署我的博客,一直有一个让我很烦恼的事情,就是 Hexo 最新部署的文章更新时间会显示成最新的部署时间,这就导致我的博客所有文章的更新时间都是错误的。

{% raw %}

{% endraw %} 请确认你的 Hexo 版本为 5.0 及以上 {% raw %}
{% endraw %}

解决方案是修改 _config.yml 中的 updated_option 中的值改为 date,并重新部署博客。

使用更快的静态资源加载

博客加载速度优化之路二

前段时间jsDelivr 备案许可被注销,导致本站大量静态资源加载失败,要不就是时间极长,拖慢速度,遂寻找更稳定的 CDN 替换。于是我选择了字节跳动静态资源公共库,加载速度相当不错,也挺稳定的。

这里以 hexo-theme-icarus 为例来修改

providers:
-   cdn: jsdelivr
-   fontcdn: google
-   iconcdn: fontawesome
+   cdn: '[cdnjs]https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/${package}/${version}/${filename}'
+   fontcdn: loli
+   iconcdn: 'https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/5.15.2/css/all.css'

其它主题请根据各个主题的文档自行修改 CDN一般主题的用户文档中都会写。

摆脱 GitHub Pages 和 CloudFlare

因为 GitHub Pages 和 CloudFlare 在一起用对于中国大陆的加载实在太不友好,即使用了更快的静态资源库依然得不到提升,于是我决定从 GitHub Pages 和 Actions 迁移到 Vercel,且不使用 CloudFlare 的代理。只要注册 Vercel 账户并导入 GitHub 储存库即可。

使用最新的主题

最开始安装主题是将主题包的 zip 下载下来并解压到 theme 文件夹,现在我决定弃用这种方法,改为 npm 安装来使用最新版的主题,只要删掉 icarus 的主题文件夹,再在 package.json 中里面加入 hexo-theme-icarus 即可

  "dependencies": {
    "bulma-stylus": "^0.8.0",
    "hexo": "^5.0.2",
+   "hexo-theme-icarus": "^4.5.0",
    "hexo-deployer-git": "^3.0.0",

但是这样做也有缺点,因为每次部署都是从 npm 直接拉取我无法修改网页底部的信息所以原来的萌ICP就加不上了其实挺可惜的。