2019年末，來一發基於Hexo自建部落格生態指南！

2019 年 11 月 26 日
筆記

作者： Lateautumn4lin 來源：雲爬蟲技術研究筆記

本文篇幅較長，涉及的面較廣，通篇閱讀大概需要半個小時左右。建議時間緊迫的大佬們可以先收藏文章，之後閑時再細細閱讀，個人預覽DEMO，有關文中具體涉及到的工具大家可以關注公眾號《雲爬蟲技術研究筆記》回復關鍵詞「部落格」獲取「一鍵圖床工具」和「無損壓縮工具」，可以查看原文獲取更好的閱讀體驗。必讀前言

「個人部落格」這一名詞從很早前就廣為人知了，對程式猿來說，「個人部落格」也可以算是程式設計師們的「私人樂園」，讓各位碼農們可以在自己的私人部落格里放飛自我。而搭建「個人部落格」的方式也是五花八門，例如：

部落格搭建方式

1. 可以利用現成的部落格社區，例如CSDN、知乎等等；

2. 利用熟悉的語言，自己開發前後端，再把項目部署到私人伺服器上；

3. 利用現成的部落格構建框架，結合第三方的平台進行部署，並藉由第三方平台維護；

當然，每種方式都有自己的優缺點：

第三方部落格社區的優缺點

部落格社區有極大的讀者流量，並且做好了SEO優化，提供了現成的寫作工具和數據分析報告等等；但是缺點是不夠自由，像知乎專欄那樣千篇一律的樣式；像CSDN逼迫不登錄就不能瀏覽文章的噁心人的限制；像。。。好吧~~被這些網站的約束打敗了。。。

自建伺服器全棧開發部落格

自己大包大攬，擁有極大的許可權，想怎麼改就怎麼改，當然~~只要你會。但是苦的是要伺服器，要學前端框架，學後端框架，學。。。好吧，懶人黨表示拒絕！

最後是利用現成的部落格構建框架，搭建個人部落格的框架是一代又一代的更換，從最早的基於Php開發的WordPress、到之後的基於Ruby開發的Jekyll、再到近幾年憑藉部署方便，編譯速度快等特性而迅速火起來的基於Node開發的Hexo和基於Go開發的Hugo，都是讓人很容易上手，並且可以結合國外的Github平台以及中國的碼雲平台進行部署，熟練的話簡直可以說10分鐘就部署好自己的部落格，真的是懶人黨、伸手黨的福音。當然，缺點也是有的，沒自建部落格那麼高的自由度，沒部落格社區那麼好的優化程度，但是轉念一想，結合還算可以的自由度再加上我們自己簡單的優化也還過得去。

好！看完以上的分析，我們就打算使用現成的部落格框架來做，其實網上關於每個框架的教程都比較多，但是更多的是關於如何從0到1一步步搭建完部落格的流程，而沒有介紹搭建完部落格的後續，此處給各位點到即止的作者一個差評！來個疑問多連！

壹伴編輯器

搭建完部落格就擺著嗎？

不做圖片、Js腳本載入優化嗎？

不做SEO優化嗎？

不介紹如何自定義開發嗎？

嗯！對，相信很多人在搭建完部落格之後也會有同樣的疑問，那麼這篇文章就給你滿意的答案，我不會再重複那些搭建步驟，大家可以自行搜查教程哈，本文著重講解如何搭建部落格生態，提升部落格的逼格！再次提醒：

本文篇幅較長，涉及的面較廣，通篇閱讀大概需要半個小時左右。建議時間緊迫的大佬們可以先收藏文章，之後閑時再細細閱讀。

Hexo部落格生態搭建

話不所說，我們現在就開始從以下幾個點入手（PS：為什麼要選擇Hexo呢？在如今Hugo以強勁性能稱霸的時代環境之下，Hexo雖然性能差點，但是也是基於動態語言Node開發，相比於Jekyll還是有很大提升的，不過對我來說，最主要還是Hexo的生態中各種組件和模板比較豐富，對我這種對UI要求嚴格的人來說，Hexo是我不能拒絕的！）

