關於HEXO搭建個人部落格的點點滴滴

最終效果大家可以看這裡

背景

作為一個開發者不能沒有部落格，最近花了幾天的時間搭建了這個部落格，處理了很多細節，在這篇文章中我會把我從開始到現在以及後續的優化整理出來，幫助更多的人搭建、維護、更新、自己的部落格。

一開始我所有的部落格都寫在新浪微博，因為微博上更容易推廣自己的文章，微博使用者量大，但是後來微博的弊端慢慢的顯示出來了，畢竟不是開發者的天地，我的部落格中經常會插入大量的程式碼，而微博不支援markdown編輯，普通的編輯器對程式碼塊的相容性非常差，別說高亮了，有時候排版都會錯亂，最後外觀很不好看，如下圖：

而且微博的賬號系統也存在一定的弊端，所以後來轉向簡書、掘金等技術平臺，不得不承認相對於微博來說這些平臺對開發者就要友好多了，不過後來又發現一個問題。因為我在寫文章的時候使用的是本地的markdown編輯器，而這些平臺對markdown語法的一些小細節並不嚴謹或者說統一如下圖：

兩個平臺的編輯器無法做到統一，以至於每次寫完文章都需要針對兩個平臺做不同的修改。

綜上所述，最簡單的也最一勞永逸的方法就是搭建自己的部落格平臺，而HEXO很好的幫我們解決了這個問題，其實對於一個開發者來說並不是什麼難事，整個流程對於大部分有程式碼基礎的開發者來說一上午時間就可以搞定，不過最難的也是最頭痛的就是對細節的調整，對UI的修改、優化等，不過本文會對此逐一講解。

環境配置

• Node.js

cURL:

$ curl https://raw.github.com/creationix/nvm/master/install.sh | sh

Wget:

$ wget -qO- https://raw.github.com/creationix/nvm/master/install.sh | sh

安裝完成後，重啟終端並執行下列命令即可安裝 Node.js。

$ nvm install stable

• Git

一般的開發者不會沒有這個吧，我是安裝Xcode就會有這個了，

使用 Homebrew, MacPorts ：brew install git;或下載 安裝程式 安裝

• bitbucket賬號

一般都會使用HEXO+GitHub page的形式搭建自己的部落格，但是這裡有個問題就是GitHub是開源的，任何人都能在上面看到你的原始碼，雖然這並沒有什麼太大的影響，不過對於我來說感覺怪怪的，所以我就用了bitbucket page來處理我的部落格，所有的東西都一樣只不過這個是個私有庫罷了（免費五個人）

開始建站

第一步：建立倉庫

進入github/bitbucket（後續都以github為例）新建repo，這裡要注意repo的名字一定要滿足your Account Name/github.io。如果是bitbucket那就是your Account Name/bitbucket.io，因為只有這樣的倉庫名稱最後才能以靜態頁面展示。如圖：XXX的內容一定要與紅色的框裡的文字一致。

第二步：建立本地資料夾

建立資料夾之後CD到你建立的資料夾中執行hexo的初始化相關命令

$ hexo init
$ npm install
複製程式碼

執行完畢之後你的資料夾裡就有內容了，標準的目錄結構是這樣（只列出幾個必要的資料夾及其子目錄）

├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes
複製程式碼

• _config.yml： 其中我們以後的大部分操作都會在_config.yml中進行，這個檔案是我們的站點的配置檔案。

• scaffolds： 模板檔案，規定了我們建立一篇文章的時候最開始的樣子，

• source： 可以暫時的理解成我們文章的存放處

• themes： 主題檔案

第三步：部署到Git

修改我們的的站點配置檔案_config.yml中如下欄位

其中：

• type值對應的是你所部署的的伺服器型別，我們這裡填寫git就可以。

• repo是你的倉庫地址，也就是倉庫克隆的地址，推薦用https的連結。

• branch不寫預設是master，通常我們寫成master就可以。

以上配置完成後儲存 然後回到終端執行npm install hexo-deployer-git --save安裝一個外掛，這樣才能將你寫好的文章部署到github伺服器上並讓別人瀏覽到。安裝完成後在終端中依次執行如下程式碼(為了簡單後續統稱為三步)

• hexo clean 清理快取

• hexo generate 進行渲染 簡寫 hexo g

