過年回家前在公司的最後一天，說實話有點心不在焉了。整個2017也就這樣恍然過去，很多事都來不及回想。在這最後的時間裡，想起把自己使用Hexo搭建個人部落格網站的流程整理成篇，前段時間為了這個也是找了好多資料，遇到不少坑，將它記錄在這裡就算是舊年裡的最後一個節點，畢竟春節過後新的一年就要真正開始了。

溫馨提示：由於本篇是後期整理的文章，一些在實際操作中遇到的錯誤可能會遺漏，但都是可以百度到的，當然，我也歡迎大家留言問題，以供完善記錄。

效果展示：風恣的部落格

目錄

一、準備工作
二、搭建部落格(遠端與本地)
三、釋出部落格
四、更換主題
五、部落格網站美化
六、在不同電腦管理hexo部落格
七、遇到問題
八、其他方案

一、準備工作

1.瞭解Hexo

Hexo是高效的靜態站點生成框架，她基於Node.js。 通過 Hexo 你可以輕鬆地使用 Markdown 編寫文章，除了 Markdown 本身的語法之外，還可以使用 Hexo 提供的標籤外掛來快速的插入特定形式的內容，而且相對於其他框架，Hexo在速度上也有很大優勢。

2.搭建Node.js環境

我們瞭解到Hexo基於Node.js的，那麼我們搭建部落格網站首先需要安裝Node.js環境。 Node.js 是一個基於 Chrome V8 引擎的 JavaScript 執行環境，可以在非瀏覽器環境下，解釋執行 JS 程式碼。
下載地址：

http://nodejs.cn/download
測試安裝：命令列使用node -v 、mpm -v，檢視顯示版本號即成功。

3.安裝Hexo部落格框架工具

Hexo是一個建站工具，可以幫助我們快速生成基本的部落格檔案，安裝它需要在控制檯下使用如下命令：

npm install hexo-cli -g

若報錯，請嘗試在命令前加上sudo

4.安裝Git版本工具

Git是目前世界上最流行的分散式版本控制系統，是的，沒有之一。使用Git可以幫助我們把本地的網頁和文章等內容提交到Gihub上，實現同步。
下載地址：https://git-scm.com/downloads
Windows系統需下載，Mac系統因為自帶Git無需操作。
測試安裝：git - -version，檢視顯示版本號即成功。

5.註冊Github賬號

gitHub是一個面向開源及私有軟體專案的託管平臺，因為只支援git 作為唯一的版本庫格式進行託管，故名gitHub。這裡用到Github，是因為我們需要通過Github得到自己的部落格網站域名，而且需要使用gitHub同步我們個人部落格的相關檔案。
註冊地址：https://github.com
註冊流程：https://www.baidu.com，百度一下，你就知道啦。

注意：註冊Github的時候一定要選擇一個合適的名字，因為後來部落格網站的域名也會用到這個名字。雖然Github使用者名稱支援後期修改，但是還是會帶來很多不必要的麻煩。github的使用在網上有很多教程，這裡也就不再累述了。

二、開始搭建部落格

1.開啟GitHub Pages服務

搭建我們的個人部落格需要一個唯一的域名，當然我們可以申請購買一個域名來使用，但是在不是太必要的情況下，我們也可以通過Github Pages獲得一個免費使用的域名，這需要我們在Github上新建一個倉庫，如下：

這個過程和建立普通的倉庫沒什麼區別，關鍵在於新倉庫的名字，一定要是UserName+“github.io”的形式。這也是之前強調的要起一個好的使用者名稱的原因。這樣之後我們最後的部落格網站的連結就會是：https://UserName.github.io的形式。
注意：固定新倉庫的名字格式並非必須，只是這樣操作生成的部落格域名比較短小簡潔，另起他名生成部落格域名會很冗長。

點選Create Repository之後，隨後選擇Setting進入設定，找到Github Pages如下：

這裡我們需要點選Choose a theme任意選擇一個選擇主題，然後介面會跳轉到倉庫，我們看到有兩個檔案如下：

此時若再檢視setting，我們會看到開啟GitHub Pages之後得到的域名如下：

現在，我們就可以使用https://UserName.github.io，訪問自己的部落格網站了，開啟連結我們會看到預設主題的個人部落格樣式如下(雖然有點點醜，是吧)：

2.建立本地部落格站點

上述的步驟相當於我們使用Github page，建立了一個預設的部落格頁，並且得到了一個可外部訪問的域名。但是這個部落格頁很Low。我們的目的是建立自己個性化的部落格網站，所以我們使用Hexo在本地先建立一個本地部落格站點，優化後再把它部署到github上。接下來我們使用控制檯命令在本地一個合適的位置建立部落格站點資料夾如下：

hexo init  myHexoBlog       //myHexoBlog是專案名

下面來測試本地部落格站點，在本地部落格根目錄下使用控制檯命令：

hexo g  //g是generetor的縮寫，生成部落格

hexo s  //s是server的縮寫，啟動服務

此時開啟瀏覽器，輸入 http://localhost:4000/，我們將會看到Hexo自帶預設主題顯示的部落格樣式如下(呃，是好看了那麼一點點)：

3.同步Github,允許公共訪問

在本地我們已經搭建了部落格，但是還只能自己本地訪問。若要別人也能看到，那就需要我們將其同步部署到GitHub上了。還記得我們之前準備的Github倉庫嗎，這裡就要用到了。
首先找到我們的部落格倉庫，並拷貝倉庫地址：

