hexo 博客支持PWA和压缩博文

目标网站

https://blog.rmiao.top/

PWA

yarn add hexo-offline

然后在root config.yml里新增

# offline config passed to sw-precache.
service_worker:
  maximumFileSizeToCacheInBytes: 5242880
  staticFileGlobs:
  - /**/*.{js,html,css,png,jpg,gif,svg,eot,ttf,woff,woff2}
  - /lib/**/*.js
  - /lib/**/*.css
  - /images/*
  - /js/src/**/*.js
  stripPrefix: public
  verbose: true
  runtimeCaching:
    - urlPattern: /*
      handler: cacheFirst
      options:
        origin: cdn.bootcss.com

然后添加manifest.json, 比如我使用了 hexo-theme-next的主题,在layout/_custom/header.swig 中引用了manifest.json

<link rel="manifest" href="/manifest.json">

manifest生成地址: https://app-manifest.firebaseapp.com/

比如,我的为

{
    "name": "风 - Ryan Miao",
    "short_name": "风",
    "theme_color": "#2196f3",
    "background_color": "#2196f3",
    "display": "browser",
    "scope": "/",
    "start_url": "/"
  }

具体缓存策略还是看下官方文档,这里不求甚解缓存。重启博客,打开控制台,查看网络,会发现,所有的文件都是(from ServiceWorker) 或者(from disk cache)或者(from memory cache)

当hexo g之后,会多出一个service-worker.js里面则是会缓存的内容。

压缩

看了下计算,压缩大概可以节省一半空间。

$ npm install gulp -g
$ npm install gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp --save

或者使用yarn 

yarn global add gulp
yarn add gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp

然后,在根目录新增 gulpfile.js :

var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
// 压缩 public 目录 css
gulp.task('minify-css', function() {
    return gulp.src('./public/**/*.css')
        .pipe(minifycss())
        .pipe(gulp.dest('./public'));
});
// 压缩 public 目录 html
gulp.task('minify-html', function() {
  return gulp.src('./public/**/*.html')
    .pipe(htmlclean())
    .pipe(htmlmin({
         removeComments: true,
         minifyJS: true,
         minifyCSS: true,
         minifyURLs: true,
    }))
    .pipe(gulp.dest('./public'))
});
// 压缩 public/js 目录 js
gulp.task('minify-js', function() {
    return gulp.src('./public/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});
// 执行 gulp 命令时执行的任务
gulp.task('default', [
    'minify-html','minify-css','minify-js'
]);

运行:

hexo clean && hexo g && gulp &&  hexo s

参考

https://blog.naaln.com/2017/09/hexo-with-pwa/

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏技术记录

Dubbo(四) Dubbo-Admin项目 Dubbo管理台

前言 在dubbo项目中,有注册中心,消费者,提供者就足以构成一个完整的项目了。但是仅仅有这三个角色,很难对整个项目状态有直观的了解,以及对项目操作。 因此早有...

22810
来自专栏云计算教程系列

如何使用mosh替换ssh

毫无疑问,SSH是远程服务器管理最实用的方法。然而,它的主导地位并不意味着它在某些情况下没有缺点。如果您曾在移动设备上使用过SSH,那么,你应该知道SSH的一些...

934
来自专栏北京马哥教育

[干货]邮件原理你真的造吗|螃蟹同学

一、前言 虽然现在QQ、微信等即时聊天工具原来越盛行,但是在企业与企业之间大部分还是会使用邮件系统进行信息交换。所以作为运维人员,更需要了解这个技术的原理。下...

3258
来自专栏黑白安全

用aircrack-ng破解 wifi 密码

开始前,先连上无线网卡,因为虚拟机中的kali系统不用调用笔记本自带的无线网卡,所以需要一个外接无线网卡,然后接入kali系统。

904
来自专栏乐沙弥的世界

非root用户tomcat daemon配置

基于安全策略来考虑,绝大多数应用程序都应以非root用户来启动,对于轻量级的应用程序,如tomcat,用root再寻常不过了。你懂的,方便啊。在生产环境这么干很...

622
来自专栏自由而无用的灵魂的碎碎念

Vmware10如何打开vmware11建立的虚拟机

使用文本工具打开VMware 虚拟机配置文件(*.vmx文件),找到"virtualHW.version"一行,将值11修改为10保存即可。

602
来自专栏IT笔记

Docker学习之SSH连接docker容器

前言 不论是开发者是运维人员,都经常有需要进入容器的诉求,目前看,主要的方法不外乎以下几种: 使用ssh登陆进容器,需要在容器中安装启动sshd,存在开销和攻击...

34611
来自专栏Web项目聚集地

Linux养成计划(一)

这篇文章介绍关于Linux系统的安装以及网络配置,关于虚拟机配置中网络的三个模式区别进行详细讲解。学习Linux对于后端开发人员是很有必要的,结合实际开发,Li...

772
来自专栏张戈的专栏

php平滑重启nginx,彻底清除WordPress的静态缓存

每一次分享技术文章,都是基于自己的痛点,基于自己的需求。这次也一样,所以分享具体方法之前,我先说一下我这次的需求与痛点: 一、需求痛点 在博客集成了代码版缓存功...

2889
来自专栏啸天"s blog

UDPSpeeder+Udp2raw使用教程,并配合SSTap加速优化网络游戏

6126

扫码关注云+社区