• hexo server 部署到本地(除錯使用) 簡寫 hexo s。然後瀏覽器輸入 http://localhost:4000 就可以看到你部落格的效果啦，不過這是本地除錯用，其他人是看不到的。(除錯完畢後記得 control + C 關閉本地埠，不然下次就進不去啦)

• 除錯完畢後使用 hexo deploy 簡寫為 hexo d來部署到git伺服器。

執行完以上操作後開啟瀏覽器地址了輸入http://你github名字.github.io就可以看看到效果啦，這回是所有人都能看到的，用手機也可以。至此第三步已經完成,最終的結果如下圖：

第四步：寫文章

使用如下命令 hexo new post “文章名字” 就可新建文章啦，建立好的文章在 source/_posts 中，你可以用markdown語法編輯內容就可以。編輯完成後執行第三步中終端的操作就可以啦，重新整理下瀏覽器就可看到你的新文章啦。如下圖:

個性化

一：主題

獲取

主題是我麼個性化的基礎和前提，我們想做任何個性化上的修改基本上都是在我們主題上的修改，先找到一個自己滿意的主題是首要任務。關於主題網上有很多很多，HEXO官方的主題目錄也收錄了好多來著世界各地開發者的主題。或者開發者也可以直接去網上搜尋HEXO theme關鍵字來獲取主題。

安裝

主題一般都是repo，只要講起clone到部落格目錄themes/XXXX下就可了，XXXX對應的就是你給主題起的名字，像這樣：git clone https://github.com/huyingjie/hexo-theme-A-RSnippet.git themes/a-rsnippet 這樣就可以保證每次主題的作者有更新了我們就可以 pull獲取更新。不過這樣有個問題後面我會在HEXO多終端同步一欄講到，所以這裡我們選擇另一種方式去安裝，就是直接把主題的repo下載下來 然後解壓放到themes中。其實對於已經穩定的主題作者一般不會頻繁更新，不穩定的主題我們也不會用，所以用後者安裝也是一樣的。

然後我們回到剛才的站點配置檔案中_config.yml修改如下欄位，對應的名字就是你剛才那個主題資料夾的名字：我這邊是next，

然後儲存，再去終端執行那三步，接著重新整理網頁就可以看到新的介面啦。下面是我換了NEXT主題重新整理後的效果。因為該注意已經非常完善，所有後續用該主題做例子來講

二：主題選單

新增按鈕

主題選單也可以說是主題按鈕。也就是上面頂部的兩個，next主題預設的兩個是Home、Archive，我們一般會加上tag about category等。這些都是需要在主題上進行修改，我們需要修改主題的配置檔案，首先在主題的資料夾下找到_config.yml檔案，沒錯和之前的站點配置檔案同名，只不過他們的路徑不同，大家千萬不要弄混，站點配置檔案是配置站點通用的東西，而主題配置檔案是配置一些主題的元素。在主題配置檔案找到menu欄位

可以看到主題作者註釋掉了一部分按鈕只保留了兩個最基本的，這裡需要注意前面的Key並不是代表的是按鈕名字，因為該主題是支援多語言，所以這個key只是個標識，具體的按鈕名字要去該路徑下查詢

其中每一個檔案對應了不同的語言，我們以漢語為例，進入zh-Hans.yml中修改這些欄位

其中key就是之前我們在主題配置檔案中的key，而後面的value則是簡體中文狀態下按鈕的名字。修改完成後我們儲存執行那三步就可以看到我們新新增的按鈕了。

新增頁面

新增按鈕後我們需要點選按鈕顯示統一的頁面。這時候我們需要新增頁面。以tag頁面為例，hexo中新增頁面的命令是hexo new page XXXXX 後面XXX則是要新增頁面的名稱，我們這裡寫tags。為了測試新建的tag頁面我們對之前的頁面新增個tag。去 source/_post中找一篇文章我們在開頭新增如下欄位,多標籤以此類推

然後編輯我們剛才生成的tag頁面(source/tags/index.md)指定其type為tags

然後儲存執行那三步就會有如下效果

點選對應的tag即可跳轉到改tag所對應的文章。其他頁面同理。

三：新增閱讀更多button

我們在首頁的時候其實就是我們的文章列表，但是這時候有個問題，如果我們某一篇或者某幾篇文章很長，那首頁是不是更長呢？其實在首頁我們可以只顯示文章部分內容，通過點選閱讀更多按鈕來進入文章詳情。這個時候就需要截斷文章。我們在文章的合適地方採用<!--more-->來截斷,用預設文章來看

