HEXO博客--性能優(yōu)化

相信你通過(guò)前面兩篇文章的了解，已經(jīng)可以搭建屬于自己的博客小屋了。在這個(gè)時(shí)代，顏值確實(shí)比較重要，但是我們不僅要有顏值，更要有內(nèi)涵。天下功夫，唯快不破！這里給大家介紹一些博客速度優(yōu)化的方法，通過(guò)這些可以使網(wǎng)站的性能有很大提升，給讀者同時(shí)給自己帶來(lái)更好的使用體驗(yàn)。

01STEPSgulp壓縮

????????如果你打開(kāi)生成的public文件夾里面的html、css、js源文件，你就會(huì)發(fā)現(xiàn)里面有大段的空白，這些空白占據(jù)著一定的空間。gulp是一個(gè)基于Node.js的自動(dòng)化構(gòu)建工具，我們可以通過(guò)一些gulp插件實(shí)現(xiàn)對(duì)html、css、js、image等靜態(tài)資源的高效壓縮，通過(guò)壓縮這些靜態(tài)資源，可以減少請(qǐng)求的數(shù)據(jù)量從而達(dá)到優(yōu)化博客訪問(wèn)速度的目的。

1安裝依賴

首先安裝gulp，執(zhí)行以下命令：

npm?insatll?gulp?-

要實(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",


02添加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'
]);03執(zhí)行壓縮

hexo?g
gulp??//?執(zhí)行壓縮，兩條命令可以合并：hexo?g?&&?gulp

然后就可以執(zhí)行部署命令：

hexo?d


過(guò)程中可能會(huì)發(fā)現(xiàn)壓縮css文件使用的模塊為gulp-clean-css，甚至我們?cè)诎惭bgulp-clean-css時(shí)，npm也會(huì)提醒我們使用gulp-clean-css。當(dāng)時(shí)我想系統(tǒng)提示的總沒(méi)事，然后我就卸載gulp-clean-css，安裝了gulp-clean-css，然后當(dāng)我壓縮后測(cè)試時(shí)發(fā)現(xiàn)我的博客上的所有圖標(biāo)，比如：首頁(yè)、分類、標(biāo)簽等全都沒(méi)了，只剩下一個(gè)方塊。這個(gè)問(wèn)題讓我折騰了很久，最后很生氣，重新裝了剛開(kāi)始的模塊，壓縮后測(cè)試果然圖標(biāo)恢復(fù)。說(shuō)實(shí)話，具體原因我也不知道，畢竟學(xué)藝不精，只是希望如果你們也遇到這種情況也按照我的方法試一下，也許就成功了呢！

添加gulpfile.js文件時(shí)，我是直接復(fù)制網(wǎng)上的到我的gulpfile.js文件里面，但是執(zhí)行的時(shí)候總會(huì)出現(xiàn)錯(cuò)誤，提示不能壓縮javascript：

1方法一：

排除后綴名為min.js的文件。我把壓縮js文件的單獨(dú)列出來(lái)，供大家參考：

//?壓縮public目錄下的所有js??
gulp.task('minify-js',?function()?{
????return?gulp.src(['./public/**/.js','!./public/js/**/*min.js'])
????????.pipe(uglify())
????????.pipe(gulp.dest('./public'));
});???????????????//注意：一個(gè)字符都不能錯(cuò)


2方法二：

只壓縮以.js結(jié)尾的文件，不壓縮..min.js結(jié)尾的文件。我把里面的文件夾都打開(kāi)看了一遍，發(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'));
});


除此之外，參考文章三所說(shuō)的谷歌字體庫(kù)更換為360字體庫(kù)不建議使用，因?yàn)樵撟煮w庫(kù)網(wǎng)址已經(jīng)無(wú)法訪問(wèn)。

02STEPSCoding部署

