摘要：提示，如果需要通過實(shí)現(xiàn)服務(wù)器自動(dòng)化部署，推薦使用會(huì)更方便一些然后在目錄初始化本地倉庫并提交到這時(shí)候上已經(jīng)有我提交的代碼了。再新建一個(gè)文件處理部署相關(guān)腳本，內(nèi)容如下將新增的與兩個(gè)文件到服務(wù)器。

這篇文章將如何搭建hexo，以及如何通過git webhooks實(shí)現(xiàn)遠(yuǎn)程vps的自動(dòng)部署

這篇文章適合的條件：

簡單的用于個(gè)人博客、公司博客展示，hexo的定位是靜態(tài)博客，要實(shí)現(xiàn)動(dòng)態(tài)服務(wù)器的功能并不適合

有自己私有的服務(wù)器、vps、域名

git倉庫，Github或國內(nèi)的Coding.net

流程：先在本機(jī)搭建好hexo環(huán)境，push到git倉庫，再部署到服務(wù)器上。

第一步，安裝hexo命令行工具，這個(gè)工具在服務(wù)器端也需要執(zhí)行安裝

npm install hexo-cli -g

第二部，生成一個(gè)本地hexo項(xiàng)目

# 創(chuàng)建blog目錄，并初始化hexo項(xiàng)目
hexo init blog
cd blog
# 安裝hexo依賴，hexo是基于nodejs開發(fā)的，npm是nodejs的包管理工具
npm install
# 啟動(dòng)本地服務(wù)，打開localhost:4000測試是否成功
hexo server

第三部，新建一篇文章

hexo new "My First Post"
# 啟動(dòng)本地服務(wù)，查看效果
hexo server

這樣，在/source/_posts目錄下就生成了了my-first-post.md這樣一個(gè)文件，.md是markdown文件的擴(kuò)展名，我們可以使用自己喜歡的工具去編輯markdown，比如Sublime Text。

這里推薦一個(gè)Sublime Text插件，給人家免費(fèi)推廣了，OmniMarkupPreviewer。

你得需要一個(gè)遠(yuǎn)程倉庫托管代碼，可以使用Github或國內(nèi)的Coding.net，因?yàn)槲矣行╉?xiàng)目屬于私有項(xiàng)目，Github開私有項(xiàng)目是需要收費(fèi)的，所以我選擇的是國內(nèi)的Coding.net，速度也比較理想。

先在coding上新建一個(gè)項(xiàng)目名為hexo，并拷貝倉庫ssh地址（使用ssh需要配置ssh公鑰和私鑰，如果不會(huì)配可以google或使用http地址）。

提示，如果需要通過webhooks實(shí)現(xiàn)服務(wù)器自動(dòng)化部署，推薦使用ssh會(huì)更方便一些

然后在hexo目錄初始化本地倉庫并提交到coding

git init
git remote add origin [email protected]:lianer/hexo-blog.git
git add .
git commit -m "publish"
git push origin master

這時(shí)候coding上已經(jīng)有我提交的代碼了。

登錄你自己的vps服務(wù)器，安裝好nodejs,git,nginx，個(gè)人服務(wù)器還是推薦使用ubuntu，安裝這些工具很容易，具體百度或谷歌。

我在公司搭的hexo，公司服務(wù)器使用的是centos，git我是請(qǐng)運(yùn)維同學(xué)幫我安裝的，比較麻煩。

同樣的服務(wù)器也需要配置ssh才能使用ssh地址，否則還是使用http地址吧。

在這里，我直接把項(xiàng)目放在root目錄下了。

mkdir hexo
git init
git remote add origin [email protected]:lianer/hexo-blog.git
git pull origin master

cd ~/hexo
npm install hexo-cli -g
npm install

hexo g

這一步會(huì)在hexo目錄下生成一個(gè)public目錄，這里面就是編譯后的靜態(tài)文件目錄，
其實(shí)這時(shí)候直接訪問里面的html文件即可看到完整的效果了，只不過還需要一個(gè)服務(wù)來運(yùn)行它。

進(jìn)入nginx服務(wù)配置文件目錄，該目錄下應(yīng)該已經(jīng)有一個(gè)default.conf，不去管它，另外新建一個(gè)配置文件

cd /etc/nginx/conf.d/
vi hexo.conf

在hexo.conf中輸入以下內(nèi)容并保存，注意細(xì)節(jié)，不要少分號(hào)。

server {
    listen          80;  # 監(jiān)聽端口
    server_name     imlianer.com www.imlianer.com;  # 你的域名
    location / {
        root        ~/hexo;
        index        index.html;
    }
}

重載nginx，使配置生效。

nginx -s reload

然后就可以通過 http://imlianer.com 訪問hexo了。

是不是覺得每次寫完文章還要登錄服務(wù)器去執(zhí)行一次git pull很麻煩？

ok，git有很多鉤子，可以在倉庫發(fā)生變化的時(shí)候觸發(fā)，類似js中的事件。
WebHooks就是在你本地執(zhí)行g(shù)it push的時(shí)候，
遠(yuǎn)程倉庫(coding)會(huì)檢測到倉庫的變化，并發(fā)送一個(gè)請(qǐng)求到我們配置好的WebHooks。

實(shí)現(xiàn)WebHooks自動(dòng)化部署的推薦條件：

服務(wù)器端配置ssh認(rèn)證

服務(wù)器端配置nodejs服務(wù)，接收Coding發(fā)來的請(qǐng)求

Coding WebHooks 配置界面

這張圖的配置的意思是：當(dāng)倉庫發(fā)生push的時(shí)候，會(huì)發(fā)送一個(gè)請(qǐng)求到http://imlianer.com/webhooks/...。

為了服務(wù)端的簡易處理，這里沒有使用token，而是將url地址當(dāng)做token，123456就充當(dāng)了token的角色。

到這，倉庫這邊的配置就完成了，接下來的問題就是服務(wù)器如何接收這個(gè)請(qǐng)求并重新部署hexo了。

我使用的是nodejs，其它語言也可以。

在本地hexo目錄中新建一個(gè)webhooks.js文件，內(nèi)容如下：

var http = require("http")
var exec = require("child_process").exec

http.createServer(function (req, res) {
    // 該路徑與WebHooks中的路徑部分需要完全匹配，實(shí)現(xiàn)簡易的授權(quán)認(rèn)證。
    if(req.url === "/webhooks/push/123456"){
        // 如果url匹配，表示認(rèn)證通過，則執(zhí)行 sh ./deploy.sh
        exec("sh ./deploy.sh")
    }
    res.end()
}).listen(4002)

這段代碼就能啟動(dòng)一個(gè)nodejs服務(wù)，監(jiān)聽4002端口。
當(dāng)請(qǐng)求過來的url完全匹配的時(shí)候，執(zhí)行deploy.sh。

再新建一個(gè)文件deploy.sh處理部署相關(guān)腳本，內(nèi)容如下：

git pull origin master
hexo g

將新增的webhooks.js與deploy.sh兩個(gè)文件push到服務(wù)器。

然后在服務(wù)器中啟動(dòng)nodejs服務(wù)監(jiān)聽webhooks

node ./webhooks.js

這樣，當(dāng)你本地提交文章的時(shí)候，服務(wù)器就會(huì)自動(dòng)部署啦。

如果你使用上面的命令運(yùn)行nodejs服務(wù)，nodejs服務(wù)會(huì)在前臺(tái)運(yùn)行，
可以使用pm2使nodejs運(yùn)行在后臺(tái)。