Hexo博客之速度优化

HEXO博客--性能优化

相信你通过前面两篇文章的了解，已经可以搭建属于自己的博客小屋了。在这个时代，颜值确实比较重要，但是我们不仅要有颜值，更要有内涵。天下功夫，唯快不破！这里给大家介绍一些博客速度优化的方法，通过这些可以使网站的性能有很大提升，给读者同时给自己带来更好的使用体验。

01STEPSgulp压缩

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

1安装依赖

首先安装gulp，执行以下命令：

npm insatll gulp -

要实现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",


02添加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'
]);03执行压缩

hexo g
gulp  // 执行压缩，两条命令可以合并：hexo g && gulp

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

hexo d


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

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

1方法一：

排除后缀名为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'));
});               //注意：一个字符都不能错


2方法二：

只压缩以.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字体库不建议使用，因为该字体库网址已经无法访问。

02STEPSCoding部署

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

01创建项目

注册账号就不说了，同Github上一样新建一个项目：

02部署公钥

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

如图中所说，此公钥只针对本项目，不能跟个人公钥通用。

如果没在Github上获取过公钥，请参考这篇教程：Hexo与Github搭建个人博客

测试一下公钥：

ssh-Tgit@git.coding.net

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

03部署项目

获取项目仓库的地址，选择以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 d04开启Pages服务

开启项目Pages服务，分支选择master分支即可：

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

05域名分流解析

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

设置域名分流解析，有很多平台：DNSPod、 腾讯云解析 、阿里云解析 等。因为我的域名不是在主流域名提供商那里买的，虽然域名提供商也提供域名解析服务，但是所能选择的解析线路往往比较少。当然，如果你的域名解析可以有线路选择，就直接在里面配置就行，操作都一样，只是操作界面有细微的区别。之前在Github上搭建博客的时候已经说过怎么设置域名解析，如果不会，参见文章：Hexo与Github搭建个人博客

06修改域名解析

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

07修改NS服务器

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

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

当然，博客速度优化的方法还有很多，这里不一一列举。反正我就用了这两种方法来优化博客，感觉效果还可以。

最后，欢迎大家关注我的公众号~

- 扫码关注我们 -米琪giaogiao屋与您共度五一