Hexo博客之速度优化

文章作者:枫頔

在这个时代,颜值确实比较重要,但是我们不仅要有颜值,更要有内涵。天下功夫,唯快不破!这里给大家介绍一些博客速度优化的方法,通过这些可以使网站的性能有很大提升,给读者同时给自己带来更好的使用体验。

gulp压缩

如果你打开生成的public文件夹里面的html、css、js源文件,你就会发现里面有大段的空白,这些空白占据着一定的空间。gulp是一个基于Node.js的自动化构建工具,我们可以通过一些gulp插件实现对html、css、js、image等静态资源的高效压缩,通过压缩这些静态资源,可以减少请求的数据量从而达到优化博客访问速度的目的。

安装依赖

首先安装gulp,执行以下命令:

npm insatll gulp -g

要实现gulp压缩需要安装以下五个模块:

  • gulp-htmlclean // 清理html
  • gulp-htmlmin // 压缩html
  • gulp-minify-css // 压缩css
  • gulp-uglify // 混淆js
  • gulp-imagemin // 压缩图片

安装模块:

npm install gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify gulp-imagemin --save

安装的模块可以在根目录下的package.json文件里面看到。

"gulp": "^3.9.1",
"gulp-htmlclean": "^2.7.14",
"gulp-htmlmin": "^3.0.0",
"gulp-imagemin": "^3.3.0",
"gulp-minify-css": "^1.2.4",
"gulp-uglify": "^3.0.0",
添加gulpfile.js

进入博客根目录,新建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');
var imagemin = require('gulp-imagemin');

// 压缩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'))
});
// 压缩css
gulp.task('minify-css', function() {
    return gulp.src('./public/**/*.css')
        .pipe(minifycss({
            compatibility: 'ie8'
        }))
        .pipe(gulp.dest('./public'));
});
// 压缩js
gulp.task('minify-js', function() {
    return gulp.src('./public/js/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});
// 压缩图片
gulp.task('minify-images', function() {
    return gulp.src('./public/images/**/*.*')
        .pipe(imagemin(
        [imagemin.gifsicle({'optimizationLevel': 3}), 
        imagemin.jpegtran({'progressive': true}), 
        imagemin.optipng({'optimizationLevel': 7}), 
        imagemin.svgo()],
        {'verbose': true}))
        .pipe(gulp.dest('./public/images'))
});
// 默认任务
gulp.task('default', [
    'minify-html','minify-css','minify-js','minify-images'
]);
执行压缩
hexo g
gulp  // 执行压缩,两条命令可以合并:hexo g && gulp

然后就可以执行部署命令:

hexo d

 

当时我按照这几篇文章设置的时候遇到的‘坑’列出来,以防大家再次遇到:

读参考文章二,你会发现他压缩css文件使用的模块为gulp-clean-css,甚至我们在安装gulp-minify-css时,npm也会提醒我们使用gulp-clean-css。 当时我想系统提示的总没事,然后我就卸载gulp-minify-css,安装了gulp-clean-css,然后当我压缩后测试时发现我的博客上的所有图标,比如:首页、分类、标签等全都没了,只剩下一个方块。这个问题让我折腾了很久,最后很生气,重新装了刚开始的模块,压缩后测试果然图标恢复。说实话,具体原因我也不知道,毕竟学艺不精,只是希望如果你们也遇到这种情况也按照我的方法试一下,也许就成功了呢!

添加gulpfile.js文件时,我是直接复制网上的到我的gulpfile.js文件里面,但是执行的时候总会出现错误,提示不能压缩javascript

解析js错误.png

正如参考文文章三所说的那样,以min.js这样后缀名的文件再次压缩就会出现以上错误,这个地方有两个解决办法。方法一:如参考文章三所说,排除后缀名为min.js的文件。我把压缩js文件的单独列出来,供大家参考:

// 压缩public目录下的所有js  
gulp.task('minify-js', function() {
    return gulp.src(['./public/**/.js','!./public/js/**/*min.js'])
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});               //注意:一个字符都不能错

方法二:只压缩以.js结尾的文件,不压缩.min.js结尾的文件。我把里面的文件夹都打开看了一遍,发现.js结尾的文件都在public/js/src目录里面,.min.js结尾的文件都在public/lib/**目录里面,故设置为下面这样:

//压缩js
gulp.task('minify-js', function() {
    return gulp.src('./public/js/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('./public/js'));
});

除此之外,参考文章三所说的谷歌字体库更换为360字体库不建议使用,因为该字体库网址已经无法访问。

Coding部署

我们都知道Github的服务器在国外,因为某些原因,访问速度一直不稳定。除此之外Github还屏蔽了百度spider,这会造成百度根本爬取不到你的网页,所以百度的索引量会很低。Coding算是国内的Github,同样提供代码托管、项目管理和Pages服务等,因此我们可以像把网站部署在Github上一样,部署在Coding 上,通过配置_config.yml文件实现Github和Coding上的文件同时更新,然后通过域名分流解析,来达到网站加速的目的。

创建项目

注册账号就不说了,官网:Coding

同Github上一样新建一个项目:

部署公钥

项目创建完成后,点击项目,在其设置里面,选择部署公钥。我们在Github上部署的时候已经生成过公钥,直接复制其内容到里面即可,名字自定。如下图:

部署公钥

  • 如图中所说,此公钥只针对本项目,不能跟个人公钥通用。
  • 如果没在Github上获取过公钥.

测试一下公钥:

ssh -T git@git.coding.net

同Github上一样,可能会有警告,如果有警告输入yes回车即可。

coding ssh

部署项目

获取项目仓库的地址,选择以SSH方式访问仓库,复制其内容:

注意:上面的只是我的展示项目,以自己的为准。

修改博客根目录下的_config.yml文件,内容如下:

deploy:
  type: git
  repo: 
    github: git@github.com:username/username.github.io.git
    coding: git@git.coding.net:username/project.git  // 此处为复制的内容
  branch: master

重新执行部署命令,代码即可同时部署到Github和Coding上:

hexo d
开启Pages服务

开启项目Pages服务,分支选择master分支即可:

coding pages

Pages服务开启后,即可通过给定的域名访问博客。同样可以在自定义域名选项中添加自己的域名,如图中所示:

test pages

域名分流解析

到这里,我们首先要知道我们的域名同时绑定在Github和Coding上的博客上,接下来设置域名分流解析。所谓分流解析,指的就是通过设置域名解析通道,使国内用户访问位于Coding上的博客,国外用户访问位于Github上的博客。通过设置域名分流解析,使得国内用户访问博客的速度大大提升。

设置域名分流解析,有很多平台:DNSPod腾讯云解析阿里云解析 等。 因为我的域名不是在主流域名提供商那里买的,虽然域名提供商也提供域名解析服务,但是所能选择的解析线路往往比较少。当然,如果你的域名解析可以有线路选择,就直接在里面配置就行,操作都一样,只是操作界面有细微的区别。

修改域名解析

修改之前绑定Github的域名解析,线路类型修改为国外,新建绑定到Coding的解析,线路类型为默认,记录值为pages.coding.me

修改NS服务器

到域名提供商那里修改NS服务器为dnspod提供的dns地址。只适用于域名解析服务没有线路选择,使用第三方域名解析服务的同学:

dnspod ns

注意:更改不会立即生效,请耐心等待,附dnspod官网的域名解析教程:DNSPod的解析

 

标签:

发表评论

电子邮件地址不会被公开。 必填项已用*标注