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