Hexo快速搭建靜態博客並實現遠程VPS自動部署

這篇文章將如何搭建hexo，以及如何經過git webhooks實現遠程vps的自動部署

這篇文件適合的條件：

1. 簡單的用於我的博客、公司博客展現，hexo的定位是靜態博客，要實現動態服務器的功能並不適合
2. 有本身私有的服務器、vps、域名
3. git倉庫，Github或國內的Coding.net

hexo本地部署

流程：先在本機搭建好hexo環境，push到git倉庫，再部署到服務器上。

第一步，安裝hexo命令行工具，這個工具在服務器端也須要執行安裝

1	npm install hexo-cli -g

 

第二部，生成一個本地hexo項目

1 2 3 4 5 6 7

# 建立blog目錄，並初始化hexo項目 hexo init blog cd blog # 安裝hexo依賴，hexo是基於nodejs開發的，npm是nodejs的包管理工具 npm install # 啓動本地服務，打開localhost:4000測試是否成功 hexo server

 

第三部，新建一篇文章

1 2 3

hexo new "My First Post" # 啓動本地服務，查看效果 hexo server

 

這樣，在/source/_posts目錄下就生成了了my-first-post.md這樣一個文件，.md是markdown文件的擴展名，咱們可使用本身喜歡的工具去編輯markdown，好比Sublime Text。

這裏推薦一個Sublime Text插件，給人家免費推廣了，OmniMarkupPreviewer。

提交到遠程倉庫

你得須要一個遠程倉庫託管代碼，可使用Github或國內的Coding.net，由於我有些項目屬於私有項目，Github開私有項目是須要收費的，因此我選擇的是國內的Coding.net，速度也比較理想。

先在coding上新建一個項目名爲hexo，並拷貝倉庫ssh地址（使用ssh須要配置ssh公鑰和私鑰，若是不會配能夠google或使用http地址）。

提示，若是須要經過webhooks實現服務器自動化部署，推薦使用ssh會更方便一些

而後在hexo目錄初始化本地倉庫並提交到coding

1 2 3 4 5

git init git remote add origin git@git.coding.net:lianer/hexo-blog.git git add . git commit -m 'publish' git push origin master

這時候coding上已經有我提交的代碼了。

服務器環境配置

登陸你本身的vps服務器，安裝好nodejs,git,nginx，我的服務器仍是推薦使用ubuntu，安裝這些工具很容易，具體百度或谷歌。

我在公司搭的hexo，公司服務器使用的是centos，git我是請運維同窗幫我安裝的，比較麻煩。

將代碼從遠程倉庫拉下來

一樣的服務器也須要配置ssh才能使用ssh地址，不然仍是使用http地址吧。

在這裏，我直接把項目放在root目錄下了。

1 2 3 4

mkdir hexo git init git remote add origin git@git.coding.net:lianer/hexo-blog.git git pull origin master

安裝hexo模塊

1 2 3

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

hexo靜態編譯

1

hexo g

這一步會在hexo目錄下生成一個public目錄，這裏面就是編譯後的靜態文件目錄，
其實這時候直接訪問裏面的html文件便可看到完整的效果了，只不過還須要一個服務來運行它。

配置nginx

進入nginx服務配置文件目錄，該目錄下應該已經有一個default.conf，不去管它，另外新建一個配置文件

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

在hexo.conf中輸入如下內容並保存，注意細節，不要少分號。

1 2 3 4 5 6 7 8

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

重載nginx，使配置生效。

1	nginx -s reload

而後就能夠經過 http://imlianer.com 訪問hexo了。

Git WebHooks 自動化部署

是否是以爲每次寫完文章還要登陸服務器去執行一次git pull很麻煩？

ok，git有不少鉤子，能夠在倉庫發生變化的時候觸發，相似js中的事件。
WebHooks就是在你本地執行git push的時候，
遠程倉庫(coding)會檢測到倉庫的變化，併發送一個請求到咱們配置好的WebHooks。

實現WebHooks自動化部署的推薦條件：

1. 服務器端配置ssh認證
2. 服務器端配置nodejs服務，接收Coding發來的請求

遠程倉庫配置WebHooks

Coding WebHooks 配置界面

這張圖的配置的意思是：當倉庫發生push的時候，會發送一個請求到http://imlianer.com/webhooks/push/123456。

爲了服務端的簡易處理，這裏沒有使用token，而是將url地址當作token，123456就充當了token的角色。

到這，倉庫這邊的配置就完成了，接下來的問題就是服務器如何接收這個請求並從新部署hexo了。

服務器配置響應WebHooks的服務

我使用的是nodejs，其它語言也能夠。

在本地hexo目錄中新建一個webhooks.js文件，內容以下：

1 2 3 4 5 6 7 8 9 10 11

var http = require('http') var exec = require('child_process').exec   http.createServer( function (req, res) { // 該路徑與WebHooks中的路徑部分須要徹底匹配，實現簡易的受權認證。 if(req.url === '/webhooks/push/123456'){ // 若是url匹配，表示認證經過，則執行 sh ./deploy.sh exec( 'sh ./deploy.sh') } res.end() }).listen( 4002)

這段代碼就能啓動一個nodejs服務，監聽4002端口。
當請求過來的url徹底匹配的時候，執行deploy.sh。

再新建一個文件deploy.sh處理部署相關腳本，內容以下：

1 2	git pull origin master hexo g

將新增的webhooks.js與deploy.sh兩個文件push到服務器。

而後在服務器中啓動nodejs服務監聽webhooks

1	node ./webhooks.js

 

這樣，當你本地提交文章的時候，服務器就會自動部署啦。

若是你使用上面的命令運行nodejs服務，nodejs服務會在前臺運行，
可使用pm2使nodejs運行在後臺。