Hexo优化:URL持久化实现SEO和Gulp实现静态资源文件压缩

本文章主要介绍的是Hexo博客优化的两个方法,一个是针对SEO(搜索引擎优化),另一个是针对html文件加载速度的优化。

1. 原因

  • 在原始的Hexo中html文件的目录结构大致上是: /year/month/date/filename.html,这样是非常不易于搜索引擎来搜索、收录我们的博客的,所以应该尽可能减少目录的层数来实现SEO(搜索引擎优化)。
  • 原始Hexo在生成html代码时采取的是结构化的代码形式,拖累了浏览器加载页面的速度,所以所有的html都应该进行压缩。

2. URL持久化实现SEO

  • 一般来说一个好的网站,它的URL结构应该保持在3层左右,即html文件应该尽可能都被保存在根目录的一个文件夹下。

  • 插件hexo-abbrlink实现了这个功能,它将原来的URL地址重新进行了进制转换和再编码。

  • 安装hexo-abbrlink

    1
    npm install hexo-abbrlink --save
  • 配置博客根目录下的_config.yml文件。

    1
    2
    3
    4
    5
    # permalink: :title/
    permalink: archives/:abbrlink.html
    abbrlink:
    alg: crc32 # 算法:crc16(default) and crc32
    rep: hex # 进制:dec(default) and hex
  • 现在运行hexo cleanhexo g命令来重新生成文件看看,可以清楚的看到,URL结构成功变为了3层。

    seo

3. Gulp实现静态资源文件压缩

  • 首先我们需要安装Gulp插件和5个功能模块,依次运行下面的两条命令。

    1
    2
    3
    npm install gulp -g  #安装gulp
    #安装功能模块
    npm install gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify gulp-imagemin --save
  • 接下来在博客的根目录下新建gulpfile.js文件,并复制下面的内容到文件中。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    var gulp = require('gulp');

    //Plugins模块获取
    var minifycss = require('gulp-minify-css');
    var uglify = require('gulp-uglify');
    var htmlmin = require('gulp-htmlmin');
    var htmlclean = require('gulp-htmlclean');
    var imagemin = require('gulp-imagemin');
    //压缩css
    gulp.task('minify-css', function () {
    return gulp.src('./public/**/*.css')
    .pipe(minifycss())
    .pipe(gulp.dest('./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'))
    });
    //压缩js 不压缩min.js
    gulp.task('minify-js', function () {
    return gulp.src(['./public/**/*.js', '!./public/**/*.min.js'])
    .pipe(uglify())
    .pipe(gulp.dest('./public'));
    });

    //压缩图片
    gulp.task('minify-image', function(){
    return gulp.src('./public/imgs/**/*.*')
    .pipe(imagemin(
    [imagemin.gifsicle({'optimizationLevel': 3}),
    imagemin.jpegtran({'progressive': true}),
    imagemin.optipng({'optimizationLevel': 7}),
    imagemin.svgo()]
    ))
    .pipe(gulp.dest('./public/imgs'))
    });
    //4.0以前的写法
    //gulp.task('default', [
    // 'minify-html', 'minify-css', 'minify-js'
    //]);
    //4.0以后的写法
    // 执行 gulp 命令时执行的任务
    gulp.task('default', gulp.parallel('minify-html', 'minify-css', 'minify-js', 'minify-image', function(done) {
    // Do something after a, b, and c are finished.
    console.log("...");
    done();
    }));
  • 依次执行hexo gglup命令来看看效果,控制台输出如下。

    gulp

  • 现在打开public文件夹下的任意一个html看看,发现代码得到了完全的压缩。

    a

4. 部署命令

  • 因为添加了新的外部工具,博客的部署命令需要随之更改,具体如下。

    1
    hexo clean && hexo g && gulp && hexo d
------------- 本文结束 感谢您的阅读 -------------

本文标题:Hexo优化:URL持久化实现SEO和Gulp实现静态资源文件压缩

文章作者:Perry

发布时间:2019年07月05日 - 01:22

最后更新:2019年09月19日 - 13:47

原始链接:https://perry96.com/archives/957a5b76.html

许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。

0%