模板選擇
模板訂製化修改
網站SEO
程式碼優化
優化網站載入速度
Github+Coding中國外雙線部署
自建CDN資源
網站預載入JS腳本
快捷圖床工具

1. 模板選擇

很多人會質疑為什麼模板選擇都要提？如果你們不注重這點那你們就錯了，好的模板也是一個部落格的門面，一個結構清晰，對用戶友好的模板會讓讀者很快的找到你部落格中的重點，也會促進讀者的留存率，一個模組豐富的模組也更能表達你自己，向讀者展示你更多的才華。Github上面有很多模板，我們可以看一下：

我們直接搜索Hexo，並且按Star數量排序，就可以開始尋找我們想要的模板了，當然，為了更直觀的尋找模板，我們可以直接去Hexo的官網，可以直接查看各個模板的樣式圖。

PS：給各位伸手黨一個福利，我苦苦尋覓多時的符合我個人審美的模板hexo-theme-matery，也是由blinkfox大神開發的，有完整的中文說明，對新手來說極其友好，下面提前欣賞一下大神的傑作吧。

我們照著文檔輕鬆的改成自己部落格的樣子

2. 模板訂製化修改

很多教程都是在這一步停止了，所以讀者都要自己去重新搜怎麼訂製模板，屬實麻煩。這裡我對比了其他模板的訂製化修改，總結了以下幾個必備的私人訂製：

2.1 添加404頁面

原來的主題沒有404頁面，我們加一個。我們可以根據Hexo的語法新建個404的目錄：

hexo new page "404"

然後我們可以在source/404/下編輯index.md文件

---  title: 404  permalink: /404  type: "404"  layout: "404"  date: 2019-11-18 23:49:08  ---  ## 爆炸,頁面炸沒了！

這樣我們就完成了一個增加了404的功能，如果我們自己需要額外訂製404的樣式，可以參考404模板之家，我也是剛剛知道竟然還有這種網站。

2.2 添加評論插件

由於這個主題自帶了gittalk、gitment、valine等評論插件，所以我們只需要配置好對應插件參數就行了，這個部落格用的是gittalk，配置大致如下：

最後呈現的效果是這樣的：

當然也可以用其他評論插件，只需要配置對應項就是了，不是自帶的可以照著網上的教程自己弄一個，類似的文章有很多，可以搜索關鍵字就行了。

2.3 添加網易雲音樂BGM

寫文章的時候，想插入一段BGM怎麼辦？

首先我們找到網易雲在線平台，任意找到一首歌點進去播放，可以在地址欄拿到音樂ID號
然後通過下面網址：http://music.163.com/song/media/outer/url?id=XXXXXX.mp3， XXXXXX就是歌曲ID號，每一首歌我們只需要換掉這個ID號就行了,就相當於每一首的外鏈了
最後封面圖也可以按F12去找頁面元素的鏈接，填到對應的musics.jason文件中就可以，批量填入，聽到好聽的歌曲隨時更換隨時新增，很方便。

主要的修改就是這三部分，其他的可以各位大佬的特殊癖好去訂製化修改了，其實Hexo的訂製化各個模板也都是通用的，因此，大家直接搜索Hexo修改就行啦！

3. SEO優化

過去的程式設計師寫文章可能是為了讓自己做些技術積累，每隔一段時間可以總結自己的技術。不過如今自媒體發展迅速，我們在沉澱技術的同時當然也需要讓更多人了解自己，在技術圈裡出點小名氣~~，那如何能夠讓更多人知道自己呢？SEO就是一個需要了解的東西了，SEO也就是搜索引擎優化，指通過站內優化比如網站結構調整、網站內容建設、網站程式碼優化等以及站外優化，換句話說相當於網站推廣，網站推廣是一個比較煩人的事情，特別是對於專心搞技術的來說，可能就不是很擅長，所以下面教大家兩個比較簡單的SEO技巧。

