OS X 下使用 Hexo 和 Coding Pages 搭建靜態博客

Hexo 是一款基於 Node.js 的靜態博客框架, 目前在 GitHub 上已有 9133 star 和 1499 fork。Hexo 生成的靜態頁面能夠部署在 Github 或 Coding 上，而且可以免費綁定本身的域名，能夠用來很方便地搭建我的博客。

---

1，Git 安裝

搭建博客須要用到 git，下面這條命令可查看本機是否已安裝 git，若未安裝可參考這篇博文進行安裝。

git --version
複製代碼

2，安裝 Node.js

Mac下最簡單的作法即是直接下載pkg文件進行安裝，最新版本的下載地址以下，選擇後綴爲pkg的文件下載安裝便可：   nodejs.org/download/re…   完裝完成後，要將如下路徑計入你的系統環境變量 /usr/local/bin，步驟以下： 用vim 打開該文件：

cd; vi .bash_profile
複製代碼

在文件中加入該語句：

export PATH=/usr/local/bin:$PATH
複製代碼

並保存退出，從新加載shell讓設置的環境變量生效：

source ~/.bash_profile
複製代碼

3，將 npm 的源替換成淘寶的源

因爲衆所周知的緣由，國內訪問官方默認 npmjs.org 源速度不是十分理想，因此建議切換成國內的，利用如下命令將其替換爲淘寶的 npm 源：

npm config set registry http://registry.npm.taobao.org/
複製代碼

4，安裝 Hexo

利用 npm 命令安裝：

sudo npm install -g hexo
複製代碼

由於可能有文件讀寫權限的問題，這裏推薦用 sudo，輸入密碼後會開始安裝，時間可能比較長，耐心等待，若是長時間卡在某一步 Ctrl + C 終止當前任務後重試便可。

5，本地創建博客

安裝完成後，新建一個目錄如 myblog 用於存放博客，切換到該目錄下執行如下指令，Hexo 即會在目標文件夾初步生成博客所須要的全部文件：

hexo init
複製代碼

而後切換到該目錄下執行以下命令，安裝所須要的依賴：

sudo npm install
複製代碼

網上有大量開發者們分享的模板可供選擇使用，將它們的 Git 倉庫 Clone 之後放到博客目錄下的 themes 文件夾中便可：   Github Hexo Themes   有哪些好看的 Hexo 主題？   本博客的搭建我選擇了使用該主題：   https://github.com/forsigner/fexo   在這裏對原做者 forsigner 表示感謝，🙏

6，安裝 Server 組件

保持在本地博客路徑下，在終端中執行以下命令：

hexo
複製代碼

由於這並非一個完整的命令，因此這時咱們能夠看到 hexo 輸出的幫助信息，以下圖所示：

咱們能夠在左邊的 Commands 列表中查看咱們須要的命令是否已成功安裝，由於某些版本的 Hexo 的 Server 模塊須要獨立安裝因此這裏咱們並無看到 server 命令，咱們能夠執行下面這條命令來進行安裝，若是有的話能夠跳過這一步：

sudo npm install hexo-server --save
複製代碼

若是安裝過程當中出現一些問題致使某些模塊沒有安裝成功的也能夠經過相似的方式單獨安裝某個模塊進行修復。

7，安裝 RSS 插件（可忽略）

到博客所在目錄 myblog 下，利用該命令安裝 RSS 插件，暫時不需添加 RSS 功能的同窗可忽略該步驟：

sudo npm install hexo-generator-feed --save
複製代碼

編輯 myblog 目錄下的 _config.yml，添加以下代碼開啓 RSS 功能：

rss: /atom.xml
複製代碼

RSS 地址保持默認便可，不須要多作修改。

8，本地效果預覽

在終端使用 cd 命令切換到博客所在目錄 myblog，執行以下命令生成靜態博客頁面並啓動本地服務器，若成功可在瀏覽器中訪問 http://localhost:4000/ 進行預覽。

