hexo 博客支持PWA和压缩博文

简介: 目标网站https://blog.rmiao.top/PWAyarn add hexo-offline然后在root config.yml里新增# offline config passed to sw-precache.

目标网站

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/





唯有不断学习方能改变! -- Ryan Miao
目录
相关文章
|
存储 JavaScript 开发者
VuePress 博客优化之增加 Vssue 评论功能
本篇讲讲如何使用 Vssue 快速的实现评论功能。
475 0
VuePress 博客优化之增加 Vssue 评论功能
一键自动化博客发布工具,用过的人都说好(cnblogs篇)
使用一键自动化博客发布工具blog-auto-publishing-tools把博客发布到cnblogs上。
一键自动化博客发布工具,用过的人都说好(oschina篇)
使用一键自动化博客发布工具blog-auto-publishing-tools把博客发布到oschina上。
一键自动化博客发布工具,用过的人都说好(oschina篇)
|
5月前
|
前端开发 JavaScript 搜索推荐
《VitePress 简易速速上手小册》第4章 博客功能增强(2024 最新版)
《VitePress 简易速速上手小册》第4章 博客功能增强(2024 最新版)
120 0
|
前端开发 Go iOS开发
如何通过hugo部署一套技术博客
一步一步带你搭建一个完成的技术播客
|
域名解析
如何使用Gatsby创建自己的博客
首先使用npm安装gatsby,使用gatsby –version命令可以查看是否安装
91 0
如何使用Gatsby创建自己的博客
|
数据采集 数据挖掘 Shell
[Hexo]部署博客及更新博文
找到其中的 deploy 标签,改成下图所示形式,并保存。注意:冒号后面要加上一个空格,否则会报错。
|
域名解析 网络协议 Shell
hexo博客功能扩展 - 使用七牛云作为图床服务
由于购买的是国外的域名,DNS解析较慢
150 0
|
存储 API 开发工具
Hexo博客功能扩展 - 图床介绍和迁移
上面就是所有的图床使用了,可以看到图床的选择还是很多的,这里不推荐渣浪的库来存自己的图片,比较推荐使用稳定的SM.MS或者路过图床这种比较稳定而且运行时间比较久的网站,并且对于使用用户有比较好的支持
200 0
一些技术社区关于博客内图片 markdown 源代码的字数统计
一些技术社区关于博客内图片 markdown 源代码的字数统计
141 0
一些技术社区关于博客内图片 markdown 源代码的字数统计