3.1 讓百度收錄你的站點

查看百度是否收錄你的站點

首先要做的就是讓各大搜索引擎收錄你的站點，我們在剛建站的時候各個搜索引擎是沒有收錄我們網站的，在搜索引擎中輸入site:<域名>，如果如下圖所示就是說明我們的網站並沒有被百度收錄。我們可以直接點擊下面的「網址提交」來提交我們的網站

主動添加站點

登錄百度站長搜索資源平台：http://zhanzhang.baidu.com，只要有百度旗下的帳號就可以登錄，登錄成功之後在站點管理中點擊添加網站然後輸入你的站點地址。

在填完網址選擇完網站的類型之後需要驗證網站的所有權，驗證網站所有權的方式有三種：

文件驗證。
html標籤驗證
CNAME解析驗證（推薦使用）

推薦使用CNAME解析驗證，因為它最簡單，只需加一條解析就好

生成網站地圖

我們需要使用npm自動生成網站的sitemap，然後將生成的sitemap提交到百度和其他搜索引擎

安裝sitemap插件

npm install hexo-generator-sitemap --save  npm install hexo-generator-baidu-sitemap --save

修改部落格配置文件

在根目錄配置文件.yml中修改url為你的站點地址

執行完hexo g命令之後就會在網站根目錄生成sitemap.xml文件和baidusitemap.xml文件，可以通過：https://cloudcrawler.club/baidusitemap.xml，查看該文件是否生成，其中sitemap.xml文件是搜索引擎通用的文件，baidusitemap.xml是百度專用的sitemap文件。

為什麼要生成網站地圖呢？主要的原因是網站地圖表示了你的部落格網站的結構，例如某一分類下面哪些文章等等，也是方便百度爬蟲去爬取你的時候儘可能覆蓋你想要被爬取的所有文章，便於他們收錄，不過我們下面會講我們將為百度主動提交鏈接，這樣的話，網站地圖也顯得不是那麼重要。

向百度提交鏈接

我們可以將我們之前那生成的sitemap文件提交給百度，還是在百度站長平台，找到鏈接提交，這裡我們可以看到有兩種提交方式，自動提交和手動提交，自動提交又分為主動推送、自動推送和sitemap。

如何選擇鏈接提交方式呢？

1. 主動推送：最為快速的提交方式，推薦您將站點當天新產出鏈接立即通過此方式推送給百度，以保證新鏈接可以及時被百度收錄。 2. 自動推送：最為便捷的提交方式，請將自動推送的`JS`程式碼部署在站點的每一個頁面源程式碼中，部署程式碼的頁面在每次被瀏覽時，鏈接會被自動推送給百度。可以與主動推送配合使用。 3. `sitemap`：您可以定期將網站鏈接放到`sitemap`中，然後將`sitemap`提交給百度。百度會周期性的抓取檢查您提交的`sitemap`，對其中的鏈接進行處理，但收錄速度慢於主動推送。 4. 手動提交：一次性提交鏈接給百度，可以使用此種方式。

一般主動提交比手動提交效果好，這裡介紹主動提交的三種方法

從效率上來說：

主動推送>自動推送>sitemap

我們下面將會具體操作主動推送

設置主動推送安裝插件hexo-baidu-url-submit

npm install hexo-baidu-url-submit --save

然後再根目錄的配置文件中新增欄位

baidu_url_submit:    count: 80 # 提交最新的一個鏈接    host: www.sunhwee.com # 在百度站長平台中註冊的域名    token: xxxxxxxxxxxxxx # 請注意這是您的秘鑰， 所以請不要把部落格源程式碼發布在公眾倉庫里!    path: baidu_urls.txt # 文本文檔的地址， 新鏈接會保存在此文本文檔里

再加入新的deploy：

deploy:  - type: baidu_url_submitter

