Hexo博客技巧:提升博客访问速度

前言

之前说到,GitHub的服务器在国外较慢,虽然可以使用JSDeliver加速文件,但是效果并不是很明显,速度没有得到明显提升,这篇文章就讲讲怎么利用hexo-offline-popup插件提升博客访问速度,且还能实现博客更新后弹窗提醒的功能。

hexo-offline-popup

hexo-offline-popup 是一个 hexo 插件, 它可加速您的Hexo网站的加载速度,以及网站内容更新弹窗提示。

该插件基于停止维护已久的hexo-service-worker插件,并在它的基础上加以改进。

仓库地址: http://aciano.top/redirect/?target=https://github.com/Colsrch/hexo-offline-popup

食用过程

安装

在Hexo根目录打开Git-bash 输入以下指令进行安装:

1
npm i hexo-offline-popup --save

安装后, 运行 hexo clean && hexo generate 激活插件。

配置

在博客根目录的 _config.yml 中添加以下配置:

1
2
3
4
5
6
7
# offline config passed to sw-precache.
service_worker:
maximumFileSizeToCacheInBytes: 5242880
staticFileGlobs:
- public/**/*.{js,html,css,png,jpg,gif,svg,eot,ttf,woff,woff2}
stripPrefix: public
verbose: true

如果你有CDN资源,例:

1
- http://aciano.top/redirect/?target=https://cdn.jsdelivr.net/npm/artitalk

将下面的配置追加到刚才添加的配置下面:

1
2
3
4
5
6
7
8
9
runtimeCaching:
- urlPattern: /* # 子路径(接受通配符)
handler: cacheFirst
options:
origin: unpkg.com # 域名
- urlPattern: /npm/* # 子路径(接受通配符)
handler: cacheFirst
options:
origin: cdn.jsdelivr.net # 域名

其中的origin填写你的CDN资源即可

上传

执行下列代码激活并使用:

1
2
3
hexo clean
hexo g
hexo deploy

常见问题

1.本地预览无效果

该插件仅部署后生效,本地运行不生效。

2.安装后打开未弹窗

安装插件后首次打开博客不会弹窗,后续更新将会有弹窗。

演示

更新弹窗仅在博客更新时会弹出,因此留了一个弹窗演示站:

弹窗演示站:http://aciano.top/redirect/?target=https://pfc049.coding-pages.com/

End