然後執行那三步就會如下效果

點選閱讀更多。

四：更改主題背景

首先找到如下路徑 themes\next\source\css_custom\custom.styl 會發現裡面是空的，這個檔案是Next主題為我們預留的做一些自定的css樣式的地方，我們新增如下程式碼。

//背景圖片相關
@media screen and (min-width:1200px) {

    body {
    background-image:url(/images/bg.jpg);
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:50% 50%;
    background-size: cover
    }

    #footer a {
        color:#eee;
    }
}
複製程式碼

這裡大家應該就可以看出括號裡面的圖片路徑就是我們的背景圖片，我們只需把圖片放入 themes\next\source\images 中即可，記住圖片名字要寫對，要有字尾。同理括號裡面我們可以直接放一個圖片的連結比如 https://tpc.googlesyndication.com/simgad/6893153702744595670 做完這些操作儲存，然後執行那三步即可看到效果，不過可能瀏覽器有快取，可以清理下快取再重新整理看看。

五：修改部落格背景透明度

既然再上一步中修改了背景圖片，如果被NExt本身的白色擋住確實不好看，我們可以嘗試把本身的白色背景變成透明的，這樣會美觀很多，同樣還是修改剛才的檔案 themes\next\source\css_custom\custom.styl 在上一步的基礎上我們可以新增如下程式碼

//改變背景色和透明度
.main-inner {
    background: #fff;
    opacity: 0.9;
}
複製程式碼

其中第一個屬性為顏色值，第二個屬性就是我們的透明度啦。適當修改，不然會適得其反連字都看不清啦。做完上兩步就是我的這個部落格的效果。

六：修改作者頭像為圓形，

我們預設是方形的頭像，想修改為圓形的話同樣是上兩步的那個路徑下新增如下程式碼

.site-author-image {
  border-radius: 100%;
  padding: 2px;
  border: 2px dashed #fff;
  animation: cycle 2s 0.5s forwards;
  transition: border-radius 2s;
}
複製程式碼

儲存 -> 三步 即可看到效果

七：新增背景動畫

背景動畫使用Js來處理，會JS的同學可以自己寫喜歡的動畫，我這邊就用了網上比較通用的動畫。找到以下路徑 themes\next\layout\_layout.swig 在文章 </body>的上面新增如下程式碼

<script type="text/javascript"
color="255,255,255" opacity='1' zIndex="-2" count="100" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}

複製程式碼

然後 儲存 -> 三步即可看到效果 其中src為JS的路徑，有興趣的可以自定義效果。

八：新增評論頁面

HEXO的評論頁面官方推薦了disqus，無奈已經被牆，即使開發時候自己有克服的方法但是也不能保證所有看你部落格的人都有克服的方法。所有我們打算採用其他的的一些第三方來實現，首先先對市面上的幾個產品做下對比：

比較：

• disqus

比較大牌的評論系統，服務穩定，唯一的缺點是國內無法使用。暫不考慮

• 多說 國內比較出名的評論系統，已經關閉服務暫不考慮。

• gitment 一款基於github issue的評論系統，風格很像github，只是目前還不是太穩定，且介面無法自定，可能會於部落格有些不協調。而且評論需要github賬號

• livere 中文名字叫來必力，是一款韓國的評論系統，在不帶有任何民族情感的前提下來看確實棒子的東西還是不錯的，也是我目前在使用的一款，我主要用它的原因有幾點

  • 支援很多種格式的評論匯入，你可以很方便的吧之前在其他平臺上的評論資料匯入進來，支援多種json格式。

  • 簡介的UI提供多種主題。

  • 國外的東西不受國內的限制。

整合：

先去livere的官網註冊m，具體過程我就不講了，一步一步安她的來就行，之後他會給你一個安裝程式碼，像這樣：

裡面主要的資訊就是data-uid。 NEXT主題本身是已經整合了livere評論的，只不過被註釋掉了。找到主題配置檔案 _config.yml 找到如下程式碼

開啟註釋填入你在livere中註冊後它給你的UID即可。然後 儲存 -> 三步即可。

多終端操作

背景

大家都知道HEXO是靜態部落格，所有的頁面都是靜態的通過本地檔案渲染然後再部署上去，這就帶來一個多終端部署的問題，比如公司電腦配置好了，想回家在進行寫作，發現家裡什麼都沒有還需要重新配置環境，不過這倒是次要，關鍵是如果不能保證兩個終端的內容完全一樣就會造成伺服器上的資料會被最後一次部署覆蓋，導致前幾次的都被覆蓋掉。

