目标网站

https://blog.rmiao.top/

PWA

yarn add hexo-offline

然后在root config.yml里新增

# offline config passed to sw-precache.
service_worker:maximumFileSizeToCacheInBytes: 5242880staticFileGlobs:- /**/*.{js,html,css,png,jpg,gif,svg,eot,ttf,woff,woff2}- /lib/**/*.js
  - /lib/**/*.css- /images/*- /js/src/**/*.jsstripPrefix: publicverbose: trueruntimeCaching:- 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/

唯有不断学习方能改变! -- Ryan Miao

hexo 博客支持PWA和压缩博文相关推荐

  1. 迁移Hexo博客到Google渐进式Web应用(PWA)

      如果说通过TravisCI实现博客的自动化部署,是持续集成这个概念在工作以外的一种延伸,那么今天这篇文章想要和大家分享的,则是我自身寻求技术转型和突破的一种挣扎.前段时间Paul同我聊到Web技术 ...

  2. 02 Hexo博客Butterfly主题配置博客评论邮件提醒

    概述 个人博客搭建成功后已经上线运行了好久,但是一直没有时间配置评论区的邮件提醒功能,所以今晚有时间就抽空配置了,然后将操作过程做一下记录. 前提条件 一个已经上线运行的Hexo博客(至于用什么主题都 ...

  3. 利用官方支持为基于GitHub Pages的Hexo博客启用HTTPS

    HTTP(超文本传输协议),是一个基于请求与响应,无状态的,应用层的协议,常基于TCP/IP协议传输数据,互联网上应用最为广泛的一种网络协议,所有的WWW文件都必须遵守这个标准.设计HTTP的初衷是为 ...

  4. 利用Cloudflare为基于GitHub Pages的Hexo博客添加HTTPS支持

    文章目录 ● 前言 ● 注册 Cloudflare ● 添加站点 ● 修改DNS ● 开启 HTTPS ● 重定向强制 HTTPS HTTP(超文本传输协议),是一个基于请求与响应,无状态的,应用层的 ...

  5. hexo博客next主题添加对数学公式的支持

    hexo博客默认为markdown格式,但是新搭建的hexo博客不支持公式渲染,下面介绍hexo博客next主题下添加对数学公式支持的方法. 环境说明: hexo版本:5.4.1 next版本: 最新 ...

  6. Windows下使用GitHub Pages搭建hexo博客详细教程以及Next主题超全配置

    根据下面的教程搭建的博客见这里 前言 马上要进入研究生了,不能再过浑浑噩噩的日子了,搭建一个小网站,用于记录自己所学的东西.其实,之前在腾讯云1元乞丐版上也搭建过博客,但是呢,只用来扯淡了.这次使用 ...

  7. 用TravisCI持续集成自动部署Hexo博客的个人实践

    优秀的程序员都是不用持续集成的 前几天我面试了一个码农,连续几个专业问题他都没答上来. 尴尬之余,我问它:「你没有什么理想吗?你现在最渴望的事情是什么?」 码农转悠着大眼睛,不假思索道:「做一个持续集 ...

  8. 【hexo博客】hexo+NexT主题个人博客

    1. 环境准备 参考链接 1.1 在github创建Git仓库 在github托管的GithubPage,也可以托管到Gitee,但是GiteePage好像有一些限制具体看自己选择 仓库名一定要输入 ...

  9. 在Github上面搭建一个自己域名的Hexo博客

    前言 在一次看到别人的博客主页,觉得设计很漂亮.但是由于自己对于前台这块没什么办法,煞是羡慕.偶然中发现这种样式是在Github上面搭建的,使用的是Next主题.于是便想自己也搭建一个,于是便去就去查 ...

最新文章

  1. 这一招将 Numpy 加速 700 倍!!!
  2. Element el-upload上传组件详解
  3. linux DNS服务器配置
  4. Spring BPP中优雅的创建动态代理Bean
  5. Linux centos 6.7 设置主机名
  6. android 多点触控缩放,Android多点触控(图片的缩放Demo)
  7. 【C++ Priemr | 15】虚函数常见问题
  8. React开发(168):...dva调用不成功的原因
  9. java线程池案例_使用Executors 和 ThreadPoolExecutor实现Java线程池案例
  10. 大屏监控系统实战(7)-后端整合MybatisPlus并暴露服务
  11. 在Linux上使用logwatch分析监控日志文件
  12. php原生读取excel文件夹,原生php实现excel文件读写的方法分析php技巧
  13. 从生产线到生产岛:理解敏捷开发中的设计与测试活动
  14. 自学JAVA-2:数据类型与运算符
  15. uva10668二分解方程
  16. 计算机应用个人职业发展规划简短,个人职业生涯规划
  17. 机器学习笔记 - Moore-Penrose 伪逆
  18. 飞凌单片机解密_GX28E01单片机解密
  19. n的阶乘(递归与非递归)
  20. burp安装及代理设置

热门文章

  1. 初等数学O 集合论基础 第二节 映射与集合的势
  2. UA MATH ECE636 信息论10 Group Testing简介
  3. 使用数值计算库Zero - VC6调用失败、cfree调用成功
  4. 80x86汇编按二进制输出数字的程序图解和代码解释
  5. CODE 大全网站整站源码分享(带数据库)
  6. Httpd之检测与安装
  7. 经典算法问题 - 最大连续子数列和
  8. linux初级学习笔记七:linux用户管理,密码和组命令详解!(视频序号:04_1)
  9. jQuery入门学习
  10. C# 中的常用正则表达式总结