必讀前言
本文篇幅較長(zhǎng)，涉及的面較廣，通篇閱讀大概需要半個(gè)小時(shí)左右。建議時(shí)間緊迫的大佬們可以先收藏文章，之后閑時(shí)再細(xì)細(xì)閱讀，個(gè)人預(yù)覽DEMO，有關(guān)文中具體涉及到的工具大家可以關(guān)注公眾號(hào)《云爬蟲(chóng)技術(shù)研究筆記》回復(fù)關(guān)鍵詞“博客”獲取“一鍵圖床工具”和“無(wú)損壓縮工具”。
“個(gè)人博客”這一名詞從很早前就廣為人知了，對(duì)程序猿來(lái)說(shuō)，“個(gè)人博客”也可以算是程序員們的“私人樂(lè)園”，讓各位碼農(nóng)們可以在自己的私人博客里放飛自我。而搭建“個(gè)人博客”的方式也是五花八門(mén)，例如：
- 可以利用現(xiàn)成的博客社區(qū)，例如
CSDN、知乎等等； - 利用熟悉的語(yǔ)言，自己開(kāi)發(fā)前后端，再把項(xiàng)目部署到私人服務(wù)器上；
- 利用現(xiàn)成的博客構(gòu)建框架，結(jié)合第三方的平臺(tái)進(jìn)行部署，并借由第三方平臺(tái)維護(hù)；
當(dāng)然，每種方式都有自己的優(yōu)缺點(diǎn)：
- 博客社區(qū)有極大的讀者流量，并且做好了SEO優(yōu)化，提供了現(xiàn)成的寫(xiě)作工具和數(shù)據(jù)分析報(bào)告等等；但是缺點(diǎn)是不夠自由，像知乎專(zhuān)欄那樣千篇一律的樣式；像CSDN逼迫不登錄就不能瀏覽文章的惡心人的限制；像。。。好吧~~被這些網(wǎng)站的約束打敗了。。。
- 自己大包大攬，擁有極大的權(quán)限，想怎么改就怎么改，當(dāng)然~~只要你會(huì)。但是苦的是要服務(wù)器，要學(xué)前端框架，學(xué)后端框架，學(xué)。。。好吧，懶人黨表示拒絕！
- 利用現(xiàn)成的博客構(gòu)建框架，搭建個(gè)人博客的框架是一代又一代的更換，從最早的基于Php開(kāi)發(fā)的WordPress、到之后的基于Ruby開(kāi)發(fā)的Jekyll、再到近幾年憑借部署方便，編譯速度快等特性而迅速火起來(lái)的基于Node開(kāi)發(fā)的Hexo和基于Go開(kāi)發(fā)的Hugo，都是讓人很容易上手，并且可以結(jié)合國(guó)外的Github平臺(tái)以及國(guó)內(nèi)的碼云平臺(tái)進(jìn)行部署，熟練的話(huà)簡(jiǎn)直可以說(shuō)10分鐘就部署好自己的博客，真的是懶人黨、伸手黨的福音。當(dāng)然，缺點(diǎn)也是有的，沒(méi)自建博客那么高的自由度，沒(méi)博客社區(qū)那么好的優(yōu)化程度，但是轉(zhuǎn)念一想，結(jié)合還算可以的自由度再加上我們自己簡(jiǎn)單的優(yōu)化也還過(guò)得去。
好！看完以上的分析，我們就打算使用現(xiàn)成的博客框架來(lái)做，其實(shí)網(wǎng)上關(guān)于每個(gè)框架的教程都比較多，但是更多的是關(guān)于如何從0到1一步步搭建完博客的流程，而沒(méi)有介紹搭建完博客的后續(xù)，此處給各位點(diǎn)到即止的作者一個(gè)差評(píng)！來(lái)個(gè)疑問(wèn)多連！
- 搭建完博客就擺著嗎？
- 不做圖片、Js腳本加載優(yōu)化嗎？
- 不做SEO優(yōu)化嗎？
- 不介紹如何自定義開(kāi)發(fā)嗎？
- 怎么能更好的結(jié)合自己的公眾號(hào)？
嗯！對(duì)，相信很多人在搭建完博客之后也會(huì)有同樣的疑問(wèn)，那么這篇文章就給你滿(mǎn)意 的答案，我不會(huì)再重復(fù)那些搭建步驟，大家可以自行搜查教程哈，本文著重講解如何搭建博客生態(tài)，提升博客的逼格！再次提醒：
本文篇幅較長(zhǎng)，涉及的面較廣，通篇閱讀大概需要半個(gè)小時(shí)左右。建議時(shí)間緊迫的大佬們可以先收藏文章，之后閑時(shí)再細(xì)細(xì)閱讀。
Hexo博客生態(tài)搭建
話(huà)不所說(shuō)，我們現(xiàn)在就開(kāi)始從以下幾個(gè)點(diǎn)入手（PS：為什么要選擇Hexo呢？在如今Hugo以強(qiáng)勁性能稱(chēng)霸的時(shí)代環(huán)境之下，Hexo雖然性能差點(diǎn)，但是也是基于動(dòng)態(tài)語(yǔ)言Node開(kāi)發(fā)，相比于Jekyll還是有很大提升的，不過(guò)對(duì)我來(lái)說(shuō)，最主要還是Hexo的生態(tài)中各種組件和模板比較豐富，對(duì)我這種對(duì)UI要求嚴(yán)格的人來(lái)說(shuō)，Hexo是我不能拒絕的?。?，
- 模板選擇
- 模板定制化修改
- 網(wǎng)站SEO
- 代碼優(yōu)化
- 優(yōu)化網(wǎng)站加載速度
- Github+Coding國(guó)內(nèi)外雙線部署
- 自建CDN資源
- 網(wǎng)站預(yù)加載JS腳本
- 快捷圖床工具
1. 模板選擇
很多人會(huì)質(zhì)疑為什么模板選擇都要提？如果你們不注重這點(diǎn)那你們就錯(cuò)了，好的模板也是一個(gè)博客的門(mén)面，一個(gè)結(jié)構(gòu)清晰，對(duì)用戶(hù)友好的模板會(huì)讓讀者很快的找到你博客中的重點(diǎn)，也會(huì)促進(jìn)讀者的留存率，一個(gè)模塊豐富的模塊也更能表達(dá)你自己，向讀者展示你更多的才華。Github上面有很多模板，我們可以看一下：
我們直接搜索Hexo，并且按Star數(shù)量排序，就可以開(kāi)始尋找我們想要的模板了，當(dāng)然，為了更直觀的尋找模板，我們可以直接去Hexo的官網(wǎng)，可以直接查看各個(gè)模板的樣式圖。
PS：給各位伸手黨一個(gè)福利，我苦苦尋覓多時(shí)的符合我個(gè)人審美的模板hexo-theme-matery，也是由blinkfox大神開(kāi)發(fā)的，有完整的中文說(shuō)明，對(duì)新手來(lái)說(shuō)極其友好，下面提前欣賞一下大神的杰作吧。
我們照著文檔輕松的改成自己博客的樣子
2. 模板定制化修改
很多教程都是在這一步停止了，所以讀者都要自己去重新搜怎么定制模板，屬實(shí)麻煩。這里我對(duì)比了其他模板的定制化修改，總結(jié)了以下幾個(gè)必備的私人定制：
2.1 添加404頁(yè)面
原來(lái)的主題沒(méi)有404頁(yè)面，我們加一個(gè)。我們可以根據(jù)Hexo的語(yǔ)法新建個(gè)404的目錄：
hexo new page "404"
然后我們可以在source/404/下編輯index.md文件
---
title: 404
permalink: /404
type: "404"
layout: "404"
date: 2019-11-18 23:49:08
---
## 爆炸,頁(yè)面炸沒(méi)了！
這樣我們就完成了一個(gè)增加了404的功能，如果我們自己需要額外定制404的樣式，可以參考404模板之家，我也是剛剛知道竟然還有這種網(wǎng)站。
2.2 添加評(píng)論插件
由于這個(gè)主題自帶了gittalk、gitment、valine等評(píng)論插件，所以我們只需要配置好對(duì)應(yīng)插件參數(shù)就行了，這個(gè)博客用的是gittalk，配置大致如下：
最后呈現(xiàn)的效果是這樣的：
當(dāng)然也可以用其他評(píng)論插件，只需要配置對(duì)應(yīng)項(xiàng)就是了，不是自帶的可以照著網(wǎng)上的教程自己弄一個(gè)，類(lèi)似的文章有很多，可以搜索關(guān)鍵字就行了。
2.3 添加網(wǎng)易云音樂(lè)BGM
寫(xiě)文章的時(shí)候，想插入一段BGM怎么辦？
- 首先我們找到網(wǎng)易云在線平臺(tái)，任意找到一首歌點(diǎn)進(jìn)去播放，可以在地址欄拿到音樂(lè)
ID號(hào) - 然后通過(guò)下面網(wǎng)址：http://music.163.com/song/media/outer/url?id=XXXXXX.mp3，
XXXXXX就是歌曲ID號(hào)，每一首歌我們只需要換掉這個(gè)ID號(hào)就行了,就相當(dāng)于每一首的外鏈了 - 最后封面圖也可以按
F12去找頁(yè)面元素的鏈接，填到對(duì)應(yīng)的musics.jason文件中就可以，批量填入，聽(tīng)到好聽(tīng)的歌曲隨時(shí)更換隨時(shí)新增，很方便。
主要的修改就是這三部分，其他的可以各位大佬的特殊癖好去定制化修改了，其實(shí)Hexo的定制化各個(gè)模板也都是通用的，因此，大家直接搜索Hexo修改就行啦！
3. SEO優(yōu)化
過(guò)去的程序員寫(xiě)文章可能是為了讓自己做些技術(shù)積累，每隔一段時(shí)間可以總結(jié)自己的技術(shù)。不過(guò)如今自媒體發(fā)展迅速，我們?cè)诔恋砑夹g(shù)的同時(shí)當(dāng)然也需要讓更多人了解自己，在技術(shù)圈里出點(diǎn)小名氣~~，那如何能夠讓更多人知道自己呢？SEO就是一個(gè)需要了解的東西了，SEO也就是搜索引擎優(yōu)化，指通過(guò)站內(nèi)優(yōu)化比如網(wǎng)站結(jié)構(gòu)調(diào)整、網(wǎng)站內(nèi)容建設(shè)、網(wǎng)站代碼優(yōu)化等以及站外優(yōu)化，換句話(huà)說(shuō)相當(dāng)于網(wǎng)站推廣，網(wǎng)站推廣是一個(gè)比較煩人的事情，特別是對(duì)于專(zhuān)心搞技術(shù)的來(lái)說(shuō)，可能就不是很擅長(zhǎng)，所以下面教大家兩個(gè)比較簡(jiǎn)單的SEO技巧。
3.1 讓百度收錄你的站點(diǎn)
- 查看百度是否收錄你的站點(diǎn)
首先要做的就是讓各大搜索引擎收錄你的站點(diǎn)，我們?cè)趧偨ㄕ镜臅r(shí)候各個(gè)搜索引擎是沒(méi)有收錄我們網(wǎng)站的，在搜索引擎中輸入site:<域名>，如果如下圖所示就是說(shuō)明我們的網(wǎng)站并沒(méi)有被百度收錄。我們可以直接點(diǎn)擊下面的“網(wǎng)址提交”來(lái)提交我們的網(wǎng)站
- 主動(dòng)添加站點(diǎn)
登錄百度站長(zhǎng)搜索資源平臺(tái)：http://zhanzhang.baidu.com， 只要有百度旗下的賬號(hào)就可以登錄，登錄成功之后在站點(diǎn)管理中點(diǎn)擊添加網(wǎng)站然后輸入你的站點(diǎn)地址。
在填完網(wǎng)址選擇完網(wǎng)站的類(lèi)型之后需要驗(yàn)證網(wǎng)站的所有權(quán)，驗(yàn)證網(wǎng)站所有權(quán)的方式有三種：
- 文件驗(yàn)證。
- html標(biāo)簽驗(yàn)證
- CNAME解析驗(yàn)證（推薦使用）
推薦使用CNAME解析驗(yàn)證，因?yàn)樗詈?jiǎn)單，只需加一條解析就好
- 生成網(wǎng)站地圖
我們需要使用npm自動(dòng)生成網(wǎng)站的sitemap，然后將生成的sitemap提交到百度和其他搜索引擎
安裝sitemap插件
npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save
修改博客配置文件
在根目錄配置文件.yml中修改url為你的站點(diǎn)地址
執(zhí)行完hexo g命令之后就會(huì)在網(wǎng)站根目錄生成sitemap.xml文件和baidusitemap.xml文件，可以通過(guò)：https://cloudcrawler.club/baidusitemap.xml， 查看該文件是否生成，其中sitemap.xml文件是搜索引擎通用的文件，baidusitemap.xml是百度專(zhuān)用的sitemap文件。
為什么要生成網(wǎng)站地圖呢？主要的原因是網(wǎng)站地圖表示了你的博客網(wǎng)站的結(jié)構(gòu)，例如某一分類(lèi)下面哪些文章等等，也是方便百度爬蟲(chóng)去爬取你的時(shí)候盡可能覆蓋你想要被爬取的所有文章，便于他們收錄，不過(guò)我們下面會(huì)講我們將為百度主動(dòng)提交鏈接，這樣的話(huà)，網(wǎng)站地圖也顯得不是那么重要。
- 向百度提交鏈接
我們可以將我們之前那生成的sitemap文件提交給百度，還是在百度站長(zhǎng)平臺(tái)，找到鏈接提交，這里我們可以看到有兩種提交方式，自動(dòng)提交和手動(dòng)提交，自動(dòng)提交又分為主動(dòng)推送、自動(dòng)推送和sitemap。
如何選擇鏈接提交方式呢？
1. 主動(dòng)推送：最為快速的提交方式，推薦您將站點(diǎn)當(dāng)天新產(chǎn)出鏈接立即通過(guò)此方式推送給百度，以保證新鏈接可以及時(shí)被百度收錄。
2. 自動(dòng)推送：最為便捷的提交方式，請(qǐng)將自動(dòng)推送的`JS`代碼部署在站點(diǎn)的每一個(gè)頁(yè)面源代碼中，部署代碼的頁(yè)面在每次被瀏覽時(shí)，鏈接會(huì)被自動(dòng)推送給百度?？梢耘c主動(dòng)推送配合使用。
3. `sitemap`：您可以定期將網(wǎng)站鏈接放到`sitemap`中，然后將`sitemap`提交給百度。百度會(huì)周期性的抓取檢查您提交的`sitemap`，對(duì)其中的鏈接進(jìn)行處理，但收錄速度慢于主動(dòng)推送。
4. 手動(dòng)提交：一次性提交鏈接給百度，可以使用此種方式。
一般主動(dòng)提交比手動(dòng)提交效果好，這里介紹主動(dòng)提交的三種方法
從效率上來(lái)說(shuō)：
主動(dòng)推送>自動(dòng)推送>sitemap
我們下面將會(huì)具體操作主動(dòng)推送
- 設(shè)置主動(dòng)推送
安裝插件hexo-baidu-url-submit
npm install hexo-baidu-url-submit --save
然后再根目錄的配置文件中新增字段
baidu_url_submit:
count: 80 # 提交最新的一個(gè)鏈接
host: www.sunhwee.com # 在百度站長(zhǎng)平臺(tái)中注冊(cè)的域名
token: xxxxxxxxxxxxxx # 請(qǐng)注意這是您的秘鑰， 所以請(qǐng)不要把博客源代碼發(fā)布在公眾倉(cāng)庫(kù)里!
path: baidu_urls.txt # 文本文檔的地址， 新鏈接會(huì)保存在此文本文檔里
再加入新的deploy：
deploy:
- type: baidu_url_submitter
密鑰的獲取位置在網(wǎng)頁(yè)抓取中的鏈接提交這一塊,如下所示:
這樣執(zhí)行
hexo deploy的時(shí)候，新的鏈接就會(huì)被推送了。
推送成功時(shí),會(huì)有如下終端提示
success為1表示成功推送的url條數(shù)，remain表示當(dāng)日還可以推送9995條
各種不同的推送反饋?zhàn)侄握f(shuō)明在這里查看,一般來(lái)說(shuō),推送失敗基本都是地址不相符造成的,我們只需對(duì)比
baidu_url_submit在public中生成的baidu_urls.txt的地址,與自己填寫(xiě)在host字段中的地址對(duì)比看是否一樣即可。
3.2 其他搜索引擎優(yōu)化
其他的搜索引擎類(lèi)似于Google、搜狗、360搜索等等，不過(guò)一般還會(huì)Baidu和Google對(duì)于大多數(shù)程序員來(lái)說(shuō)使用頻率較高，因此，只需要做這兩個(gè)搜索引擎的收錄就行了。
3.3 優(yōu)化你的url
seo搜索引擎優(yōu)化認(rèn)為，網(wǎng)站的最佳結(jié)構(gòu)是用戶(hù)從首頁(yè)點(diǎn)擊三次就可以到達(dá)任何一個(gè)頁(yè)面，但是我們使用hexo編譯的站點(diǎn)打開(kāi)文章的url是：sitename/year/mounth/day/title四層的結(jié)構(gòu)，這樣的url結(jié)構(gòu)很不利于seo，爬蟲(chóng)就會(huì)經(jīng)常爬不到我們的文章，于是，我們需要優(yōu)化一下網(wǎng)站文章url。
方案一：
我們可以將url直接改成sitename/title的形式，并且title最好是用英文，在根目錄的配置文件下修改permalink如下：
url: https://cloudcrawler.club
root: /
permalink: :title.html
permalink_defaults:
方案二：
使用插件優(yōu)化url
插件hexo-abbrlink實(shí)現(xiàn)了這個(gè)功能，它將原來(lái)的URL地址重新進(jìn)行了進(jìn)制轉(zhuǎn)換和再編碼。
安裝hexo-abbrlink。
npm install hexo-abbrlink --save
配置博客根目錄下的_config.yml文件。
permalink: :title/
permalink: archives/:abbrlink.html
abbrlink:
alg: crc32 # 算法：crc16(default) and crc32
rep: hex # 進(jìn)制：dec(default) and hex
運(yùn)行hexo clean和hexo g命令來(lái)重新生成文件看看，可以清楚的看到，URL結(jié)構(gòu)成功變?yōu)榱?層。
3.4 其他seo優(yōu)化
seo優(yōu)化應(yīng)該說(shuō)是一個(gè)收益延遲的行為，可能你做的優(yōu)化短期內(nèi)看不到什么效果，但是一定要堅(jiān)持，seo優(yōu)化也是有很深的可以研究的東西，從我們最初的網(wǎng)站設(shè)計(jì)，和最基礎(chǔ)的標(biāo)簽的選擇都有很大的關(guān)系，網(wǎng)站設(shè)計(jì)就如我們剛剛說(shuō)的，要讓用戶(hù)點(diǎn)擊三次可以到達(dá)網(wǎng)站的任何一個(gè)頁(yè)面，要增加高質(zhì)量的外鏈，增加相關(guān)推薦（比如說(shuō)我們經(jīng)常見(jiàn)到右側(cè)本站的最高閱讀的排名列表），然后就是給每一個(gè)頁(yè)面加上keyword和描述
在代碼中，我們應(yīng)該寫(xiě)出能讓瀏覽器識(shí)別的語(yǔ)義化HTML，這樣有助于爬蟲(chóng)抓取更多的有效信息：爬蟲(chóng)依賴(lài)于標(biāo)簽來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重；并且對(duì)外鏈設(shè)置nofollow標(biāo)簽，避免spider爬著爬著就爬出去了（減少網(wǎng)站的跳出率），并且我們要盡量在一些比較大的網(wǎng)站增加我們站點(diǎn)的曝光率，因?yàn)?code>spider會(huì)經(jīng)常訪問(wèn)大站，比如我們?cè)诰蚪鸬燃夹g(shù)社區(qū)發(fā)表文章中帶有我們的站點(diǎn)，這樣spider是很有可能爬到我們中的站點(diǎn)的，so….
- 網(wǎng)站外鏈的推廣度、數(shù)量和質(zhì)量
- 網(wǎng)站的內(nèi)鏈足夠強(qiáng)大
- 網(wǎng)站的原創(chuàng)質(zhì)量
- 網(wǎng)站的年齡時(shí)間
- 網(wǎng)站的更新頻率（更新次數(shù)越多越好）
- 網(wǎng)站的服務(wù)器
- 網(wǎng)站的流量：流量越高網(wǎng)站的權(quán)重越高
- 網(wǎng)站的關(guān)鍵詞排名：關(guān)鍵詞排名越靠前，網(wǎng)站的權(quán)重越高
- 網(wǎng)站的收錄數(shù)量：網(wǎng)站百度收錄數(shù)量越多，網(wǎng)站百度權(quán)重越高
- 網(wǎng)站的瀏覽量及深度：用戶(hù)體驗(yàn)越好，網(wǎng)站的百度權(quán)重越高
4. 代碼優(yōu)化
代碼優(yōu)化主要是想要讓我們的代碼塊顯示行號(hào)和整體復(fù)制，這兩點(diǎn)對(duì)于讀者在瀏覽文章以及復(fù)制代碼的時(shí)候都是很關(guān)鍵的兩點(diǎn)，所以我們也要進(jìn)行優(yōu)化，由于代碼高亮插件prism_plugin的樣式?jīng)]有行號(hào)顯示和代碼塊整體復(fù)制功能，不是很方便，為了優(yōu)化觀感和易用性，我們可以對(duì)其進(jìn)行修改：
4.1 給代碼塊開(kāi)啟行號(hào)
我們?cè)谂渲梦募?code>.yml中找到prism_plugin配置項(xiàng)line_number: false（# default false）改為true，開(kāi)啟行號(hào)，但是在我們這個(gè)matery主題中中是無(wú)效的，有bug需要改一下matery.css樣式參數(shù),在第115行位置將：
pre {
padding: 1.5rem !important;
margin: 1rem 0 !important;
background: #272822;
overflow: auto;
border-radius: 0.35rem;
tab-size: 4;
}
改為
pre {
padding: 1.5rem 1.5rem 1.5rem 3.3rem !important;
margin: 1rem 0 !important;
background: #272822;
overflow: auto;
border-radius: 0.35rem;
tab-size: 4;
}
注釋掉緊接著的code代碼塊里面的font-size項(xiàng)，如下：
code {
padding: 1px 5px;
font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace;
/*font-size: 0.91rem;*/
color: #e96900;
background-color: #f8f8f8;
border-radius: 2px;
}
好了這下可以顯示行號(hào)了，如圖：
關(guān)于代碼整體復(fù)制的功能在目前在插件中已經(jīng)集成。
5. 優(yōu)化網(wǎng)站加載速度
5.1 優(yōu)化圖片加載
優(yōu)化網(wǎng)站圖片加載的速度的通用方法大概就是兩種：
第一種就是就是使用圖片懶加載，Hexo的插件中已經(jīng)有實(shí)現(xiàn)該功能的插件了--也就是hexo-lazyload-image，hexo-lazyload-image的作用原理是講你博客里面img標(biāo)簽的src屬性替換為一個(gè)loading image，把真實(shí)的圖片地址放在data-origin屬性下面。然后當(dāng)你的網(wǎng)頁(yè)翻到那張圖片時(shí)（也就是圖片在窗口中完全可見(jiàn)時(shí)），他會(huì)有一段js用data-origin的內(nèi)容替換src，打到懶加載的目的。
具體的使用方法是在博客根目錄配置.yml文件加入對(duì)應(yīng)字段，如下：
lazyload:
enable: true
onlypost: false
loadingImg: /images/loading.gif
好了，這樣實(shí)現(xiàn)了博客網(wǎng)站的圖片懶加載。效果大致類(lèi)似于這樣
第二種就是就是把本地的圖片進(jìn)行無(wú)損壓縮，這里給大家推薦一款工具Imagine，這是一款用于壓縮 PNG 和 JPEG 的桌面應(yīng)用程序，具有現(xiàn)代友好的 UI。
我們可以看到，我們把圖片壓縮了將近10倍，清晰度方面幾乎是一樣的，所以這種方式也能幫助我們做圖片加載優(yōu)化。
5.2 Gulp實(shí)現(xiàn)代碼壓縮
這里我們介紹一個(gè)工具，Gulp它是復(fù)制前端框架控制流的構(gòu)建工具，作為流程工具，它集成了很多使用的功能，我們這里就使用它來(lái)做代碼壓縮，以提升網(wǎng)頁(yè)加載速度。
- 首先我們需要安裝Gulp插件和5個(gè)功能模塊，依次運(yùn)行下面的兩條命令。
npm install gulp --save #安裝gulp
# 安裝功能模塊
npm install gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify gulp-imagemin --save
# 額外的功能模塊
npm install gulp-debug gulp-clean-css gulp-changed gulp-if gulp-plumber gulp-babel babel-preset-es2015 del --save
- 接下來(lái)在博客的根目錄下新建gulpfile.js文件，并復(fù)制下面的內(nèi)容到文件中。
var gulp = require("gulp");
var debug = require("gulp-debug");
var cleancss = require("gulp-clean-css"); //css壓縮組件
var uglify = require("gulp-uglify"); //js壓縮組件
var htmlmin = require("gulp-htmlmin"); //html壓縮組件
var htmlclean = require("gulp-htmlclean"); //html清理組件
var imagemin = require("gulp-imagemin"); //圖片壓縮組件
var changed = require("gulp-changed"); //文件更改校驗(yàn)組件
var gulpif = require("gulp-if"); //任務(wù) 幫助調(diào)用組件
var plumber = require("gulp-plumber"); //容錯(cuò)組件（發(fā)生錯(cuò)誤不跳出任務(wù)，并報(bào)出錯(cuò)誤內(nèi)容）
var isScriptAll = true; //是否處理所有文件，(true|處理所有文件)(false|只處理有更改的文件)
var isDebug = true; //是否調(diào)試顯示 編譯通過(guò)的文件
var gulpBabel = require("gulp-babel");
var es2015Preset = require("babel-preset-es2015");
var del = require("del");
var Hexo = require("hexo");
var hexo = new Hexo(process.cwd(), {}); // 初始化一個(gè)hexo對(duì)象
// 清除public文件夾
gulp.task("clean", function() {
return del(["public/**/*"]);
});
// 下面幾個(gè)跟hexo有關(guān)的操作，主要通過(guò)hexo.call()去執(zhí)行，注意return
// 創(chuàng)建靜態(tài)頁(yè)面 （等同 hexo generate）
gulp.task("generate", function() {
return hexo.init().then(function() {
return hexo
.call("generate", {
watch: false
})
.then(function() {
return hexo.exit();
})
.catch(function(err) {
return hexo.exit(err);
});
});
});
// 啟動(dòng)Hexo服務(wù)器
gulp.task("server", function() {
return hexo
.init()
.then(function() {
return hexo.call("server", {});
})
.catch(function(err) {
console.log(err);
});
});
// 部署到服務(wù)器
gulp.task("deploy", function() {
return hexo.init().then(function() {
return hexo
.call("deploy", {
watch: false
})
.then(function() {
return hexo.exit();
})
.catch(function(err) {
return hexo.exit(err);
});
});
});
// 壓縮public目錄下的js文件
gulp.task("compressJs", function() {
return gulp
.src(["./public/**/*.js", "!./public/libs/**"]) //排除的js
.pipe(gulpif(!isScriptAll, changed("./public")))
.pipe(gulpif(isDebug, debug({ title: "Compress JS:" })))
.pipe(plumber())
.pipe(
gulpBabel({
presets: [es2015Preset] // es5檢查機(jī)制
})
)
.pipe(uglify()) //調(diào)用壓縮組件方法uglify(),對(duì)合并的文件進(jìn)行壓縮
.pipe(gulp.dest("./public")); //輸出到目標(biāo)目錄
});
// 壓縮public目錄下的css文件
gulp.task("compressCss", function() {
var option = {
rebase: false,
//advanced: true, //類(lèi)型：Boolean 默認(rèn)：true [是否開(kāi)啟高級(jí)優(yōu)化（合并選擇器等）]
compatibility: "ie7" //保留ie7及以下兼容寫(xiě)法 類(lèi)型：String 默認(rèn)：''or'*' [啟用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
//keepBreaks: true, //類(lèi)型：Boolean 默認(rèn)：false [是否保留換行]
//keepSpecialComments: '*' //保留所有特殊前綴 當(dāng)你用autoprefixer生成的瀏覽器前綴，如果不加這個(gè)參數(shù)，有可能將會(huì)刪除你的部分前綴
};
return gulp
.src(["./public/**/*.css", "!./public/**/*.min.css"]) //排除的css
.pipe(gulpif(!isScriptAll, changed("./public")))
.pipe(gulpif(isDebug, debug({ title: "Compress CSS:" })))
.pipe(plumber())
.pipe(cleancss(option))
.pipe(gulp.dest("./public"));
});
// 壓縮public目錄下的html文件
gulp.task("compressHtml", function() {
var cleanOptions = {
protect: /<\!--%fooTemplate\b.*?%-->/g, //忽略處理
unprotect: /<script [^>]*\btype="text\/x-handlebars-template"[\s\S]+?<\/script>/gi //特殊處理
};
var minOption = {
collapseWhitespace: true, //壓縮HTML
collapseBooleanAttributes: true, //省略布爾屬性的值 <input checked="true"/> ==> <input />
removeEmptyAttributes: true, //刪除所有空格作屬性值 <input id="" /> ==> <input />
removeScriptTypeAttributes: true, //刪除<script>的type="text/javascript"
removeStyleLinkTypeAttributes: true, //刪除<style>和<link>的type="text/css"
removeComments: true, //清除HTML注釋
minifyJS: true, //壓縮頁(yè)面JS
minifyCSS: true, //壓縮頁(yè)面CSS
minifyURLs: true //替換頁(yè)面URL
};
return gulp
.src("./public/**/*.html")
.pipe(gulpif(isDebug, debug({ title: "Compress HTML:" })))
.pipe(plumber())
.pipe(htmlclean(cleanOptions))
.pipe(htmlmin(minOption))
.pipe(gulp.dest("./public"));
});
// 壓縮 public/uploads 目錄內(nèi)圖片
gulp.task("compressImage", function() {
var option = {
optimizationLevel: 5, //類(lèi)型：Number 默認(rèn)：3 取值范圍：0-7（優(yōu)化等級(jí)）
progressive: true, //類(lèi)型：Boolean 默認(rèn)：false 無(wú)損壓縮jpg圖片
interlaced: false, //類(lèi)型：Boolean 默認(rèn)：false 隔行掃描gif進(jìn)行渲染
multipass: false //類(lèi)型：Boolean 默認(rèn)：false 多次優(yōu)化svg直到完全優(yōu)化
};
return gulp
.src("./public/medias/**/*.*")
.pipe(gulpif(!isScriptAll, changed("./public/medias")))
.pipe(gulpif(isDebug, debug({ title: "Compress Images:" })))
.pipe(plumber())
.pipe(imagemin(option))
.pipe(gulp.dest("./public"));
});
// 執(zhí)行順序： 清除public目錄 -> 產(chǎn)生原始博客內(nèi)容 -> 執(zhí)行壓縮混淆 -> 部署到服務(wù)器
gulp.task(
"build",
gulp.series(
"clean",
"generate",
"compressHtml",
"compressCss",
"compressJs",
"compressImage",
gulp.parallel("deploy")
)
);
// 默認(rèn)任務(wù)
gulp.task(
"default",
gulp.series(
"clean",
"generate",
gulp.parallel("compressHtml", "compressCss", "compressImage", "compressJs")
)
);
//Gulp4最大的一個(gè)改變就是gulp.task函數(shù)現(xiàn)在只支持兩個(gè)參數(shù)，分別是任務(wù)名和運(yùn)行任務(wù)的函數(shù)
- 最后 hexo clean && hexo g && gulp && hexo d 就可以了。
6. Github+Coding國(guó)內(nèi)外雙線部署
如大家所知，很多人不愿把博客部署到Github上面去，原因就是Github服務(wù)器在海外，對(duì)于我們?cè)L問(wèn)速度是有瓶頸的，所以一些人會(huì)把網(wǎng)站部署在國(guó)內(nèi)的代碼托管網(wǎng)站，比如Coding和Gitee，我們這次選的是Coding來(lái)做國(guó)內(nèi)的部署，雖然它今年以來(lái)慘劇不斷，但是相信它會(huì)變好的。
具體的部署和Github類(lèi)似，Coding現(xiàn)在被騰訊收購(gòu)了，所以我們注冊(cè)賬號(hào)會(huì)跳轉(zhuǎn)到騰訊云開(kāi)發(fā)者平臺(tái)，我們創(chuàng)建好項(xiàng)目之后，在Hexo根目錄的配置文件中添加Coding的部署地址，如圖：
添加完成后先執(zhí)行命令 hexo clean 清理一下緩存，然后執(zhí)行命令 hexo g -d 將博客雙線部署到 Coding Pages 和 GitHub Pages，如下圖所示表示部署成功：
接著我們開(kāi)啟CodingPage（PS: 真的是完全模仿GithubPage）
這是我們就已經(jīng)在Github和Coding雙線部署好了我們的服務(wù)，我們用數(shù)據(jù)來(lái)看一下是否Coding在國(guó)內(nèi)真的快于Github。
結(jié)果很明顯，Coding在國(guó)內(nèi)真的很好用。
接下來(lái)我們利用阿里云的智能解析來(lái)做智能路由
這樣，我們的網(wǎng)站就實(shí)現(xiàn)了國(guó)內(nèi)國(guó)外雙線智能路由。
7. 自建CDN資源
介紹一款軟件jsdelivr可以幫助我們做免費(fèi)的CDN，它也有國(guó)內(nèi)的服務(wù)器，因此我們無(wú)論在國(guó)外國(guó)內(nèi)都可以使用。
8. 網(wǎng)站預(yù)加載JS腳本
推薦一個(gè)軟件instant.page，作用是可以預(yù)加載用戶(hù)想訪問(wèn)的頁(yè)面，當(dāng)用戶(hù)真正點(diǎn)擊鏈接后，就會(huì)直接從緩存中讀取，以此提升網(wǎng)站的訪問(wèn)速度。
instant.page 原理的話(huà)我們不必深層了解，只需知道：
在用戶(hù)點(diǎn)擊網(wǎng)站鏈接之前，他們將鼠標(biāo)懸停在該鏈接上。當(dāng)用戶(hù)徘徊 65 毫秒時(shí)，他們將點(diǎn)擊該鏈接有兩個(gè)機(jī)會(huì)，因此 instant.page 此時(shí)開(kāi)始預(yù)加載，平均超過(guò) 300 毫秒，以便頁(yè)面預(yù)加載。
instant.page 是漸進(jìn)式增強(qiáng) - 對(duì)不支持它的瀏覽器沒(méi)有影響。
9. 快捷圖床工具
推薦一款圖床工具PicGo，大家可以把這個(gè)工具結(jié)合Github來(lái)使用，把Github作為圖床或者是使用其他第三方網(wǎng)站，目前PicGo可以支持多個(gè)網(wǎng)站。
總結(jié)
有關(guān)Hexo博客生態(tài)介紹大致就是如上這些，希望大家都能夠用的自己的博客上面，不僅僅是把博客當(dāng)成一個(gè)記錄自己成長(zhǎng)的工具，更是把它做成一個(gè)展示自己的產(chǎn)品，能夠好好的運(yùn)營(yíng)它。
目前這個(gè)階段大致介紹的幾點(diǎn)建議如上所示，之后會(huì)陸續(xù)總結(jié)出新的博客生態(tài)的功能推薦和優(yōu)化建議。
號(hào)主介紹
多年反爬蟲(chóng)破解經(jīng)驗(yàn)，AKA“逆向小學(xué)生”，沉迷數(shù)據(jù)分析和黑客增長(zhǎng)不能自拔，虛名有CSDN博客專(zhuān)家和華為云享專(zhuān)家。
私藏資料
嘔心瀝血從浩瀚的資料中整理了獨(dú)家的“私藏資料”，公眾號(hào)內(nèi)回復(fù)“私藏資料”即可領(lǐng)取爬蟲(chóng)高級(jí)逆向教學(xué)視頻以及多平臺(tái)的中文數(shù)據(jù)集小學(xué)生都推薦的好文
Python2壽命只剩一個(gè)月啦！還不快趕緊學(xué)起Python3酷炫到爆的新特性！搜狗微信下線了怎么獲取公眾號(hào)文章？最新方式手把手教你萬(wàn)物皆可Hook！重新?lián)炱餒ook神器-Xposed框架下一代容器架構(gòu)已出，Docker何去何處？看看這里的6問(wèn)6答?。?/a>
由一個(gè)簡(jiǎn)單的Python合并字典問(wèn)題引發(fā)的思考，如何優(yōu)化我們的代碼？