我們都知道Github的服務(wù)器在國(guó)外，因?yàn)槟承┰?，訪問(wèn)速度一直不穩(wěn)定。除此之外Github還屏蔽了百度spider，這會(huì)造成百度根本爬取不到你的網(wǎng)頁(yè)，所以百度的索引量會(huì)很低。Coding算是國(guó)內(nèi)的Github，同樣提供代碼托管、項(xiàng)目管理和Pages服務(wù)等，因此我們可以像把網(wǎng)站部署在Github上一樣，部署在Coding 上，通過(guò)配置_config.yml文件實(shí)現(xiàn)Github和Coding上的文件同時(shí)更新，然后通過(guò)域名分流解析，來(lái)達(dá)到網(wǎng)站加速的目的。

01創(chuàng)建項(xiàng)目

注冊(cè)賬號(hào)就不說(shuō)了，同Github上一樣新建一個(gè)項(xiàng)目：

02部署公鑰

項(xiàng)目創(chuàng)建完成后，點(diǎn)擊項(xiàng)目，在其設(shè)置里面，選擇部署公鑰。我們?cè)贕ithub上部署的時(shí)候已經(jīng)生成過(guò)公鑰，直接復(fù)制其內(nèi)容到里面即可，名字自定。如下圖：

如圖中所說(shuō)，此公鑰只針對(duì)本項(xiàng)目，不能跟個(gè)人公鑰通用。

如果沒(méi)在Github上獲取過(guò)公鑰，請(qǐng)參考這篇教程：Hexo與Github搭建個(gè)人博客

測(cè)試一下公鑰：

ssh-Tgit@git.coding.net

同Github上一樣，可能會(huì)有警告，如果有警告輸入yes回車即可。

03部署項(xiàng)目

獲取項(xiàng)目倉(cāng)庫(kù)的地址，選擇以SSH方式訪問(wèn)倉(cāng)庫(kù)，復(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?d04開(kāi)啟Pages服務(wù)

開(kāi)啟項(xiàng)目Pages服務(wù)，分支選擇master分支即可：

Pages服務(wù)開(kāi)啟后，即可通過(guò)給定的域名訪問(wèn)博客。同樣可以在自定義域名選項(xiàng)中添加自己的域名，如圖中所示：

05域名分流解析

到這里，我們首先要知道我們的域名同時(shí)綁定在Github和Coding上的博客上，接下來(lái)設(shè)置域名分流解析。所謂分流解析，指的就是通過(guò)設(shè)置域名解析通道，使國(guó)內(nèi)用戶訪問(wèn)位于Coding上的博客，國(guó)外用戶訪問(wèn)位于Github上的博客。通過(guò)設(shè)置域名分流解析，使得國(guó)內(nèi)用戶訪問(wèn)博客的速度大大提升。

設(shè)置域名分流解析，有很多平臺(tái)：DNSPod、 騰訊云解析 、阿里云解析 等。因?yàn)槲业挠蛎皇窃谥髁饔蛎峁┥棠抢镔I的，雖然域名提供商也提供域名解析服務(wù)，但是所能選擇的解析線路往往比較少。當(dāng)然，如果你的域名解析可以有線路選擇，就直接在里面配置就行，操作都一樣，只是操作界面有細(xì)微的區(qū)別。之前在Github上搭建博客的時(shí)候已經(jīng)說(shuō)過(guò)怎么設(shè)置域名解析，如果不會(huì)，參見(jiàn)文章：Hexo與Github搭建個(gè)人博客

06修改域名解析

修改之前綁定Github的域名解析，線路類型修改為國(guó)外，新建綁定到Coding的解析，線路類型為默認(rèn)，記錄值為pages.coding.me：

07修改NS服務(wù)器

到域名提供商那里修改NS服務(wù)器為dnspod提供的dns地址。只適用于域名解析服務(wù)沒(méi)有線路選擇，使用第三方域名解析服務(wù)的同學(xué)：

注意：更改不會(huì)立即生效，請(qǐng)耐心等待，附dnspod官網(wǎng)的域名解析教程：DNSPod的解析

當(dāng)然，博客速度優(yōu)化的方法還有很多，這里不一一列舉。反正我就用了這兩種方法來(lái)優(yōu)化博客，感覺(jué)效果還可以。

最后，歡迎大家關(guān)注我的公眾號(hào)~

- 掃碼關(guān)注我們 -米琪giaogiao屋與您共度五一