解決

其實大家應該也看出HEXO整體的一套流程下來就是git的工作流程，不管你用github還是bitbucket都是遵循gitflow的，而gitflow就是一種多終端多人協同工作的解決方案。所以我們可以用它來解決多終端同步的問題。

流程

我們先來了解下hexo的整體流程。我們正常的為資料夾結構如圖：

第一步：hexo g

source資料夾下存放著我們的文章，tag、歸檔之類的資訊，也就是我們的部落格的內容。當我們在終端執行 hexo g 的時候會被source中的檔案按照某種規則方式渲染成靜態的頁面檔案放到public中：

第二步：hexo d

然後我們執行 hexo d 這一步暫時我們可以認為就是對public中的檔案進行push到我們的git倉庫的過程。所以在我們的倉庫中 XXXXXX.bitbucket.io 大家看到的檔案只有public中的檔案。

附加：hexo clean

其實這一步是和gitflow沒有關係的，但是既然講到流程我這邊也在說下，之前說過這步是用來清理快取的，其實他的作用是執行在第一步之前，將整個public檔案刪除，然後我們再執行 hexo g 重新渲染進public，之後再 hexo d 進行部署，這樣就避免之前的內容對我們造成影響。

具體操作

通過上一步流程我們知道如果git伺服器上只有public是不夠的，我們需要有我們整個部落格資料夾下的所有檔案才能進行多終端操作。所有這邊有兩個方法：

• 新建另一個倉庫我們暫時命名為MyProject，把我們所有的檔案傳到這個Git倉庫上，當我們換另一臺電腦時候我們直接拉這個新倉庫的程式碼然後進行寫作 -> 三步走最後在將所有檔案推到MyProject以後所有的git操作都在這個倉庫中進行。

• git給我們提供了多分支操作，我們可以做xxxx.github.io這個倉庫中建立一個新的分支暫時命名為hexo分支，這個分支的作用和上一個方法裡MyProject的作用以及裡面的檔案一模一樣，只不過我們這個方法就省的我們再建立一個倉庫了。以後所有的git操作都去這個分支進行，本地的檔案一直保持在這個分支就行，不過有一點需要注意的就是，即使所有的操作都在hexo分支下進行也必須保證master分支為主分支(default branch)，不然你就打不開你的部落格了。

以上兩種都是屬於基本的git操作，本文不再贅述。不過有一點這裡要強調下，還記一開始我跟大家說的主題的是推薦大家直接去主題所在的repo下載zip然後解壓拖進部落格目錄裡面嗎？如果你不是拖拽進來的而是clone下來的話在這一步你會涉及到git的 add submodule操作。其實操作不難，具體的命令網上也是大把。不過如果你像我一樣使用bitbucket的話可能發現無法進行submodule操作，不知道這個是bitbucket的BUG還是什麼其他原因，同樣的命令使用github託管部落格的時候是沒有問題的，而bitbucket就不行，當你使用另一臺電腦的進行拉去的時候執行 git submodule init 操作的時候他會提示找不到。至今未解決，如果哪位大神有什麼方法及時聯絡我。

繫結個人域名

注意：bitbucket 從2015年開始關閉了個人部落格自定義域名的功能，也就是說如果你是按照上面操作把個人部落格部署在bitbucket中的話就無法使用自己的域名，關於這一點bitbucket文件已經有明顯的說明

準備工作

在github上建立倉庫，倉庫的名字為 username.github.io。然後修改站點配置檔案中部署地址（repo對應的欄位），將原本的bitbucket的倉庫地址改為github的地址

之後進行儲存然後三步走，部署成功後你的部落格就從bitbucket上遷移到github中了，這樣一來，你整體的部落格倉庫還是在bitbucket中的私有庫中，但是public資料夾中的公開檔案已經被你部署到github的倉庫中。該保密的資訊仍然保密，同時也不影響你繫結自己的域名，一舉兩得。正常情況下按照上面步驟完成後的部落格地址是 xxx.github.io，下面就開始繫結自己的域名。

域名購買

這個渠道有很多，我就不再一一贅述，我這邊以阿里雲的萬網域名購買為例,找到合適自己的域名

域名解析

購買域名並且按照他的步驟實名認證之後，需要把域名解析到我們的部落格中，在阿里雲的控制檯找到域名右側對應的解析按鈕。點選然後新增解析

