Hexo快速搭建静态博客并实现远程VPS自动部署

8 minute read

这篇文章将如何搭建 hexo,以及如何通过 git webhooks 实现远程 vps 的自动部署

这篇文件适合的条件:

  1. 简单的用于个人博客、公司博客展示,hexo 的定位是静态博客,要实现动态服务器的功能并不适合
  2. 有自己私有的服务器、vps、域名
  3. git 仓库,Github或国内的Coding.net

hexo 本地部署

流程:先在本机搭建好 hexo 环境,push 到 git 仓库,再部署到服务器上。

第一步,安装 hexo 命令行工具,这个工具在服务器端也需要执行安装

1npm install hexo-cli -g

第二部,生成一个本地 hexo 项目

1# 创建blog目录,并初始化hexo项目
2hexo init blog
3cd blog
4# 安装hexo依赖,hexo是基于nodejs开发的,npm是nodejs的包管理工具
5npm install
6# 启动本地服务,打开localhost:4000测试是否成功
7hexo server

第三部,新建一篇文章

1hexo new "My First Post"
2# 启动本地服务,查看效果
3hexo 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

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

这时候 coding 上已经有我提交的代码了。

服务器环境配置

登录你自己的 vps 服务器,安装好 nodejs,git,nginx,个人服务器还是推荐使用 ubuntu,安装这些工具很容易,具体百度或谷歌。

我在公司搭的 hexo,公司服务器使用的是 centos,git 我是请运维同学帮我安装的,比较麻烦。

将代码从远程仓库拉下来

同样的服务器也需要配置 ssh 才能使用 ssh 地址,否则还是使用 http 地址吧。

在这里,我直接把项目放在 root 目录下了。

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

安装 hexo 模块

1cd ~/hexo
2npm install hexo-cli -g
3npm install

hexo 静态编译

1hexo g

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

配置 nginx

进入 nginx 服务配置文件目录,该目录下应该已经有一个 default.conf,不去管它,另外新建一个配置文件

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

在 hexo.conf 中输入以下内容并保存,注意细节,不要少分号。

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

重载 nginx,使配置生效。

1nginx -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 文件,内容如下:

 1var http = require('http');
 2var exec = require('child_process').exec;
 3
 4http
 5  .createServer(function (req, res) {
 6    // 该路径与WebHooks中的路径部分需要完全匹配,实现简易的授权认证。
 7    if (req.url === '/webhooks/push/123456') {
 8      // 如果url匹配,表示认证通过,则执行 sh ./deploy.sh
 9      exec('sh ./deploy.sh');
10    }
11    res.end();
12  })
13  .listen(4002);

这段代码就能启动一个 nodejs 服务,监听 4002 端口。 当请求过来的 url 完全匹配的时候,执行 deploy.sh。

再新建一个文件 deploy.sh 处理部署相关脚本,内容如下:

1git pull origin master
2hexo g

将新增的 webhooks.js 与 deploy.sh 两个文件 push 到服务器。

然后在服务器中启动 nodejs 服务监听 webhooks

1node ./webhooks.js

这样,当你本地提交文章的时候,服务器就会自动部署啦。

如果你使用上面的命令运行 nodejs 服务,nodejs 服务会在前台运行, 可以使用pm2使 nodejs 运行在后台。