语雀写作自动同步部署Hexo

发表于 | 更新于:
字数统计: 2.5k 字 | 阅读时长 ≈ 10 分钟

语雀和Hexo之前都有单独使用过，都很舒服，今天偶然看到一篇大佬的文章，居然可以把这两个结合起来使用，这岂不是美滋滋，爽歪歪，所以说心动不如行动，搞起来~
在实施的过程中，由于自己太菜，有好多坑，搞了好长时间才搞好，不容易，写这样一个文章记录一下


一、所需环境


1.操作系统

最好Linux，若在Windows中就装一下虚拟机

2.所需环境软件

  1. Git
  2. Node.Js
  3. Hexo
  4. Ruby
    二、实现步骤
    利用Hexo+Github+Triavs-ci来实现在语雀上面写着之后自动部署到Hexo上面去，这么做只能用舒服来形容，嘻嘻！
    1.介绍
    1）Hexo
    要怎么来部署就不要我在这多说什么了，我的博客有这样的教程，附上我的博客地址。
    2）Github
    作为一个程序猿必备，略过，没有的，嗯哼，可以不用看了。
    3）Triavs-ci
    开源持续集成构建项目，它与jenkins有点像，可以直接用你的Github账号登录，同步你的仓库，很是方便，页面也比较简洁好看。
    4）yuque-hexo
    一个Hexo的插件，看名字就知道用来干什么的了，所以你猜的没有错，他就是用来同步语雀到Hexo的插件，这是开源插件，附上开源库地址。感谢大佬的插件。
    使用起来也很简单就只需要安装好在package.json配置一下就好了。
    image.png
    还在配置一下命令，不然编译生成的时候不会同步语雀的文章，也在package.json文件中配置
    image.png
    具体可以参考我的package.json文件
    2.操作流程
    1）配置Hexo
    这里简单说一下要注意的地方，具体教程网上有很多。

  • 增加hexo-deployer-git依赖，防止部署时报错。

    copynpm install –save hexo-deployer-git

  • 增加hexo-util到dev依赖，防止travis的npm版本<3,出现的Error: Cannot find module ‘hexo-util’错误。

    copynpm install –save-dev hexo-util


2）配置Github

  • 在Github上面建两个库（也不一定要两个，也可以利用两个代码分支来进行，我这里用两个仓库做栗子）

一个仓库拥来存放Hexo编译前的代码库。另一个用来存放编译后用来开启Pages的仓库。
在本地创建好的Hexo可以提交到源码的仓库了。可以也把Pages的也配置好。

3）配置Travis CI

  • 第一步我们需要有一个 Travis-CI 的账号，直接进入Travis-CI官网，用自己的Github账号授权登录即可。

然后可以看到当前账号的所有代码仓库，接下来将博客项目的状态设置为启用。
image.png

  • 第二步创建一个部署在 Travis CI 上面的 SSH key 利用这个 SSH key 可以让 Travis CI 向我们自己的项目提交代码(也就是将博客部署到Page)。这如果你在之前部署Hexo的时候已经创建过了，就可以直接用那个公钥来添加到Github里面去，添加好之后大概就是图片上的样子。

这里提一下，有的时候你的本地向GitHub提交提交不上去，但之前还是可以的，这时候可以检查GitHub的SSH密钥这里，可能是因为安全问题，官方给你暂时冻结了这个密钥，冻结的情况下这里的Delete旁边就会多一个激活按钮，点一下就好了。
image.png

  • 第三步加密私钥

加密密钥的时候一定要在Linux操作系统下进行，不然travis-ci之后进行解密的时候会报错，目前官方就是这样的一个BUG，暂时无解。
Windows的同学可以在Linux虚拟机中把你的Hexo源码仓库clone进行下面的操作。

  • 这里还需要Ruby来支撑，所以还需安装Ruby，有几种方式，个人推荐还是老老实实编译安装最好
    • 下载ruby