密鑰的獲取位置在網頁抓取中的鏈接提交這一塊,如下所示:

這樣執行hexo deploy的時候，新的鏈接就會被推送了。

推送成功時,會有如下終端提示

success為1表示成功推送的url條數，remain表示當日還可以推送9995條

各種不同的推送回饋欄位說明在這裡查看,一般來說,推送失敗基本都是地址不相符造成的,我們只需對比baidu_url_submit在public中生成的baidu_urls.txt的地址,與自己填寫在host欄位中的地址對比看是否一樣即可。

3.2 其他搜索引擎優化

其他的搜索引擎類似於Google、搜狗、360搜索等等，不過一般還會Baidu和Google對於大多數程式設計師來說使用頻率較高，因此，只需要做這兩個搜索引擎的收錄就行了。

3.3 優化你的url

seo搜索引擎優化認為，網站的最佳結構是用戶從首頁點擊三次就可以到達任何一個頁面，但是我們使用hexo編譯的站點打開文章的url是：sitename/year/mounth/day/title四層的結構，這樣的url結構很不利於seo，爬蟲就會經常爬不到我們的文章，於是，我們需要優化一下網站文章url。

方案一：

我們可以將url直接改成sitename/title的形式，並且title最好是用英文，在根

目錄的配置文件下修改permalink如下：

url: https://cloudcrawler.club  root: /  permalink: :title.html  permalink_defaults:

方案二：

使用插件優化url

插件hexo-abbrlink實現了這個功能，它將原來的URL地址重新進行了進位轉換和再編碼。

安裝hexo-abbrlink。

npm install hexo-abbrlink --save

配置部落格根目錄下的_config.yml文件。

permalink: :title/  permalink: archives/:abbrlink.html  abbrlink:    alg: crc32 # 演算法：crc16(default) and crc32    rep: hex # 進位：dec(default) and hex

運行hexo clean和hexo g命令來重新生成文件看看，可以清楚的看到，URL結構成功變為了3層。

3.4 其他seo優化

seo優化應該說是一個收益延遲的行為，可能你做的優化短期內看不到什麼效果，但是一定要堅持，seo優化也是有很深的可以研究的東西，從我們最初的網站設計，和最基礎的標籤的選擇都有很大的關係，網站設計就如我們剛剛說的，要讓用戶點擊三次可以到達網站的任何一個頁面，要增加高品質的外鏈，增加相關推薦（比如說我們經常見到右側本站的最高閱讀的排名列表），然後就是給每一個頁面加上keyword和描述

在程式碼中，我們應該寫出能讓瀏覽器識別的語義化HTML，這樣有助於爬蟲抓取更多的有效資訊：爬蟲依賴於標籤來確定上下文和各個關鍵字的權重；並且對外鏈設置nofollow標籤，避免spider爬著爬著就爬出去了（減少網站的跳出率），並且我們要盡量在一些比較大的網站增加我們站點的曝光率，因為spider會經常訪問大站，比如我們在掘金等技術社區發表文章中帶有我們的站點，這樣spider是很有可能爬到我們中的站點的，so….

網站外鏈的推廣度、數量和品質
網站的內鏈足夠強大
網站的原創品質
網站的年齡時間
網站的更新頻率（更新次數越多越好）
網站的伺服器
網站的流量：流量越高網站的權重越高
網站的關鍵詞排名：關鍵詞排名越靠前，網站的權重越高
網站的收錄數量：網站百度收錄數量越多，網站百度權重越高
網站的瀏覽量及深度：用戶體驗越好，網站的百度權重越高

4. 程式碼優化

程式碼優化主要是想要讓我們的程式碼塊顯示行號和整體複製，這兩點對於讀者在瀏覽文章以及複製程式碼的時候都是很關鍵的兩點，所以我們也要進行優化，由於程式碼高亮插件prism_plugin的樣式沒有行號顯示和程式碼塊整體複製功能，不是很方便，為了優化觀感和易用性，我們可以對其進行修改：

