博客雏形搭建好了之后，又浪了几天没有折腾。昨天晚上自己买了个域名，想着是时候好好把博客完善起来了。下面继续开始折腾…

前面我们介绍了如何在搬瓦工VPS上快速搭建自己的个人博客，做了相关的主题美化，同时也进行了简单的SEO优化。

在这个过程中，每次需要更新，我都是直接手动将文件拖到VPS上的。作为一个“懒人”，这个过程还是太烦了。今天我们就来学习一下如何自动将博客部署到VPS上。

2019-01-05 更新

推荐直接在VPS上部署静态页面，访问速度更快

修改参照Hexo自动部署优化————解决TTFB过长的问题

这篇文章重点介绍如何通过git webhooks实现远程vps的自动部署

具体流程：先在本机搭建好hexo环境，push到git仓库，再部署到服务器上

本地安配置hexo环境

在本地用hexo搭建一个个人博客很简单，分分钟可以搞定。如果以前没有接触过，可以参考我前面的博文：个人博客Hexo搭建

提交到远程仓库

首先需要一个在线的仓库，可以选择github或者Coding.net。这里我选择了常用的github

先在github上创建一个项目HexoBlog，并拷贝仓库ssh地址（使用ssh需要配置ssh公钥和私钥，如果不会配可以google一下或使用http地址）。注意，如果需要通过webhooks实现服务器自动化部署，推荐使用ssh会更方便一些

然后在本地hexo目录初始化本地仓库并提交到github

git init
git add .
git commit -m "first commit"
git remote add origin git@github.com:winsky94/HexoBlog.git
git push -u origin master

注意，如果以前没有配置github的SSH提交，可以参考这篇博文GitHub的SSH提交配置

VPS配置

我使用的是搬瓦工VPS。服务器上安装好了nodejs,git,nginx，具体不会的可以谷歌一下

将代码从`github`上拉取下来

同样，这里也需要在服务器上配置github的SSH登录。参考GitHub的SSH提交配置

mkdir /home/blog
git init
git remote add origin git@github.com:winsky94/HexoBlog.git
git pull origin master

安装hexo模块

1
2
3

cd /home/blog
npm install hexo-cli -g
npm install

hexo静态编译

hexo g

这一步会在/home/blog目录下生成一个public目录，这里面就是编译后的静态文件目录，其实这时候直接访问里面的html文件即可看到完整的效果了，只不过还需要一个服务来运行它

配置nginx

进入nginx服务配置文件目录/usr/local/nginx/conf/vhost，新建一个配置文件blog.conf，内容为

server
{
	listen 80;
    server_name blog.winsky.wang ;

	location / {
    	proxy_set_header HOST $host;
    	proxy_set_header X-Forwarded-Proto $scheme;
    	proxy_set_header X-Real-IP $remote_addr;
    	proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    	proxy_pass http://localhost:4000/;
  }
}

重载nginx，使配置生效nginx -s reload。然后就可以通过http://blog.winsky.wang来访问博客了

Git WebHooks 自动化部署

是不是觉得每次写完文章还要登录服务器去执行一次git pull很麻烦？最起码对我这个“懒人”来说，这样很耗时啊

幸运的是，git有很多钩子，可以在仓库发生变化的时候触发，类似js中的事件。WebHooks就是在你本地执行git push的时候，远程仓库会检测到仓库的变化，并发送一个请求到我们配置好的WebHooks

实现WebHooks自动化部署的推荐条件：

服务器端配置ssh认证
服务器端配置nodejs服务，接收github发来的请求

服务器webhook配置

由于hexo是基于NodeJS的，所以这里用NodeJS来接收github的push事件。
安装依赖库github-webhook-handler：

1	npm install github-webhook-handler

安装完成之后配置webhooks.js

var http = require('http')
var createHandler = require('github-webhook-handler')
var handler = createHandler({ path: '/webhooks_push', secret: 'winsky_nju' })
// 上面的 secret 保持和 GitHub 后台设置的一致
function run_cmd(cmd, args, callback) {
  var spawn = require('child_process').spawn;
  var child = spawn(cmd, args);
  var resp = "";
  child.stdout.on('data', function(buffer) { resp += buffer.toString(); });
  child.stdout.on('end', function() { callback (resp) });
}
handler.on('error', function (err) {
  console.error('Error:', err.message)
})
handler.on('push', function (event) {
  console.log('Received a push event for %s to %s',
    event.payload.repository.name,
    event.payload.ref);
    run_cmd('sh', ['./deploy.sh'], function(text){ console.log(text) });
})
try {
  http.createServer(function (req, res) {
    handler(req, res, function (err) {
      res.statusCode = 404
      res.end('no such location')
    })
  }).listen(6666)
}catch(err){
  console.error('Error:', err.message)
}

其中secret要和github仓库中webhooks设置的一致，6666是监听端口可以随便改，不要冲突就行，./deploy.sh是接收到push事件时需要执行的shell脚本，与webhooks.js都存放在博客目录下；path: '/webhooks_push'是github通知服务器的地址

因为我们的服务器上使用了Nginx，所以这里我们也需要使用Nginx来转发6666端口。在Nginx配置文件目录下新建一个webhooks.conf，内容如下：

server
{
  	listen 80;
  	server_name git.winsky.wang ;

	location / {
		proxy_set_header HOST $host;
		proxy_set_header X-Forwarded-Proto $scheme;
		proxy_set_header X-Real-IP $remote_addr;
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    	proxy_pass http://localhost:6666/;
  }
}

然后配置git.winsky.wang的域名解析

最后git上配置的地址是：http://git.winsky.wang/webhooks_push

配置`./deploy.sh`

cd /home/blog/
git reset --hard
git pull origin master  
hexo generate

然后运行node webhooks.js，就可以实现本地更新push到github，服务器会自动更新部署博客。

最后要将进程加入守护，通过pm2来实现

1	npm install pm2 --global

然后通过pm2启动webhooks.js

1	pm2 start /home/blog/webhooks.js

自启动

参考服务器重启后自动运行hexo服务

快速搭建Hexo博客+webhook自动部署+全站HTTPS

给你的项目增加Webhooks，自动进行部署

使用Github的webhooks进行网站自动化部署