相信你通過前面兩篇文章的了解禽拔，已經(jīng)可以搭建屬于自己的博客小屋了刘离。在這個(gè)時(shí)代室叉，顏值確實(shí)比較重要，但是我們不僅要有顏值硫惕，更要有內(nèi)涵茧痕。天下功夫，唯快不破恼除！這里給大家介紹一些博客速度優(yōu)化的方法踪旷，通過這些可以使網(wǎng)站的性能有很大提升，給讀者同時(shí)給自己帶來更好的使用體驗(yàn)豁辉。
gulp壓縮
如果你打開生成的public文件夾里面的html令野、css、js源文件徽级，你就會(huì)發(fā)現(xiàn)里面有大段的空白气破，這些空白占據(jù)著一定的空間。gulp是一個(gè)基于Node.js的自動(dòng)化構(gòu)建工具餐抢，我們可以通過一些gulp插件實(shí)現(xiàn)對(duì)html现使、css、js旷痕、image等靜態(tài)資源的高效壓縮朴下，通過壓縮這些靜態(tài)資源，可以減少請(qǐng)求的數(shù)據(jù)量從而達(dá)到優(yōu)化博客訪問速度的目的苦蒿。
安裝依賴
首先安裝gulp渗稍，執(zhí)行以下命令：
npm insatll gulp -g
要實(shí)現(xiàn)gulp壓縮需要安裝以下五個(gè)模塊：
- 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
進(jìn)入博客根目錄竿屹，新建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í)我按照這幾篇文章設(shè)置的時(shí)候遇到的‘坑’列出來哮缺，以防大家再次遇到：
讀參考文章二弄跌，你會(huì)發(fā)現(xiàn)他壓縮css文件使用的模塊為gulp-clean-css，甚至我們?cè)诎惭bgulp-minify-css時(shí)铛只，npm也會(huì)提醒我們使用gulp-clean-css。 當(dāng)時(shí)我想系統(tǒng)提示的總沒事直撤，然后我就卸載gulp-minify-css蜕着，安裝了gulp-clean-css，然后當(dāng)我壓縮后測(cè)試時(shí)發(fā)現(xiàn)我的博客上的所有圖標(biāo)侮东，比如：首頁悄雅、分類、標(biāo)簽等全都沒了宽闲，只剩下一個(gè)方塊容诬。這個(gè)問題讓我折騰了很久，最后很生氣览徒，重新裝了剛開始的模塊习蓬，壓縮后測(cè)試果然圖標(biāo)恢復(fù)。說實(shí)話芦缰，具體原因我也不知道，畢竟學(xué)藝不精让蕾，只是希望如果你們也遇到這種情況也按照我的方法試一下或听，也許就成功了呢！
添加gulpfile.js文件時(shí)再姑，我是直接復(fù)制網(wǎng)上的到我的gulpfile.js文件里面找御，但是執(zhí)行的時(shí)候總會(huì)出現(xiàn)錯(cuò)誤绍填，提示不能壓縮javascript：
正如參考文文章三所說的那樣讨永，以min.js這樣后綴名的文件再次壓縮就會(huì)出現(xiàn)以上錯(cuò)誤遇革，這個(gè)地方有兩個(gè)解決辦法萝快。方法一：如參考文章三所說，排除后綴名為min.js的文件旋恼。我把壓縮js文件的單獨(dú)列出來奄容，供大家參考：
// 壓縮public目錄下的所有js
gulp.task('minify-js', function() {
return gulp.src(['./public/**/.js','!./public/js/**/*min.js'])
.pipe(uglify())
.pipe(gulp.dest('./public'));
}); //注意：一個(gè)字符都不能錯(cuò)
方法二：只壓縮以.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字體庫不建議使用生兆，因?yàn)樵撟煮w庫網(wǎng)址已經(jīng)無法訪問鸦难。
Coding部署
我們都知道Github的服務(wù)器在國(guó)外，因?yàn)槟承┰蚧鞯校L問速度一直不穩(wěn)定拴事。除此之外Github還屏蔽了百度spider圣蝎，這會(huì)造成百度根本爬取不到你的網(wǎng)頁衡瓶，所以百度的索引量會(huì)很低哮针。Coding算是國(guó)內(nèi)的Github，同樣提供代碼托管等太、項(xiàng)目管理和Pages服務(wù)等蛮放，因此我們可以像把網(wǎng)站部署在Github上一樣，部署在Coding 上缝其，通過配置_config.yml文件實(shí)現(xiàn)Github和Coding上的文件同時(shí)更新徘六，然后通過域名分流解析待锈，來達(dá)到網(wǎng)站加速的目的。
創(chuàng)建項(xiàng)目
注冊(cè)賬號(hào)就不說了和屎，官網(wǎng)：Coding
同Github上一樣新建一個(gè)項(xiàng)目：
部署公鑰
項(xiàng)目創(chuàng)建完成后春瞬，點(diǎn)擊項(xiàng)目宽气，在其設(shè)置里面，選擇部署公鑰绪氛。我們?cè)贕ithub上部署的時(shí)候已經(jīng)生成過公鑰涝影，直接復(fù)制其內(nèi)容到里面即可，名字自定序目。如下圖：
- 如圖中所說宛琅，此公鑰只針對(duì)本項(xiàng)目，不能跟個(gè)人公鑰通用舆瘪。
- 如果沒在Github上獲取過公鑰红伦，請(qǐng)參考這篇教程：Hexo與Github搭建個(gè)人博客
測(cè)試一下公鑰：
ssh -T git@git.coding.net
同Github上一樣，可能會(huì)有警告召调，如果有警告輸入yes回車即可蛮浑。
部署項(xiàng)目
獲取項(xiàng)目倉庫的地址沮稚，選擇以SSH方式訪問倉庫，復(fù)制其內(nèi)容：
注意：上面的只是我的展示項(xiàng)目障般，以自己的為準(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í)行部署命令，代碼即可同時(shí)部署到Github和Coding上：
hexo d
開啟Pages服務(wù)
開啟項(xiàng)目Pages服務(wù)办素，分支選擇master分支即可：
Pages服務(wù)開啟后，即可通過給定的域名訪問博客勺三。同樣可以在自定義域名選項(xiàng)中添加自己的域名吗坚，如圖中所示：
域名分流解析
到這里呆万，我們首先要知道我們的域名同時(shí)綁定在Github和Coding上的博客上谋减，接下來設(shè)置域名分流解析扫沼。所謂分流解析，指的就是通過設(shè)置域名解析通道严就，使國(guó)內(nèi)用戶訪問位于Coding上的博客器罐，國(guó)外用戶訪問位于Github上的博客。通過設(shè)置域名分流解析铸董，使得國(guó)內(nèi)用戶訪問博客的速度大大提升肴沫。
設(shè)置域名分流解析樊零，有很多平臺(tái)：DNSPod、 騰訊云解析 夺艰、阿里云解析 等沉衣。 因?yàn)槲业挠蛎皇窃谥髁饔蛎峁┥棠抢镔I的，雖然域名提供商也提供域名解析服務(wù)存谎，但是所能選擇的解析線路往往比較少肥隆。當(dāng)然肝集，如果你的域名解析可以有線路選擇链患，就直接在里面配置就行晴叨，操作都一樣，只是操作界面有細(xì)微的區(qū)別初厚。之前在Github上搭建博客的時(shí)候已經(jīng)說過怎么設(shè)置域名解析产禾，如果不會(huì)绪杏，參見文章：Hexo與Github搭建個(gè)人博客
修改域名解析
修改之前綁定Github的域名解析，線路類型修改為國(guó)外势似，新建綁定到Coding的解析僧著，線路類型為默認(rèn)，記錄值為pages.coding.me：
修改NS服務(wù)器
到域名提供商那里修改NS服務(wù)器為dnspod提供的dns地址。只適用于域名解析服務(wù)沒有線路選擇皆怕，使用第三方域名解析服務(wù)的同學(xué)：
注意：更改不會(huì)立即生效愈腾，請(qǐng)耐心等待，附dnspod官網(wǎng)的域名解析教程：DNSPod的解析
當(dāng)然悦即，博客速度優(yōu)化的方法還有很多橱乱，這里不一一列舉泳叠。反正我就用了這兩種方法來優(yōu)化博客，感覺效果還可以宗挥。下面給出幾篇參考文章供大家閱讀：