然後按照如下填寫新增解析，記得把記錄值替換成你自己的部落格地址

之後記得啟用該記錄，不過如果你像我一樣是阿里雲購買並且配置的話是不需要啟用的，預設幫你啟用。

倉庫配置

然後回到你的github倉庫，進入你的倉庫設定頁面，找到如下欄位，在紅框處新增你的域名，然後儲存即可

部落格配置

回到你的部落格目錄，在source目錄下建立一個不帶任何字尾的檔案，命名為 CNAME，裡面填寫你的域名，我是這樣，只新增你的域名不要新增其他東西。然後儲存 執行三步之後就可以通過你的域名訪問你的部落格啦，如果不能訪問可能是因為運營商DNS快取問題。等幾分鐘就可以了。

實現https協議

按照以上步驟完成後可以通過域名訪問，但是有個問題就是如果你用谷歌瀏覽器或者Safari，他就會提示你網站不被信任，只有你點選仍要繼續才會展示你的部落格，並且位址列裡面還是有個紅色的×，雖說不影響使用和閱讀，但是還是感覺彆扭，這次我們來講如何將自己的部落格協議改為Https。這裡有幾種方法：

• 購買證照

• 使用免費CA證照。騰訊雲阿里雲都有提供。不過有時間限制

• 使用CDN進行反向代理

如果使用上兩步的話基本上證照的服務商都會告訴你如何配置，他們的文件講的一定比我的詳細，不過主要原因是我們使用的github Page是不支援上傳證照的，所以這裡主要說下第三步，通過CDN配置反向代理，這裡就需要用到一個國外的CDN服務提供商Cloudflare:

原理

Cloudflare 提供DNS解析服務，而且速度很快，在阿里雲半個小時才能生效的解析在它這裡瞬間就生效，它提供了免費的https服務(但不是應用SSL證照)。實現模式就是，使用者到CDN伺服器的連線為https，而CDN伺服器到GithubPage伺服器的連線為http，就是在CDN伺服器那裡加上反向代理。

使用者看到的小鎖其實是使用者連線到Cloudflare的證照，而由Cloudflare到github是沒有https的，不過對於我們靜態部落格已經夠了。

配置

第一步：

還是先去官網註冊，然後新增你的域名，注意新增的是你購買的域名。

第二步：

進入DNS解析介面填入如下解析，因為我們使用clouldflare做DNS解析所以一會我們需要把我們購買域名的那個地方的解析刪掉。

其中前兩個是使你的域名指向github的伺服器地址，github文件中給的就是這個兩個地址，最後那個CNAME記錄指向的是你的github倉庫域名username.github.io。一定要嚴格按照這個來配置。

第三步：

記錄下cloudflare給你的DNS解析伺服器，就在上一步那個頁面下邊，用這個記錄去把你域名購買處（我的是阿里雲）的DNS解析伺服器替換掉，同時刪掉阿里雲裡面的DNS解析記錄，因為我們以後就靠clouleflare來解析DNS啦。

第四步：

回到clouldflare 上面選擇crypto選項然後下面選擇full或者是Flexible

選項中幾個的區別如下圖

最後那個是需要證照支援的。然後滾動到下面開啟always use HTTPS開關

第五步：

以上步驟配置好之後基本就完成了，但是如果直接有人在位址列裡面輸入http://XXXXX 進入你的部落格的話你這邊還是會出現非Https的效果，所以我們這裡要做一個強制跳轉。

這樣就萬無一失了。

坑點：

我之前按照以上步驟操作完成後發現首頁雖然是https了也不顯示紅叉了，但是也沒有顯示綠色的小鎖，而是一個歎號，但是有些博文頁面可以正常顯示https綠鎖。後來發現是因為當前頁面中有非https的連結導致，比如圖片圖床不是https的，或者評論外掛不支援https，不過我部落格中使用的來必力評論是支援https，只是我當時的圖床無都是http所以只能是顯示歎號了，後來把所有圖片圖床換成https的就好啦。

最後

整篇文章只有開始一小部分在講解如何搭建部落格，後續的基本都是交給大家如何優化，調整一些細節問題如UI、使用者體驗之類的，當然我們能做的遠遠不止這些，如果有什麼問題歡迎與我探討。下面的留言我都會看的。此外當本人對HEXO有新的看法或者玩法的話該文章會不斷的更新，希望大家關注我的小站，感謝。