Hexo+Hexo-Client+Gitee+阿里云+Webhook自动构建静态Blog

JS

前置原因

  • Github Hexo 确实好用,但是私有化仓库需要付费,并且百度收录不好
  • Gitee Hexo 自动构建慢成狗,有几分钟404 错误,添加域名还要99
  • Coding Hexo 太不稳定

废话不多说直接看搭建

Git仓库配置

  • 客户端git 使用就不多说了
  • 服务端git 使用ssh key 的形式
    命令
    1
    2
    3
    4
    5
    6
    7
    8
    生成ssh key
    ssh-keygen -t rsa -C "your email account"

    复制 ~/.ssh/id_rsa.pub 中内容到 gitee 的ssh 管理中

    git clone git@gitee.com:loser007/project.git
    或者
    git clone git@gitee.com:loser007/project.git usr/share/ngix/projectdir

第一次拉取有提示,需要生成一个配置文件~/.ssh/known_hosts,再执行一次就成功了

Hexo使用

  1. 本地工程环境创建
    1
    2
    3
    4
    5
    6
    npm install -g hexo-cli
    hexo -v
    cd D:\WorkSpace\WorkSpace\hexo\bbs.loser007.com
    hexo init .
    git push origin master -f
    npm install

执行完命令到目前已经把本地工作环境创建完成,并且自动生成了一个helloworld 的Markdown 笔记

Hexo-Client 使用

github 下载地址

下载自己系统版本一路next 不多说

  • 安装完成后配置工程目录,指定到hexo 的工程目录
  • Hexo 会自动读取工程目录的笔记
  • 七牛云配置
    点击设置,配置自己的ak,sk,Bucket就行,host 为图片地址的前缀
    在我使用Hexo-Client时 有一个Bug,他默认设置的是华东区域
  • 如果你的七牛bucket 在其他区域可以clone hexo-client 源码修改QiniuManager.js
    1
    2
    3
    4
    5
    upload (file, sysConfig) {
    var deferred = When.defer()

    var config = new qiniu.conf.Config()
    config.zone = qiniu.zone.Zone_z2 //修改此处

七牛区域表
|机房|Zone对象|
|-|-|
|华东|qiniu.zone.Zone_z0|
|华北|qiniu.zone.Zone_z1|
|华南|qiniu.zone.Zone_z2|
|北美|qiniu.zone.Zone_na0|

执行命令编译

1
2
3
4
5
#clone
# install dependencies
npm install
# 编译windows
npm run build:win

  • 重新安装build 目录下的HexoClient Setup 1.2.2.exe即可

Nginx配置

1
2
3
4
5
6
7
8
9
10
11
server
{
listen 80;
server_name xxx;
root /usr/share/nginx/xxx/public;
## send request back to apache ##
location / {
index index.html index.htm;

}
}
1
Nginx -s reload

在使用WebHook 自动化构建前,我们先手动走一篇流程

  • 在本地 执行推送 git push
  • 在云服务器中执行 git pull
  • 确认下载代码完成后,依次执行
    1
    2
    3
    4
    5
    6
    #安装hexo 命令工具
    npm install -g hexo-cli
    #在工程目录安装依赖
    npm install
    #编译静态文件,会自动生成public 文件夹,Nginx 指向这个目录
    hexo g

现在访问应该就能看到你的Hexo 的Hello-World 笔记了,已经完成了整个流程

WebHook

在Github中下载WebHook可执行文件

  • 编写自动构建脚本redeploy.sh

    1
    2
    3
    #!/bin/bash
    git pull
    /root/node/bin/hexo g
  • 编写Webhook配置文件hooks.json

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    [
    {
    "id": "loser007",
    "execute-command": "/usr/share/nginx/xxx/redeploy.sh",
    "command-working-directory": "/usr/share/nginx/xxx",
    "response-message": "ok",
    "trigger-rule":
    {
    "match":
    {
    "type": "value",
    "value": "your password",
    "parameter":
    {
    "source": "payload",
    "name": "password"
    }
    }
    }
    }
    ]
  • 执行

    1
    nohup ./webhook -hooks hooks.json -nopanic -hotreload -port 5000 &
  • 在gitee项目配置中添加Webhook回调地址

    1
    http://your ip:5000/hooks/loser007
  • 修改Hello-World

  • 推送
  • 刷新你的页面看是否已经自动构建更改了