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

相关文章

来自专栏jouypub

Linux系统优化

net.ipv4.ip_local_port_range = 1024 65000

1703
来自专栏Java学习网

Java中的Socket编程学习

Java中的Socket编程学习   Socket,又称为套接字,Socket是计算机网络通信的基本的技术之一。如今大多数基于网络的软件,如浏览器,即时通讯工...

2617
来自专栏守候书阁

webpack+vue项目实战(一,搭建运行环境和相关配置)

现在正在开发一个公司的后台管理项目,项目是一个单页面应用。功能上就是管理销售订单的各个环节,包括物流管理,回款管理,订单管理等等的功能。这些就不多说了。项目是,...

1091
来自专栏狂码一生

CentOS-7安装成功后配置网络连接

一、修改配置文件     vim /etc/sysconfig/network-scripts/ifcfg-ens33     将 ONBOOT=no 修改为...

3036
来自专栏张善友的专栏

让Jexus支持高并发请求的优化技巧

Jexus web server 5.1 每个工作进程的最大并发数固定为1万,最多可以同时开启4个工作进程,因此,每台Jexus V5.1服务器最多可以到支持4...

1955
来自专栏拂晓风起

Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(上篇——纯前端多页面)

2732
来自专栏北京马哥教育

sysctl.conf学习和调优

? 前言 记得第一次接触/etc/security/limits.conf和/etc/sysctl.conf时 是因为部署Oracle时要按需修改内核参数。l...

4357
来自专栏卡少编程之旅

webpack4配置入门和进阶

1.3K12
来自专栏Jerry的SAP技术分享

运行npm update等命令出错后如何分析问题根源

npm ERR! Unexpected token < in JSON at position 0

952
来自专栏Python小屋

Python获取局域网内所有机器IP地址与网卡MAC地址

已发相关文章请参考Python获取本机所有网卡的MAC地址 本文代码使用ARP协议获取局域网内所有计算机的IP地址与MAC地址,思路是使用系统命令arp获取A...

5899

扫码关注云+社区