Hexo 静态博客加速

优化 HTML,CSS,JS, Image

更新: 为了优化 HTML,CSS,JS, 我们需要安装插件 Hexo-all-minifier, 安装非常简单 Git Bash 进到你的 hexo 博客根目录安装该插件

然后在 hexo 博客根目录下的 config.yml 文件中加入如下代码

具体用法参照插件主页.

CDN

接下来需要把 CSS, JS, Image 等静态文件利用七牛等 CDN 服务加速, 也就是 hexo o 以后生成的这类文件(优化过的). 一般来说只添加网页结构基本不变的东西, 例如 CSSJS, 对于内容里面的图片文件另议. 举个例子, 以默认主题 Landscape 为例, 打开 \layout\_partial 里的 after-footer.ejs, 找到如下代码.

为了加速这些文件, 我们需要找到 public 文件里的这些已经被优化过的文件, 然后将之上传到七牛等服务. 这样我们会得到这些文件的地址, 然后修改上述代码, 将其对应至七牛等服务的地址.

需要注意一点 jquery.fancybox.css 将会用到 fancybox 文件下的图片, 所以我们还需要把对应的图片上传到七牛, 并且保持文件夹目录.

添加 InstantClick

加上 InstantClick.js 后, 通过预加载可以达到网页秒开的效果 (并没有实际提速), 具体介绍可以看这里 博客启用InstantClick. 使用 instantclick.js 也很简单, 进入 InstantClick 下载 instantclick.min.js 至使用主题目录下 source/js 文件夹里, 然后在 \layout\_partial 里的 after-footer.ejs, 加上如下代码即可.

使用 InstantClick 可能导致 Google Analyitcs, 百度统计, MathjaxAdsense 等不兼容, 官方提供了 GA解决办法

怎样使 InstantClick 兼容 MathJax, 百度统计, 让InstantClick兼容MathJax、百度统计 等? 文章让InstantClick兼容MathJax、百度统计等给出了如下解决办法. 即在 InstantClick.init(); 之前加入

这段代码的含义是每次页面重载时,通过直接的函数调用来实现 MathJax, 百度统计, Google Code Prettify, Google Analytics的重新运行。

简单教程

加速一些常用 CSSJQUERY, 以我的 head.ejs 部分为例

这里的 faviconCSS 文件都可以使用七牛静态文件加速.

因为本站使用了 font-awesome, 因此使用七牛的公共库 staticfile.org, 即

这里请注意对应的版本号, 不一定兼容.

对于其他一些文件, 需要上传至自己的七牛空间, 即 style.csshtml5.js 以及 favicon. 最后我的头部变成了

然后是 after-footer.ejs 部分, 原来是

变成了

请在修改前备份好主题, 并且在发布前通过 hexo s 来预览博客.

发表评论

电子邮件地址不会被公开。 必填项已用*标注