加速 Hexo 博客

speed-up-hexo.png

尝试在博客利用 InstantClick 和 Hexo 的两个插件 hexo-service-workerhexo-filter-optimize 让博客快如闪电⚡。

InstantClick

介绍请看官网,先下载我修改后的 instantclick.js(浏览器右键保存为),再放到~/blog/themes/next/source/js/src/下,然后添加代码:

文件位置:~/blog/themes/next/layout/_layout.swig
1
2
3
4
+ <script type="text/javascript" src="/js/src/instantclick.js" data-no-instant></script>
+ <script data-no-instant>InstantClick.init();</script>
</body>
</html>

可能会有一些问题,比如与 FancyBox、Google Analytics 等等的兼容问题,解决方法自行查看官网的文档或 Google。

Hexo 插件

先在站点文件夹根目录安装:

所在目录:~/blog/
1
$ npm install hexo-service-worker hexo-filter-optimize --save

然后在站点配置文件中配置:

文件位置:~/blog/_config.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
# offline config passed to sw-precache.
service_worker:
maximumFileSizeToCacheInBytes: 5242880
staticFileGlobs:
- public/index.html
- public/instantclick.js
- public/fonts/chinese-zodiac.woff2
- public/about/index.html
- public/life/*
- public/tech/*
- public/favicon.ico
- public/manifest.json
stripPrefix: public
verbose: false
runtimeCaching:
- urlPattern: /**/*
handler: cacheFirst
options:
origin: io-oi.me

filter_optimize:
enable: true
# remove static resource query string
# - like `?v=1.0.0`
remove_query_string: true
# remove the surrounding comments in each of the bundled files
remove_comments: true
css:
enable: true
# bundle loaded css file into the one
bundle: true
# use a script block to load css elements dynamically
delivery: true
# make specific css content inline into the html page
# - only support the full path
# - default is ['css/main.css']
inlines:
excludes:
js:
# bundle loaded js file into the one
bundle: true
excludes:
# set the priority of this plugin,
# lower means it will be executed first, default is 10
priority: 12

1)staticFileGlobs是首次加载时主动缓存的文件,我给出的只适合我的博客,请自行修改。怎么修改呢?hexo g之后去~/blog/public/目录下查看生成的文件,需要主动缓存则加上。

2)origin修改为你的博客域名,更多说明请查看 GitHub 上的 README。

最后,deploy到 GitHub 上查看效果,Enjoy it! ☕