4.1 給程式碼塊開啟行號

我們在配置文件.yml中找到prism_plugin配置項line_number: false（# default false）改為true，開啟行號，但是在我們這個matery主題中中是無效的，有bug需要改一下matery.css樣式參數,在第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項，如下：

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;  }

好了這下可以顯示行號了，如圖：

關於程式碼整體複製的功能在目前在插件中已經集成。

5. 優化網站載入速度

5.1 優化圖片載入

優化網站圖片載入的速度的通用方法大概就是兩種：第一種就是就是使用圖片懶載入，Hexo的插件中已經有實現該功能的插件了–也就是hexo-lazyload-image，hexo-lazyload-image的作用原理是講你部落格裡面img標籤的src屬性替換為一個loading image，把真實的圖片地址放在data-origin屬性下面。然後當你的網頁翻到那張圖片時（也就是圖片在窗口中完全可見時），他會有一段js用data-origin的內容替換src，打到懶載入的目的。

具體的使用方法是在部落格根目錄配置.yml文件加入對應欄位，如下：

lazyload:    enable: true    onlypost: false    loadingImg:   /images/loading.gif

好了，這樣實現了部落格網站的圖片懶載入。效果大致類似於這樣

懶載入示例

第二種就是就是把本地的圖片進行無損壓縮，這裡給大家推薦一款工具Imagine，這是一款用於壓縮 PNG 和 JPEG 的桌面應用程式，具有現代友好的 UI。

我們可以看到，我們把圖片壓縮了將近10倍，清晰度方面幾乎是一樣的，所以這種方式也能幫助我們做圖片載入優化。

5.2 Gulp實現程式碼壓縮

這裡我們介紹一個工具，Gulp它是複製前端框架控制流的構建工具，作為流程工具，它集成了很多使用的功能，我們這裡就使用它來做程式碼壓縮，以提升網頁載入速度。

首先我們需要安裝Gulp插件和5個功能模組，依次運行下面的兩條命令。

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

接下來在部落格的根目錄下新建gulpfile.js文件，並複製下面的內容到文件中。

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"); //文件更改校驗組件  var gulpif = require("gulp-if"); //任務 幫助調用組件  var plumber = require("gulp-plumber"); //容錯組件（發生錯誤不跳出任務，並報出錯誤內容）  var isScriptAll = true; //是否處理所有文件，(true|處理所有文件)(false|只處理有更改的文件)  var isDebug = true; //是否調試顯示 編譯通過的文件  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(), {}); // 初始化一個hexo對象// 清除public文件夾  gulp.task("clean", function() {    return del(["public/**/*"]);  });    // 下面幾個跟hexo有關的操作，主要通過hexo.call()去執行，注意return// 創建靜態頁面 （等同 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);        });    });  });    // 啟動Hexo伺服器  gulp.task("server", function() {    return hexo      .init()      .then(function() {        return hexo.call("server", {});      })      .catch(function(err) {        console.log(err);      });  });    // 部署到伺服器  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檢查機制        })      )      .pipe(uglify()) //調用壓縮組件方法uglify(),對合併的文件進行壓縮      .pipe(gulp.dest("./public")); //輸出到目標目錄  });    // 壓縮public目錄下的css文件  gulp.task("compressCss", function() {    var option = {      rebase: false,      //advanced: true,               //類型：Boolean 默認：true [是否開啟高級優化（合併選擇器等）]      compatibility: "ie7" //保留ie7及以下兼容寫法 類型：String 默認：''or'*' [啟用兼容模式；'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]      //keepBreaks: true,             //類型：Boolean 默認：false [是否保留換行]      //keepSpecialComments: '*'      //保留所有特殊前綴 當你用autoprefixer生成的瀏覽器前綴，如果不加這個參數，有可能將會刪除你的部分前綴    };    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: /<!--%fooTemplateb.*?%-->/g, //忽略處理      unprotect: /<script [^>]*btype="text/x-handlebars-template"[sS]+?</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, //壓縮頁面JS      minifyCSS: true, //壓縮頁面CSS      minifyURLs: true //替換頁面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 目錄內圖片  gulp.task("compressImage", function() {    var option = {      optimizationLevel: 5, //類型：Number  默認：3  取值範圍：0-7（優化等級）      progressive: true, //類型：Boolean 默認：false 無損壓縮jpg圖片      interlaced: false, //類型：Boolean 默認：false 隔行掃描gif進行渲染      multipass: false //類型：Boolean 默認：false 多次優化svg直到完全優化    };    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"));  });  // 執行順序：清除public目錄 -> 產生原始部落格內容 -> 執行壓縮混淆 -> 部署到伺服器  gulp.task(    "build",    gulp.series(      "clean",      "generate",      "compressHtml",      "compressCss",      "compressJs",      "compressImage",      gulp.parallel("deploy")    )  );    // 默認任務  gulp.task(    "default",    gulp.series(      "clean",      "generate",      gulp.parallel("compressHtml", "compressCss", "compressImage", "compressJs")    )  );  //Gulp4最大的一個改變就是gulp.task函數現在只支援兩個參數，分別是任務名和運行任務的函數

