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

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

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

hexo + github = 高大上

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

博客源碼怎么管理？

圖片存在哪？

如何編寫markdown文件？

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

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

markdown編輯器也是巨爽：

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

整體流程：

語雀發(fā)布一篇文章

webhook調(diào)用serverless函數(shù)

serverless 發(fā)起請求 trigger 一個 build 任務(wù)

travis-ci 同步語雀文章并構(gòu)建hexo

github 生成靜態(tài)頁面展示

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

使用Hexo+Github+TravisCI搭建自動發(fā)布的靜態(tài)博客系統(tǒng)

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服務(wù)，免費(fèi)的額度完全夠用了，下面介紹一下如何配置：

1）創(chuàng)建函數(shù)

2）serverless 函數(shù)示例:

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 登錄驗(yàn)證token
* @param $message string 觸發(fā)信息
* @param $branch string 分支
* @return $info array 回包信息
*/
function triggerTravisCI ($repos, $token, $message="yuque update", $branch="master") {
    //初始化
    $curl = curl_init();
    //設(shè)置抓取的url
    curl_setopt($curl, CURLOPT_URL, "https://api.travis-ci.org/repo/".$repos."/requests");
    //設(shè)置獲取的信息以文件流的形式返回，而不是直接輸出。
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
    //設(shè)置post方式提交
    curl_setopt($curl, CURLOPT_CUSTOMREQUEST, "POST");
    //設(shè)置post數(shù)據(jù)
    $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);
    //執(zhí)行命令
    $data = curl_exec($curl);
    $info = curl_getinfo($curl);
    //關(guān)閉URL請求
    curl_close($curl);
    return $info;
}
?>

這里有幾個需要獲取的參數(shù)：

travis登錄token，在travis-ci.org 中設(shè)置界面獲取：

倉庫ID 或 擴(kuò)展名，

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

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

3） 配置觸發(fā)方式

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

配置一個倉庫的webhook:

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

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

如果不在鏈接帶參數(shù)則寫在serverless函數(shù)內(nèi)。

發(fā)布或者更新一篇文章后，我們前往travis-ci,可以看到已經(jīng)觸發(fā)了一次構(gòu)建請求：

構(gòu)建完成后，咱們的博客上已經(jīng)妥妥的展示出來拉~

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

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

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

最后：

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

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

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