摘要：配置觸發方式一般會得到這么個語雀配置配置一個倉庫的可以選擇所有更新觸發或者主動觸發，主動觸發的意思即發布需要勾選一個選項才會觸發。

Hexo + Github + 語雀 + yuque-hexo +travis-ci+severless 打造全自動持續集成個人博客，云端寫作，自動部署，完美體驗~

作為一個程序猿，博客肯定是必須要有的拉，github也是必須要混的拉~所以:

hexo + github = 高大上

使用hexo，會面臨如下問題：

博客源碼怎么管理？

圖片存在哪？

如何編寫markdown文件？

相信很多人都在使用本地編輯器來寫博客，那體驗，真心蛋疼，比如說vscode，可視化插件一般般，圖片還不能復制黏貼，想插入個圖片還要先保存成文件放在本地，然后再引用，啥？你說七牛云存儲？哪有復制黏貼爽呀~
當然，博客源碼可以使用travis-ci 來做持續集成，想寫博客或者換個電腦，clone一下源倉庫，寫完push一下，就可以不用管了。but，比起獨立站點的博客，如wordpress，還是覺得寫作體驗有點不爽。

偶然間，朋友安利了語雀這個文檔寫作平臺，覺得這就是完美的寫作體驗，各種UI和編輯器都很舒服~秀個圖：

markdown編輯器也是巨爽：

于是乎，就在想能不能在語雀里寫作，寫完之后自動同步到Github的博客呢？年輕就要有激情，說干就干，花了一天時間，結合了severless、yuque-hexo、travis-ci之后，終于跑通了整個寫作、發布、自動部署的流程~

整體流程：

語雀發布一篇文章

webhook調用serverless函數

serverless 發起請求 trigger 一個 build 任務

travis-ci 同步語雀文章并構建hexo

github 生成靜態頁面展示

hexo如何部署，如何集成travis-ci，等等，我就不再講了，網上類似的文章灰常多~
比如：

使用Hexo+Github+TravisCI搭建自動發布的靜態博客系統

GitHub pages + Hexo 搭建自己的個人博客

那么如何同步語雀的文章呢？答案就是：

yuque-hexo

這是一個開源庫：https://github.com/x-cold/yuque-hexo
用法也很簡單：
1) 修改package.json，增加配置:

  "yuqueConfig": {
    "baseUrl": "https://www.yuque.com/api/v2",
    "login": "u46795",
    "repo": "blog",
    "mdNameFormat": "title",
    "postPath": "source/_posts/yuque"
  },

2）增加命令：

  "scripts": {
    "sync": "yuque-hexo sync",
    "clean:yuque": "yuque-hexo clean",
    "deploy": "npm run sync && hexo clean && hexo g -d",
  },

附上我的package.json文件。

目前阿里云和騰訊云都有serverless服務，免費的額度完全夠用了，下面介紹一下如何配置：

1）創建函數

2）serverless 函數示例:

body){
        $yuque_data= json_decode($event->body);
        $update_title .= $yuque_data->data->title;
    }
    // default params
    $repos = "xxxx";  // 你的倉庫id 或 slug
    $token = "xxxxxx"; // 你的登錄token
    $message = date("Y/m/d").":yuque update:".$update_title;
    $branch = "master";
    // 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 中設置界面獲取：

倉庫ID 或 擴展名，

使用findder 或者 postman 發起一個請求：?https://api.travis-ci.org/owner/Ghostdar/repos

回包中可以獲取到ID 和 slug。

3） 配置觸發方式

一般會得到這么個api：
https://service-s08f6nvk-1251...

配置一個倉庫的webhook:

可以選擇所有更新觸發或者主動觸發，主動觸發的意思即發布需要勾選一個選項才會觸發webhook。具體可參見語雀文檔：https://www.yuque.com/yuque/developer/doc-webhook；
將serverless生成的api填入,可以在鏈接后面帶參數：

token 登錄token
repos 倉庫id
message 提交信息
branch 分支

示例：
https://service-s08f6nvk-1251833201.ap-guangzhou.apigateway.myqcloud.com/release/xxx?repos=xxx&token=xxx&message=xxx&branch=xxx

如果不在鏈接帶參數則寫在serverless函數內。

發布或者更新一篇文章后，我們前往travis-ci,可以看到已經觸發了一次構建請求：

構建完成后，咱們的博客上已經妥妥的展示出來拉~

附上博客地址：https://ghostdar.github.io/?，羞恥的求個star~

可以使用github 的 api ，每當更新文章，自動生成一個commit ，觸發travis-ci 構建，但是感覺工作量很大，就放棄了~

目前我使用的方法是trigger a build ，其實可以做到更多的 自定義配置~為啥不研究？主要是我懶~
當然，如果有更好的方案也歡迎交流~

最后：

再次感謝語雀開發webhook，以及@尹摯 大神的yuque-hexo插件~
附上地址：

yuque-hexo:?https://github.com/x-cold/yuque-hexo

yuque-blog:?https://github.com/x-cold/yuque-blog