下载最新版的 Ruby 压缩文件。请点击这里下载。也可以使用wget命令
image.png

1
- 下载 Ruby 之后，解压到新创建的目录下：
1
2
$ tar -xvzf ruby-2.2.3.tgz    
$ cd ruby-2.2.3
1
- 现在，配置并编译源代码，如下所示：
1
2
3
$ ./configure
$ make
$ sudo make install

装后，通过在命令行中输入以下命令来确保一切工作正常：

1
2
3
$ruby -v

ruby 2.2.3……

如果一切工作正常，将会输出所安装的 Ruby 解释器的版本，如上所示。如果您安装了其他版本，则会显示其他不同的版本。

  • 安装travis（如果在国内的网络环境下建议安装之前先换源)

    $ gem install travis

  • 那么之前把公钥文件配置好了，然后现在就要配置私钥文件，在 hexo 项目下面建立一个 .travis 的文件夹来放置需要配置的文件和travis的配置文件travis.yml。Windows和Linux下无法创建和创建报错可以用命令mkdir ./.travis进行创建文件夹，用命令touch ./.travis.yml来创建travis的配置文件。切换到.travis文件夹下

    1
    ![image.png](https://cdn.nlark.com/yuque/0/2019/png/240833/1552316024043-dfd7b632-8a75-4634-ad76-4cb77158b415.png#align=left&display=inline&height=46&name=image.png&originHeight=57&originWidth=721&size=17007&status=done&width=577)<br />用命令行工具登录：

travis login –auto

这时候会让你输入你的Github账号（邮箱）和密码，也可以使用GitHub的Token来进行登录

travis login –github-token 具体的Token –auto

  • 然后将私钥 id_rsa 复制到 .travis 文件夹，用命令行工具进行加密：

    $ travis encrypt-file id_rsa –add

这时候在之前创建好的.travis.yml文件里面就会被写入一些密钥的信息，大概如此：
image.png
在你的Travis的项目设置中也会出现密钥
image.png

  • 接下来就要配置 .travis.yml

首先我们要改一下生成的解密信息，因为这个里面的in和out的文件位置是相对于本地环境来生成的，如果在Travis上面跑的时候位置会发生变化这样运行的时候就会报错，改完之后大概这样子：
image.png

  • 为了让 git 默认连接 SSH 还要创建一个 ssh_config 文件。在 .travis 文件夹下创建一个 ssh_config 文件，输入以下内容：

    Host github.com
    User git
    StrictHostKeyChecking no
    IdentityFile ~/.ssh/id_rsa
    IdentitiesOnly yes

这样，当向项目 push 代码的时候 travis CI 就会根据 .travis.yml 的内容去部署我们的项目了。
具体可以参考我的.travis.yml文件
这里要提一下，我们在向Hexo源码仓库Push的时候不要提交本地编译生成的node_modules文件夹，不然到时候在上面跑的时候会有权限问题，npm会根据package.json上面的信息自己下模块的，所以不用当选，具体的涉及到npm的运行原理这里不提了，想了解的可以自行百度哈。
**

4）配置Serverless服务

目前阿里云和腾讯云都有serverless服务，免费的额度完全够用了，下面介绍一下腾讯云如何配置

  • 创建函数

image.png

  • serverless 函数配置

点击完成即可，之后在配置具体函数代码
image.png
示例：

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<?php
function main_handler($event, $context) {
    // 解析语雀post的数据
    $update_title = '';
    if($event->body){
        $yuque_data= json_decode($event->body);
        $update_title .= $yuque_data->data->title;
    }
    // default params
    $repos = '';  // 你的仓库id 或 slug
    $token = ''; // 你travis-cide的登录token
    $message = date("Y/m/d").':更新啦:'.$update_title; // 你这里是更新信息可自定义
    $branch = 'master'; // 你GitHub分支
    // post params
    $queryString = $event->queryString;
    $q_token = $queryString->token ? $queryString->token : $token;
    $q_repos = $queryString->repos ? $queryString->repos : $repos;
    $q_message = $queryString->message ? $queryString->message : $message;
    $q_branch = $queryString->branch ? $queryString->branch : 'master';
    echo($q_token);
    echo('===');
    echo ($q_repos);
    echo ('===');
    echo ($q_message);
    echo ('===');
    echo ($q_branch);
    echo ('===');
    //request travis ci
    $res_info = triggerTravisCI($q_repos, $q_token, $q_message, $q_branch);

    $res_code = 0;
    $res_message = '未知';
    if($res_info['http_code']){
        $res_code = $res_info['http_code'];
        switch($res_info['http_code']){
            case 200:
            case 202:
                $res_message = 'success';
            break;
            default:
                $res_message = 'faild';
            break;
        }
    }
    $res = array(
        'status'=>$res_code,
        'message'=>$res_message
    );
    return $res;
}

/*
* @description  travis api , trigger a build
* @param $repos string 仓库ID、slug
* @param $token string 登录验证token
* @param $message string 触发信息
* @param $branch string 分支
* @return $info array 回包信息
*/
function triggerTravisCI ($repos, $token, $message='yuque update', $branch='master') {
    //初始化
    $curl = curl_init();
    //设置抓取的url
    curl_setopt($curl, CURLOPT_URL, 'https://api.travis-ci.org/repo/'.$repos.'/requests');
    //设置获取的信息以文件流的形式返回，而不是直接输出。
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
    //设置post方式提交
    curl_setopt($curl, CURLOPT_CUSTOMREQUEST, "POST");
    //设置post数据
    $post_data = json_encode(array(
        "request"=> array(
            "message"=>$message,
            "branch"=>$branch
        )
    ));
    $header = array(
      'Content-Type: application/json',
      'Travis-API-Version: 3',
      'Authorization:token '.$token,
      'Content-Length:' . strlen($post_data)
    );
    curl_setopt($curl, CURLOPT_HTTPHEADER, $header);
    curl_setopt($curl, CURLOPT_POSTFIELDS, $post_data);
    //执行命令
    $data = curl_exec($curl);
    $info = curl_getinfo($curl);
    //关闭URL请求
    curl_close($curl);
    return $info;
}
?>
  • 这里有几个需要获取的参数：
    • travis登录token，在travis-ci.org 中设置界面获取：

image.png

1
- 仓库ID 或 扩展名

使用findder 或者 postman 发起一个请求：

https://api.travis-ci.org/owner/github用户名/repos

image.png

  • 配置触发方式

一般会得到这么个api：
https://service-8x9gl1u7-1258196125.ap-shanghai.apigateway.myqcloud.com/release/yuque-hexo
image.png

5）配置语雀

配置一个仓库（公开的仓库）的webhook:
image.png
可以选择所有更新触发或者主动触发，主动触发的意思即发布需要勾选一个选项才会触发webhook。具体可参见语雀文档；
将serverless生成的api填入,可以在链接后面带参数：

1
2
3
4
5
6
7
token 登录token
repos 仓库id
message 提交信息
branch 分支

示例：
https://service-8x9gl1u7-1258196125.ap-shanghai.apigateway.myqcloud.com/release/yuque-hexo?repos=xxx&token=xxx&message=xxx&branch=xxx

如果不在链接带参数则写在serverless函数内。

6）大功告成

发布或者更新一篇文章后，我们前往travis-ci,可以看到已经触发了一次构建请求：
image.png
构建完成后，咱们的博客上已经妥妥的展示出来拉~

参考资料

Nero的语雀

转自：https://sunnybob.github.io/2019/01/11/%E8%AF%AD%E9%9B%80%E8%87%AA%E5%8A%A8%E9%83%A8%E7%BD%B2hexo+GithubPages%E5%8D%9A%E5%AE%A2/