原文 : 與佳期的個人博客(gonghonglou.com)
這是一篇詳細(xì)文章來講述用Mac搭建Hexo博客于Github上的完整歷程， 也是踩了無數(shù)的坑搭起來的，現(xiàn)在寫下些經(jīng)驗來分享，希望能幫大家少踩些坑。
曾買過一款阿里的云虛擬主機(jī)，后來才發(fā)現(xiàn)不能自己裝軟件只能上傳網(wǎng)站程序，除非另買ECS，對于第一個月的實習(xí)工資還沒拿到手的我想想還是算了，先用Wordpress搭起來玩玩吧。然而在上傳網(wǎng)站程序中幾次失敗，本就覺得沒勁，遂一怒轉(zhuǎn)向Github。好了，廢話少說，開始吧。
環(huán)境配置
Hexo官網(wǎng)上本就有對Hexo安裝及使用的詳細(xì)介紹，墻裂推薦。這里來講述自己安裝的親身步驟，或有區(qū)別。
1.Node.js
用來生成靜態(tài)頁面。移步Node.js官網(wǎng)，下載v5.5.0 Stable 一路安裝即可。
2.Git
用來將本地Hexo內(nèi)容提交到Github上。Xcode自帶Git，這里不再贅述。如果沒有Xcode可以參考Hexo官網(wǎng)上的安裝方法。
安裝Hexo
當(dāng)Node.js和Git都安裝好后就可以正式安裝Hexo了，終端執(zhí)行如下命令：
$ sudo npm install -g hexo
輸入管理員密碼（Mac登錄密碼）即開始安裝 (sudo:linux系統(tǒng)管理指令 -g:全局安裝)
注意坑一：Hexo官網(wǎng)上的安裝命令是
$ npm install -g hexo-cli，安裝時不要忘記前面加上sudo，否則會因為權(quán)限問題報錯。
初始化
終端cd到一個你選定的目錄，執(zhí)行hexo init命令：
$ hexo init blog
blog是你建立的文件夾名稱。cd到blog文件夾下，執(zhí)行如下命令，安裝npm：
$ npm install
執(zhí)行如下命令，開啟hexo服務(wù)器：
$ hexo s
此時，瀏覽器中打開網(wǎng)址http://localhost:4000，能看到如下頁面：
本地設(shè)置好后，接下來開始關(guān)聯(lián)Github。
關(guān)聯(lián)Github
1.創(chuàng)建倉庫
登錄你的Github帳號，新建倉庫，名為用戶名.github.io固定寫法，如gonghonglou.github.io即下圖中1所示：
本地的blog文件夾下內(nèi)容為：
_config.yml
db.json
node_modules
package.json
scaffolds
source
themes
終端cd到blog文件夾下，vim打開_config.yml，命令如下：
$ vim _config.yml
打開后往下滑到最后，修改成下邊的樣子：
deploy:
type: git
repository: https://github.com/gonghonglou/gonghonglou.github.io.git
branch: master
你需要將repository后gonghonglou換成你自己的用戶名，地址在上圖2位置獲取。hexo 3.1.1版本后type:值為git。
注意坑二：在配置所有的
_config.yml文件時（包括theme中的），在所有的冒號:后邊都要加一個空格，否則執(zhí)行hexo命令會報錯，切記 切記
在blog文件夾目錄下執(zhí)行生成靜態(tài)頁面命令：
$ hexo generate 或者：hexo g
此時若出現(xiàn)如下報錯：
ERROR Local hexo not found in ~/blog
ERROR Try runing: 'npm install hexo --save'
則執(zhí)行命令：
$ npm install hexo --save
若無報錯，自行忽略此步驟。
再執(zhí)行配置命令：
$ hexo deploy 或者：hexo d
注意坑三：若執(zhí)行命令
hexo deploy仍然報錯：無法連接git或找不到git，則執(zhí)行如下命令來安裝hexo-deployer-git：
$ npm install hexo-deployer-git --save
再次執(zhí)行hexo generate和hexo deploy命令。
若你未關(guān)聯(lián)Github，則執(zhí)行hexo deploy命令時終端會提示你輸入Github的用戶名和密碼，即
Username for 'https://github.com':
Password for 'https://github.com':
hexo deploy命令執(zhí)行成功后，瀏覽器中打開網(wǎng)址http://gonghonglou.github.io（將gonghonglou換成你的用戶名）能看到和打開http://localhost:4000時一樣的頁面。
為避免每次輸入Github用戶名和密碼的麻煩，可參照第二節(jié)方法
2.添加ssh key到Github
#1.1.檢查SSH keys是否存在Github
執(zhí)行如下命令，檢查SSH keys是否存在。如果有文件id_rsa.pub或id_dsa.pub，則直接進(jìn)入步驟1.3將SSH key添加到Github中，否則進(jìn)入下一步生成SSH key。
$ ls -al ~/.ssh
1.2.生成新的ssh key
執(zhí)行如下命令生成public/private rsa key pair，注意將your_email@example.com換成你自己注冊Github的郵箱地址。
$ ssh-keygen -t rsa -C "your_email@example.com"
默認(rèn)會在相應(yīng)路徑下（~/.ssh/id_rsa.pub）生成id_rsa和id_rsa.pub兩個文件。
1.3.將ssh key添加到Github中
Find前往文件夾~/.ssh/id_rsa.pub打開id_rsa.pub文件，里面的信息即為SSH key，將這些信息復(fù)制到Github的Add SSH key頁面即可。
進(jìn)入Github --> Settings --> SSH keys --> add SSH key:
Title里任意添一個標(biāo)題，將復(fù)制的內(nèi)容粘貼到Key里，點擊下方Add key綠色按鈕即可。
3.發(fā)布文章
終端cd到blog文件夾下，執(zhí)行如下命令新建文章：
hexo new "postName"
名為postName.md的文件會建在目錄/blog/source/_posts下。你當(dāng)然可以用vim來編輯文章。我在用Mou編輯器，支持預(yù)覽，雖然其預(yù)覽主題并非我喜歡，如果你有好用的markdown編輯器請推薦給我，感激不盡！
文章編輯完成后，終端cd到blog文件夾下，執(zhí)行如下命令來發(fā)布：
hexo generate //生成靜態(tài)頁面
hexo deploy //將文章部署到Github
至此，Mac上搭建基于Github的Hexo博客就完成了。下面的內(nèi)容是介紹安裝theme，添加評論功能和綁定個人域名，如果有興趣且還有耐心的話，請繼續(xù)吧。
安裝theme
你可以到Hexo官網(wǎng)主題頁去搜尋自己喜歡的theme。這里以hexo-theme-next為例
終端cd到 blog 目錄下執(zhí)行如下命令：
$ git clone https://github.com/iissnan/hexo-theme-next themes/next
將blog目錄下_config.yml里theme的名稱landscape修改為next
終端cd到blog目錄下執(zhí)行如下命令(每次部署文章的步驟)：
$ hexo clean //清除緩存文件 (db.json) 和已生成的靜態(tài)文件 (public)
$ hexo g //生成緩存和靜態(tài)文件
$ hexo d //重新部署到服務(wù)器
至于更改theme內(nèi)容，比如名稱，描述，頭像等去修改blog/_config.yml文件和blog/themes/next/_config.yml文件中對應(yīng)的屬性名稱即可， 不要忘記冒號:后加空格。 NexT 使用文檔里有極詳細(xì)的介紹。
綁定個人域名
現(xiàn)在使用的域名是Github提供的二級域名，也可以綁定為自己的個性域名。購買域名，可以到GoDaddy官網(wǎng)，網(wǎng)友親切稱呼為：狗爹，也可以到阿里萬網(wǎng)購買。我是在萬網(wǎng)買的，可直接在其網(wǎng)站做域名解析。
1.Github端
在/blog/themes/landscape/source目錄下新建文件名為：CNAME文件，注意沒有后綴名！直接將自己的域名如：gonghonglou.com寫入。
終端cd到blog目錄下執(zhí)行如下命令重新部署：
$ hexo clean
$ hexo g
$ hexo d
注意坑四：網(wǎng)上許多都是說在Github上直接新建
CNAME文件，如果這樣的話，在你下一次執(zhí)行hexo d部署命令后CNAME文件就消失了，因為本地沒有此文件嘛。
2.域名解析
如果將域名指向一個域名，實現(xiàn)與被指向域名相同的訪問效果，需要增加CNAME記錄。登錄萬網(wǎng)，在你購買的域名后邊點擊：解析 --> 添加解析
記錄類型：CNAME
主機(jī)記錄：將域名解析為example.com（不帶www），填寫@或者不填寫
記錄值：gonghonglou.github.io. (不要忘記最后的.，gonghonglou改為你自己的用戶名)，點擊保存即可，如下圖：
此時，點擊訪問http://gonghonglou.com和訪問http://gonghonglou.github.io效果一致，大功告成！
------11.10更新 以下------------------------------------------------
1、解決 deploy 后博客空白問題
昨晚更新了一下 blog 做了個部署，結(jié)果blog就掛了，打開 gonghonglou.com 頁面顯示一片空白。然而 hexo s 開啟本地服務(wù)器 localhost:4000 訪問是沒問題的。
上網(wǎng)查了一下，原來是 GitHub Pages 禁止了 source/vendors 目錄的訪問。Github 在 11 月 3 日更新了版本。其中包括升級了 Jekyll 到 3.3。Jekyll 為了加快構(gòu)建速度，忽略 vendor 和 node_modules 文件夾。所以部署到 GitHub 后，識別不到本地下的的這個文件夾 blog/themes/next/source/vendor，你只需要給這個文件夾換個名字再重新部署一次就 OK 了。nexT 在 GitHub 上的 isusses 已經(jīng)給出了解決方案：#1214
還有另一種解決方案就是升級 nexT 主題，cd 到 blog/themes/next/ 下執(zhí)行命令 git pull 更新。
然而，有可能升級后多說評論等第三方工具會失效，慎用。
2、將個人博客同時部署到 GitHub 和 Coding
1、首先到 Coding 上注冊并開一個項目，項目名稱和用戶個性后綴相同（方便二級域名訪問博客），拿到項目的 https 地址
2、打開本地 blog 目錄下的 _config.yml 文件，修改如下
deploy:
type: git
repository:
github: https://github.com/gonghonglou/gonghonglou.github.io.git
coding: https://git.coding.net/gonghonglou/gonghonglou.git
branch: master
3、cd 到本地 blog/source 目錄下執(zhí)行如下命令新建 Staticfile 文件
$ touch Staticfile #名字必須是Staticfile
原因是 coding.net 需要以這個文件來作為靜態(tài)文件部署的標(biāo)志，就是說看到這個 Staticfile 就知道按照靜態(tài)文件來發(fā)布。
4、執(zhí)行發(fā)布命令 hexo g 、 hexo d
5、個人域名添加兩條 CNAME 解析。將 gonghonglou.github.io. 解析為 [海外] ，將 gonghonglou.coding.me. 解析為 [默認(rèn)]
這樣就是為了從國內(nèi)訪問 gonghonglou.com 就是訪問 Coding 上的博客項目，從國外訪問 gonghonglou.com 就是訪問 GitHub 上的博客項目。
6、到 Coding 上的博客項目主頁，點擊 Pages服務(wù) 輸入部署分支 master 立即開啟
這樣就可以訪問自己在 Coding 上的個人博客了 gonghonglou.coding.me/gonghonglou 如果像這樣你的用戶后綴名與博客項目名稱相同你還可以省略項目名稱直接訪問 gonghonglou.coding.me
7、添加域名綁定，輸入個人域名就 OK 了，可能需要耐心等待幾分鐘，這樣在國內(nèi)訪問自己的博客就快得多了。
試了一下在國內(nèi)訪問 gonghonglou.com 攔不住 要飛起來了??
------11.10更新 以上------------------------------------------------
后記
以上便是我搭建與佳期的個人博客(gonghonglou.com)的全過程，希望對大家有所幫助，歡迎吐槽～
轉(zhuǎn)載請保留原文地址：http://gonghonglou.com/2016/02/03/firstblog
