以前用Wordpress搭建過一個(gè)博客網(wǎng)站表制，Wordpress雖然安裝簡單，功能強(qiáng)大埋泵，但是對(duì)于個(gè)人建站來說有點(diǎn)復(fù)雜了幔欧。最近發(fā)現(xiàn)用Hexo建站很流行，于是將網(wǎng)站從Wordpress遷移到了Hexo丽声。
Hexo是如何工作的礁蔗？
首先，Hexo是一個(gè)搭建靜態(tài)網(wǎng)站的工具雁社，所以Hexo生成的文章頁面都是靜態(tài)頁面浴井。根據(jù)我的總結(jié)，用Hexo發(fā)布一篇文章的大致流程如下：
雖然Hexo還有很多豐富強(qiáng)大的功能歧胁，但以上流程可以很好幫助我們大致理解Hexo這個(gè)工具滋饲，很明顯它和Wordpress之類的建站工具不太一樣，Hexo更多的事都是在“本地”操作的喊巍，因?yàn)樯傻氖庆o態(tài)頁面屠缭，所以你網(wǎng)站所在的服務(wù)器只需要存儲(chǔ)Hexo生成的結(jié)果即可。
Hexo + Github + 阿里云服務(wù)器
安裝配置
請(qǐng)?jiān)谀阕约旱碾娔X上安裝好Node.js和Hexo（你在哪兒寫Markdown就把Hexo安裝到哪里）崭参。Hexo的下載和安裝可以直接參考官方文檔呵曹，此處略過。如何配置Hexo以及用Hexo生成一篇文章也請(qǐng)參考官方文檔何暮，比較簡單奄喂。
Hexo目錄放到Github
建議將你的Hexo目錄放到github上管理，可以在github上新建一個(gè)private的repo海洼。Hexo生成目錄的時(shí)候會(huì)自動(dòng)包含一個(gè).gitignore 文件跨新，請(qǐng)保留這個(gè)文件。如何在Github創(chuàng)建repo并和本地同步坏逢，請(qǐng)單獨(dú)搜索相關(guān)教程域帐，比較常規(guī)。
網(wǎng)站目錄托管到Github
注意是整，我們需要另外一個(gè)Git Repo來存放你的網(wǎng)站文件肖揣，這個(gè)和剛才的Hexo目錄并不是一回事，同樣我們需要在Github上新建一個(gè)repo浮入，然后在本地的Hexo配置文件_config.yml中將配置修改成如下的樣子龙优。參考：https://hexo.io/zh-cn/docs/one-command-deployment.html
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
type: git
repo: git@github.com:xxxxxxxx/blog.git
branch: master
這樣當(dāng)你每次用Hexo生成好靜態(tài)文件后，可以通過* hexo d *命令一鍵將你的網(wǎng)站上傳到github事秀。
自動(dòng)部署到個(gè)人服務(wù)器
你的整個(gè)靜態(tài)網(wǎng)站目前就是github上的一個(gè)repo彤断，你希望將其部署到你的服務(wù)器上野舶，所以你需要一種方式將其自動(dòng)部署到服務(wù)器上，這個(gè)過程是怎么實(shí)現(xiàn)的呢瓦糟？我們可以通過如下方式完成：
- 在服務(wù)器端 clone 下來你的repo
- 在github上配置webhook筒愚，指向你的server
- 在server端監(jiān)聽webhook的事件
- 監(jiān)聽到事件之后自動(dòng)運(yùn)行g(shù)it pull
1. 在服務(wù)器端 clone 下來你的repo
這一步需要你在服務(wù)器端安裝git，同時(shí)在github端加入你自己的SSH KEY菩浙，相當(dāng)于在github上給服務(wù)器添加到白名單巢掺，這樣每次服務(wù)器git pull 的時(shí)候才能順利完成。clone 的時(shí)候一定要選擇ssh方式劲蜻，形如： git clone git@github.com/...
2. 在github上配置webhook陆淀，指向你的server
直接到你的repo的setting選項(xiàng)里面去找，按照提示操作先嬉。
3. 在server端監(jiān)聽webhook的事件
首先要在你個(gè)人的服務(wù)器上安裝 webhook 插件轧苫，這一步必不可少：
npm install -g github-webhook-handler
然后在服務(wù)器新建 webhook.js 文件，名字你可以任意取疫蔓，這個(gè)文件其實(shí)就是一個(gè)node服務(wù)含懊，一會(huì)我們要運(yùn)行它。
var http = require('http');
var spawn = require('child_process').spawn;
// 在我的服務(wù)器上使用相對(duì)路徑會(huì)出錯(cuò)衅胀，所以下面用了絕對(duì)路徑“ /usr/... 的格式
var createHandler = require('/usr/lib/node_modules/github-webhook-handler');
// 下面填寫的myscrect跟github webhooks配置一樣岔乔，下一步會(huì)說；path是我們?cè)L問的路徑
var handler = createHandler({ path: '/hexo', secret: '你的密碼滚躯，要和github上配置的一致' });
http.createServer(function (req, res) {
handler(req, res, function (err) {
res.statusCode = 404;
res.end('no such location');
})
}).listen(7777);
handler.on('error', function (err) {
console.error('Error:', err.message)
});
// 監(jiān)聽到push事件的時(shí)候執(zhí)行我們的自動(dòng)化腳本
handler.on('push', function (event) {
console.log('Received a push event for %s to %s',
event.payload.repository.name,
event.payload.ref);
runCommand('sh', ["/path/to/deploy.sh"], function( txt ){
console.log(txt);
});
});
function runCommand( cmd, args, callback ){
var child = spawn( cmd, args );
}
其中deploy.sh中的內(nèi)容如下：
#!/bin/bash
cd /var/www/blog
git reset --hard origin/master
git clean -f
git pull origin master
然后雏门，先用如下命令驗(yàn)證一下服務(wù)是否可以正常運(yùn)行：
node webhook.js
沒問題之后可以用pm2這個(gè)工具來重新運(yùn)行服務(wù)（如果沒有pm2請(qǐng)先用node安裝它）
pm2 start webhook.js
大功告成，之后你每次用hexo d部署之后掸掏，你的文件都會(huì)上傳到github茁影，然后自動(dòng)推送到你個(gè)人的服務(wù)器上。
更多討論請(qǐng)關(guān)注我的公眾號(hào): 黑客悟理
如果你喜歡我的文章丧凤，可以在任一平臺(tái)搜索【黑客悟理】關(guān)注我募闲，非常感謝！
