相信你通過前面兩篇文章的了解，已經(jīng)可以搭建屬于自己的博客小屋了。在這個時代，顏值確實比較重要，但是我們不僅要有顏值，更要有內(nèi)涵。天下功夫，唯快不破！這里給大家介紹一些博客速度優(yōu)化的方法，通過這些可以使網(wǎng)站的性能有很大提升，給讀者同時給自己帶來更好的使用體驗。
gulp壓縮
如果你打開生成的public文件夾里面的html、css、js源文件，你就會發(fā)現(xiàn)里面有大段的空白，這些空白占據(jù)著一定的空間。gulp是一個基于Node.js的自動化構(gòu)建工具，我們可以通過一些gulp插件實現(xiàn)對html、css、js、image等靜態(tài)資源的高效壓縮，通過壓縮這些靜態(tài)資源，可以減少請求的數(shù)據(jù)量從而達到優(yōu)化博客訪問速度的目的。
安裝依賴
首先安裝gulp，執(zhí)行以下命令：
npm insatll gulp -g
要實現(xiàn)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文件，內(nèi)容如下：
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'))
});
// 默認(rèn)任務(wù)
gulp.task('default', [
'minify-html','minify-css','minify-js','minify-images'
]);
執(zhí)行壓縮
hexo g
gulp // 執(zhí)行壓縮，兩條命令可以合并：hexo g && gulp
然后就可以執(zhí)行部署命令：
hexo d
參考文章
當(dāng)時我按照這幾篇文章設(shè)置的時候遇到的‘坑’列出來，以防大家再次遇到：
讀參考文章二，你會發(fā)現(xiàn)他壓縮css文件使用的模塊為gulp-clean-css，甚至我們在安裝gulp-minify-css時，npm也會提醒我們使用gulp-clean-css。 當(dāng)時我想系統(tǒng)提示的總沒事，然后我就卸載gulp-minify-css，安裝了gulp-clean-css，然后當(dāng)我壓縮后測試時發(fā)現(xiàn)我的博客上的所有圖標(biāo)，比如：首頁、分類、標(biāo)簽等全都沒了，只剩下一個方塊。這個問題讓我折騰了很久，最后很生氣，重新裝了剛開始的模塊，壓縮后測試果然圖標(biāo)恢復(fù)。說實話，具體原因我也不知道，畢竟學(xué)藝不精，只是希望如果你們也遇到這種情況也按照我的方法試一下，也許就成功了呢！
添加gulpfile.js文件時，我是直接復(fù)制網(wǎng)上的到我的gulpfile.js文件里面，但是執(zhí)行的時候總會出現(xiàn)錯誤，提示不能壓縮javascript：
正如參考文文章三所說的那樣，以min.js這樣后綴名的文件再次壓縮就會出現(xiàn)以上錯誤，這個地方有兩個解決辦法。方法一：如參考文章三所說，排除后綴名為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結(jié)尾的文件，不壓縮.min.js結(jié)尾的文件。我把里面的文件夾都打開看了一遍，發(fā)現(xiàn).js結(jié)尾的文件都在public/js/src目錄里面，.min.js結(jié)尾的文件都在public/lib/**目錄里面，故設(shè)置為下面這樣：
//壓縮js
gulp.task('minify-js', function() {
return gulp.src('./public/js/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('./public/js'));
});
除此之外，參考文章三所說的谷歌字體庫更換為360字體庫不建議使用，因為該字體庫網(wǎng)址已經(jīng)無法訪問。
Coding部署
我們都知道Github的服務(wù)器在國外，因為某些原因，訪問速度一直不穩(wěn)定。除此之外Github還屏蔽了百度spider，這會造成百度根本爬取不到你的網(wǎng)頁，所以百度的索引量會很低。Coding算是國內(nèi)的Github，同樣提供代碼托管、項目管理和Pages服務(wù)等，因此我們可以像把網(wǎng)站部署在Github上一樣，部署在Coding 上，通過配置_config.yml文件實現(xiàn)Github和Coding上的文件同時更新，然后通過域名分流解析，來達到網(wǎng)站加速的目的。
創(chuàng)建項目
注冊賬號就不說了，官網(wǎng)：Coding
同Github上一樣新建一個項目：
部署公鑰
項目創(chuàng)建完成后，點擊項目，在其設(shè)置里面，選擇部署公鑰。我們在Github上部署的時候已經(jīng)生成過公鑰，直接復(fù)制其內(nèi)容到里面即可，名字自定。如下圖：
- 如圖中所說，此公鑰只針對本項目，不能跟個人公鑰通用。
- 如果沒在Github上獲取過公鑰，請參考這篇教程：Hexo與Github搭建個人博客
測試一下公鑰：
ssh -T git@git.coding.net
同Github上一樣，可能會有警告，如果有警告輸入yes回車即可。
部署項目
獲取項目倉庫的地址，選擇以SSH方式訪問倉庫，復(fù)制其內(nèi)容：
注意：上面的只是我的展示項目，以自己的為準(zhǔn)。
修改博客根目錄下的_config.yml文件，內(nèi)容如下：
deploy:
type: git
repo:
github: git@github.com:username/username.github.io.git
coding: git@git.coding.net:username/project.git // 此處為復(fù)制的內(nèi)容
branch: master
重新執(zhí)行部署命令，代碼即可同時部署到Github和Coding上：
hexo d
開啟Pages服務(wù)
開啟項目Pages服務(wù)，分支選擇master分支即可：
Pages服務(wù)開啟后，即可通過給定的域名訪問博客。同樣可以在自定義域名選項中添加自己的域名，如圖中所示：
域名分流解析
到這里，我們首先要知道我們的域名同時綁定在Github和Coding上的博客上，接下來設(shè)置域名分流解析。所謂分流解析，指的就是通過設(shè)置域名解析通道，使國內(nèi)用戶訪問位于Coding上的博客，國外用戶訪問位于Github上的博客。通過設(shè)置域名分流解析，使得國內(nèi)用戶訪問博客的速度大大提升。
設(shè)置域名分流解析，有很多平臺：DNSPod、 騰訊云解析 、阿里云解析 等。 因為我的域名不是在主流域名提供商那里買的，雖然域名提供商也提供域名解析服務(wù)，但是所能選擇的解析線路往往比較少。當(dāng)然，如果你的域名解析可以有線路選擇，就直接在里面配置就行，操作都一樣，只是操作界面有細(xì)微的區(qū)別。之前在Github上搭建博客的時候已經(jīng)說過怎么設(shè)置域名解析，如果不會，參見文章：Hexo與Github搭建個人博客
修改域名解析
修改之前綁定Github的域名解析，線路類型修改為國外，新建綁定到Coding的解析，線路類型為默認(rèn)，記錄值為pages.coding.me：
修改NS服務(wù)器
到域名提供商那里修改NS服務(wù)器為dnspod提供的dns地址。只適用于域名解析服務(wù)沒有線路選擇，使用第三方域名解析服務(wù)的同學(xué)：
注意：更改不會立即生效，請耐心等待，附dnspod官網(wǎng)的域名解析教程：DNSPod的解析
當(dāng)然，博客速度優(yōu)化的方法還有很多，這里不一一列舉。反正我就用了這兩種方法來優(yōu)化博客，感覺效果還可以。下面給出幾篇參考文章供大家閱讀：