然後修改本地部落格目錄的配置：
修改本次部落格根目錄下的_config.yml檔案，修改deploy下的配置如下：

最後執行控制檯命令：

npm install hexo-deployer-git —save //安裝部署外掛
hexo d //部署到github

現在，我們再次訪問連結：https://userName.github.io，就會發現這裡的介面和本地的一樣了。如此一來我們搭建的個人部落格網站就基本完成了。

三、釋出部落格

激動人心的時候到了，終於可以釋出自己的第一篇部落格了。來嘗試一下以下的步驟：
在本地部落格資料夾根目錄輸入：

hexo new "我個人部落格的第一篇部落格，哈哈哈..."

hexo g   //生成網頁

hexo d  //部署到遠端(github)

檢視我們本地的部落格資料夾，將會看到我們建立一個條新的部落格文章：

現在開啟我們的部落格網站：http://UserName.github.io,會看到網頁如下(顯示可能會延時，不如先喝杯茶放鬆下吧)：

這就是我們釋出部落格的方法啦，當然這裡是為了演示，真正做的時候我們要找到_posts裡的部落格原文，先編輯內容，然後再部署到github上。

四、更換主題

現在我們已經看見個人部落格的雛形了，但是現在的部落格網頁一點也不高大上。為了讓它看起來更美觀一些，我們可以為其更換主題（當然也可以自己在預設主題下自己編寫美化部落格介面，可是我還不太會前端，以後再突破吧）。這裡以使用github上的next主題為例：

1.建立next資料夾

切換到本地部落格根目錄下，在主題檔案thems下建立一個新資料夾next存放即將下載的next主題

mkdir themes/next  

2.下載主題Next

curl -s [https://api.github.com/repos/iissnan/hexo-theme-next/releases/latest](https://api.github.com/repos/iissnan/hexo-theme-next/releases/latest) | grep tarball_url | cut -d '"' -f 4 | wget -i - -O- | tar -zx -C themes/next --strip-components=1

下載成之後我們會看到next的主題已經存在thems裡瞭如下：

3.修改部落格配置檔案，更換主題配置

修改部落格根目錄(不是next主題)下的_config.yml檔案，搜尋theme欄位，並將其值修改為next。

然後在控制檯下輸入如下命令：

hexo clean  //清理快取

hexo g    //重新生成部落格程式碼

hexo d   //部署到本地

五、部落格網站美化

終於我們的部落格也算像點樣子了，如果你和我一樣是個完美主義者，那我們來繼續美化它吧。這需要我們對部落格中的各種配置進行修改。

首先說明一下：在Hexo中有兩份主要的配置檔案，其名稱都是 _config.yml。 其中，一份位於站點根目錄下，主要包含 Hexo本身的配置；另一份位於主題目錄下，這份配置由主題作者提供，主要用於配置主題相關的選項。

1.站點配置：

在本地的部落格根目錄下找到_config.yml，用編輯器開啟，如下：

這裡可以修改部落格網站的標題、描述，語言等屬性，上面更換主題也是在這個檔案中修改的。大家可以在這裡稍作設定。

2.主題設定

3.更多主題選擇

next只是眾多Hexo主題的一種，還有很多優秀的主題可供我們選擇，參考以上的更換及配置方法我們就可以進一步美化我們的個人部落格網站了。
更多主題選擇：https://github.com/hexojs/hexo/wiki/Themes

六、在不同電腦管理hexo部落格

其實，這也是我在使用Hexo搭建部落格遇到的一個問題，如果我們檢查自己部落格在Github上的檔案就會發現，github倉庫裡的檔案和我們本地部落格站點的資料夾是不同的，確切來說是少了很多內容。如果我們想在不同的電腦上管理自己的部落格，就必須有原始檔存在遠端供我們隨時下載、然後修改後重新部署到遠端。

我們要理解這樣一個過程：hexo -d是把本地部落格原始檔生成的靜態網頁檔案同步到github上，實現部署。但是部落格網站的原始檔仍需要我們自己儲存。這裡主要有兩種思路可以選擇：

1.在github存放我們部落格靜態網頁檔案的倉庫裡另建分支brach，單獨用於存放原始檔。
2.將本地部落格檔案存放在碼雲上。

這些都是關於git的操作，所以這裡不用細說了。單對於這兩種方法來說，我更傾向於第二種。因為畢竟這些都是我們搭建個人部落格的原始檔，將來還要在網站上發表文章，很多資料都在這裡。使用碼雲我們可以建立私有倉庫，將這些原始檔私有存放更好一些，而且原始檔和靜態部落格網頁檔案分開存放也避免使用分支頻繁切換。

七、遇到問題

1.修改了配置，網站沒有變化

這種情況，大多因為修改後配置後我們直接部署，沒有執行hexo clean。

2.程式碼無法高亮顯示

在Hexo的next主題下，我們使用markDown編輯文章，如果程式碼無法高亮，這有可能是我們沒有在標記語言後新增語言型別，我需要在新增程式碼片段的時候使用如下的樣式：

類似其他語言用：java、python…

八、其他方案

還有一種搭建部落格網站的方案是Jekyll，還沒有細緻研究呢，先記在這裡為以後擴充套件思路。

終於寫完了，祝新的一年越來越好，加油！- 2018-02-13

期待遇見更多志同道合的小夥伴，歡迎加入QQ群：681732945