2019年底，來一發基於Hexo自建博客生態指南！

時間 2019-11-30

標籤 2019年一發基於 hexo 自建博客生態指南简体版

原文原文鏈接

必讀前言

本文篇幅較長，涉及的面較廣，通篇閱讀大概須要半個小時左右。建議時間緊迫的大佬們能夠先收藏文章，以後閒時再細細閱讀，我的預覽DEMO，有關文中具體涉及到的工具你們能夠關注公衆號《雲爬蟲技術研究筆記》回覆關鍵詞「博客」獲取「一鍵圖牀工具」和「無損壓縮工具」。javascript

「我的博客」這一名詞從很早前就廣爲人知了，對程序猿來講，「我的博客」也能夠算是程序員們的「私人樂園」，讓各位碼農們能夠在本身的私人博客裏放飛自我。而搭建「我的博客」的方式也是五花八門，例如：css

能夠利用現成的博客社區，例如CSDN、知乎等等；
利用熟悉的語言，本身開發先後端，再把項目部署到私人服務器上；
利用現成的博客構建框架，結合第三方的平臺進行部署，並藉由第三方平臺維護；

固然，每種方式都有本身的優缺點：html

博客社區有極大的讀者流量，而且作好了SEO優化，提供了現成的寫做工具和數據分析報告等等；可是缺點是不夠自由，像知乎專欄那樣千篇一概的樣式；像CSDN逼迫不登陸就不能瀏覽文章的噁心人的限制；像。。。好吧~~被這些網站的約束戰勝了。。。
本身大包大攬，擁有極大的權限，想怎麼改就怎麼改，固然~~只要你會。可是苦的是要服務器，要學前端框架，學後端框架，學。。。好吧，懶人黨表示拒絕！
利用現成的博客構建框架，搭建我的博客的框架是一代又一代的更換，從最先的基於Php開發的WordPress、到以後的基於Ruby開發的Jekyll、再到近幾年憑藉部署方便，編譯速度快等特性而迅速火起來的基於Node開發的Hexo和基於Go開發的Hugo，都是讓人很容易上手，而且能夠結合國外的Github平臺以及國內的碼雲平臺進行部署，熟練的話簡直能夠說10分鐘就部署好本身的博客，真的是懶人黨、伸手黨的福音。固然，缺點也是有的，沒自建博客那麼高的自由度，沒博客社區那麼好的優化程度，可是轉念一想，結合還算能夠的自由度再加上咱們本身簡單的優化也還過得去。

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

搭建完博客就擺着嗎？
不作圖片、Js腳本加載優化嗎？
不作SEO優化嗎？
不介紹如何自定義開發嗎？
怎麼能更好的結合本身的公衆號？嗯！對，相信不少人在搭建完博客以後也會有一樣的疑問，那麼這篇文章就給你滿意的答案，我不會再重複那些搭建步驟，你們能夠自行搜查教程哈，本文着重講解如何搭建博客生態，提高博客的逼格！再次提醒：

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

Hexo博客生態搭建

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

模板選擇
模板定製化修改
網站SEO
代碼優化
優化網站加載速度
Github+Coding國內外雙線部署
自建CDN資源
網站預加載JS腳本
快捷圖牀工具

1. 模板選擇

不少人會質疑爲何模板選擇都要提？若是大家不注重這點那大家就錯了，好的模板也是一個博客的門面，一個結構清晰，對用戶友好的模板會讓讀者很快的找到你博客中的重點，也會促進讀者的留存率，一個模塊豐富的模塊也更能表達你本身，向讀者展現你更多的才華。Github上面有不少模板，咱們能夠看一下：程序員

咱們直接搜索Hexo，而且按Star數量排序，就能夠開始尋找咱們想要的模板了，固然，爲了更直觀的尋找模板，咱們能夠直接去Hexo的官網，能夠直接查看各個模板的樣式圖。 github

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

咱們照着文檔輕鬆的改爲本身博客的樣子 npm

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號
而後經過下面網址：music.163.com/song/media/… XXXXXX就是歌曲ID號，每一首歌咱們只須要換掉這個ID號就好了,就至關於每一首的外鏈了
最後封面圖也能夠按F12去找頁面元素的連接，填到對應的musics.jason文件中就能夠，批量填入，聽到好聽的歌曲隨時更換隨時新增，很方便。

主要的修改就是這三部分，其餘的能夠各位大佬的特殊癖好去定製化修改了，其實Hexo的定製化各個模板也都是通用的，所以，你們直接搜索Hexo修改就行啦！

3. SEO優化

過去的程序員寫文章多是爲了讓本身作些技術積累，每隔一段時間能夠總結本身的技術。不過現在自媒體發展迅速，咱們在沉澱技術的同時固然也須要讓更多人瞭解本身，在技術圈裏出點小名氣~~，那如何可以讓更多人知道本身呢？SEO就是一個須要瞭解的東西了，SEO也就是搜索引擎優化，指經過站內優化好比網站結構調整、網站內容建設、網站代碼優化等以及站外優化，換句話說至關於網站推廣，網站推廣是一個比較煩人的事情，特別是對於專心搞技術的來講，可能就不是很擅長，因此下面教你們兩個比較簡單的SEO技巧。

3.1 讓百度收錄你的站點

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

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

主動添加站點

登陸百度站長搜索資源平臺：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文件，能夠經過：cloudcrawler.club/baidusitema…，查看該文件是否生成，其中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: /<\!--%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, //壓縮頁面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函數如今只支持兩個參數，分別是任務名和運行任務的函數
複製代碼