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

前言

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

hexo-offline-popup

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

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

仓库地址： 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
- 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.安装后打开未弹窗

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

演示

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

弹窗演示站：https://pfc049.coding-pages.com/

End