hexo generate
hexo server
複製代碼

或者以下的縮寫形式也能夠：

hexo g
hexo s
複製代碼

9，部署到 Coding Pages

在 Coding 新建一個項目，假設爲 myblog，而後修改本地博客目錄下的 _config.yml 文件，根據官方文檔的描述，修改如下幾個參數，這些參數通常在文件底部：

deploy:
type: git               #部署方式，這裏咱們用的是Coding的Git
repo: <repository url>  #倉庫地址，例如個人是git@git.coding.net:eyrefree/myblog.git   
branch: [branch]        #分支名，可任意填寫，我填寫的是master
message: [message]      #可不填，這是顯示在提交記錄裏的描述信息，默認爲日期
複製代碼

參數修改完成後，咱們須要在終端中切換到博客所在目錄安裝 deploy 組建，執行如下命令將生成的博客靜態頁面 push 到咱們上面在 Coding 建立的 myblog 倉庫中：

sudo npm install hexo-deployer-git --save
複製代碼

而後執行依次執行清理命令：

hexo clean
複製代碼

生成命令：

hexo g
複製代碼

部署命令：

hexo d
複製代碼

若是在 _config.yml 的 repo 處填寫的倉庫地址是 https 形式的，在部署時可能須要輸入你的 Coding 帳號和密碼。   而後切換到該項目的 Pages 標籤，開啓 pages 服務，分支名填寫爲咱們在_config.yml 文件中設定的分支，個人是 master。

10，服務器效果預覽

pages 服務開啓完成後，Coding 會提供一個相似 {user_name}.coding.me/{project_name} 的連接用於訪問，例如用戶名爲 eyrefree 項目名爲 myblog 的連接應該是：

http://eyrefree.coding.me/myblog
複製代碼

訪問該連接便可進行預覽，因爲咱們引用的資源不少是和域名相關的，致使這裏可能會有資源加載失敗的狀況，只能出現部分文字，接下來咱們將域名綁定後便可恢復正常。

11，綁定域名

默認提供的連接可能過長或者不便於平常使用，咱們也能夠綁定本身的域名。   首先，須要提早準備一個域名，而後打開本身的域名控制面板，新建一個 CNAME 解析到 {user_name}.coding.me，例如個人是將 www.eyrefree.org 解析到 eyrefree.coding.me；   而後，打開 Coding 項目頁面切換到 pages 項，填入剛纔的設置解析的域名 www.eyrefree.org，點擊「添加域名綁定」按鈕便可，在瀏覽器中直接訪問 www.eyrefree.org 就能成功打開。   有時可能因爲緩存或者解析時間的問題，稍等片刻便可。

12，編寫博文

接下來就是平常的博文編寫啦，這裏是使用 markdown 格式的，編寫完成後添加到 source/_posts 目錄下而後按照第 8 步的方法部署到 Coding 服務器便可，具體可參考這篇博文，Markdown 的一些語法能夠參考：   wowubuntu.com/markdown/

13，常見問題

若執行 hexo 命令時出現以下警告信息：

{ [Error: Cannot find module './build/Release/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }
{ [Error: Cannot find module './build/default/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }
{ [Error: Cannot find module './build/Debug/DTraceProviderBindings'] code: 'MODULE_NOT_FOUND' }
複製代碼

能夠嘗試執行如下命令修復：

sudo npm install hexo --no-optional
複製代碼

14，備註

嘛，大概就是這些內容了，有遺漏的話會繼續補充，😝。個人博客是用 Hexo 生成的使用了 Fexo 模版，開啓了 Google 統計，Disqus 評論，RSS 訂閱，站內搜索等，原文參見個人博客： www.eyrefree.org/2016/03/23/…

---

若有任何知識產權、版權問題或理論錯誤，還請指正。 https://juejin.im/post/5a3210a76fb9a0450f21f449 轉載請註明原做者及以上信息。