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 条评论
登录 后参与评论

相关文章

来自专栏BeJavaGod

搜索服务Solr集群搭建 使用ZooKeeper作为代理层

上篇文章搭建了zookeeper集群 那好,今天就可以搭建solr搜服服务的集群了,这个和redis 集群不同,是需要zk管理的,作为一个代理层 安装四个tom...

2953
来自专栏jeremy的技术点滴

使用阿里云API刷新CDN缓存

4096
来自专栏Jed的技术阶梯

启动 HBase 报错:ERROR [main] regionserver.HRegionServerCommandLine: Region server exiting

我在 hadoop01、hadoop02、hadoop03 和 hadoop04 这4台节点上启动 HBase,其中 hadoop01、hadoop02 为 H...

743
来自专栏Linux运维学习之路

Linux Rsync备份服务介绍及部署守护进程模式

rsync介绍 rsync是一款开源的、快速的、多功能的、可实现全量及增量的本地或远程数据同步备份工具 在常驻模式(daemon mode)下,rsync默认监...

2337
来自专栏技术小黑屋

在Mac上为其他设备开启代理

前些日子,想要查看一个Release版本的HTTP请求,由于已经是发布版本,日志已然关闭,遂开始从HTTP代理的思路着手。

553
来自专栏Python爬虫与数据挖掘

如何在vSphere Client上如何创建虚拟机---靠谱的虚拟机创建教程

前天给小伙伴们介绍了Centos对应版本的下载教程,不懂的童鞋们可以戳进去看看~~

741
来自专栏每日一篇技术文章

微信小程序_09 HTTPS

标准模板 var util = require('../../utils/util.js') wx.request({ url: 'https://URL...

581
来自专栏linux系统运维

NFS介绍,NFS服务端安装配置,NFS配置选项

1364
来自专栏nice_每一天

转载 Elasticsearch开发环境搭建(Eclipse\MyEclipse + Maven)

作者:好记性不如烂笔头! 出处:http://www.cnblogs.com/zlslch/

521
来自专栏菩提树下的杨过

用winform应用程序登录网站的解决方案

用winform应用程序登录网站的解决方案 背景: 网站使用Membership机制来验证用户 要求: c/s应用程序要用网站上的用户名和密码登录,同时...

1958

扫描关注云+社区