自动将更新部署到VPS

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

前面我们介绍了如何在搬瓦工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

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

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

VPS配置

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

将代码从github上拉取下来

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

1
2
3
4
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静态编译

1
hexo g

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

配置nginx

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

1
2
3
4
5
6
7
8
9
10
11
12
13
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来接收githubpush事件。
安装依赖库github-webhook-handler

1
npm install github-webhook-handler

安装完成之后配置webhooks.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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,内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
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

1
2
3
4
cd /home/blog/
git reset --hard
git pull origin master
hexo generate

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

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

1
npm install pm2 --global

然后通过pm2启动webhooks.js

1
pm2 start /home/blog/webhooks.js

自启动

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

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

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

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