最後 hexo clean && hexo g && gulp && hexo d 就可以了。

6. Github+Coding中國外雙線部署

如大家所知，很多人不願把部落格部署到Github上面去，原因就是Github伺服器在海外，對於我們訪問速度是有瓶頸的，所以一些人會把網站部署在中國的程式碼託管網站，比如Coding和Gitee，我們這次選的是Coding來做中國的部署，雖然它今年以來慘劇不斷，但是相信它會變好的。

具體的部署和Github類似，Coding現在被騰訊收購了，所以我們註冊帳號會跳轉到騰訊雲開發者平台，我們創建好項目之後，在Hexo根目錄的配置文件中添加Coding的部署地址，如圖：

添加完成後先執行命令 hexo clean 清理一下快取，然後執行命令 hexo g -d 將部落格雙線部署到 Coding Pages 和 GitHub Pages，如下圖所示表示部署成功：

接著我們開啟CodingPage（PS: 真的是完全模仿GithubPage）

這是我們就已經在Github和Coding雙線部署好了我們的服務，我們用數據來看一下是否Coding在中國真的快於Github。

結果很明顯，Coding在中國真的很好用。接下來我們利用阿里雲的智慧解析來做智慧路由

這樣，我們的網站就實現了中國國外雙線智慧路由。

7. 自建CDN資源

介紹一款軟體jsdelivr可以幫助我們做免費的CDN，它也有中國的伺服器，因此我們無論在國外中國都可以使用。

8. 網站預載入JS腳本

推薦一個軟體instant.page，作用是可以預載入用戶想訪問的頁面，當用戶真正點擊鏈接後，就會直接從快取中讀取，以此提升網站的訪問速度。

instant.page 原理的話我們不必深層了解，只需知道：

在用戶點擊網站鏈接之前，他們將滑鼠懸停在該鏈接上。當用戶徘徊 65 毫秒時，他們將點擊該鏈接有兩個機會，因此 instant.page 此時開始預載入，平均超過 300 毫秒，以便頁面預載入。

instant.page 是漸進式增強 – 對不支援它的瀏覽器沒有影響。

9. 快捷圖床工具

推薦一款圖床工具PicGo，大家可以把這個工具結合Github來使用，把Github作為圖床或者是使用其他第三方網站，目前PicGo可以支援多個網站。

總結

有關Hexo部落格生態介紹大致就是如上這些，希望大家都能夠用的自己的部落格上面，不僅僅是把部落格當成一個記錄自己成長的工具，更是把它做成一個展示自己的產品，能夠好好的運營它。目前這個階段大致介紹的幾點建議如上所示，之後會陸續總結出新的部落格生態的功能推薦和優化建議。