關於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有新的見解或者玩法的話該文章會不斷的更新，但願你們關注個人小站，感謝。