Hexo 博客終極玩法：雲端寫做，自動部署

時間 2019-11-07

標籤 hexo 博客終極玩法雲端自動部署简体版

原文原文鏈接

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

1、Hexo+Github 的痛點

1.爲啥要用hexo+github？

做爲一個程序猿，博客確定是必需要有的拉，github也是必需要混的拉~因此:php

hexo + github = 高大上

2.蛋疼的寫做體驗

使用hexo，會面臨以下問題：git

博客源碼怎麼管理？
圖片存在哪？
如何編寫markdown文件？

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

3. 腦洞大開：

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

markdown編輯器也是巨爽：
npm

因而乎，就在想能不能在語雀裏寫做，寫完以後自動同步到Github的博客呢？年輕就要有激情，說幹就幹，花了一天時間，結合了severless、yuque-hexo、travis-ci以後，終於跑通了整個寫做、發佈、自動部署的流程~
json

2、具體方案

總體流程：
segmentfault

語雀發佈一篇文章
webhook調用serverless函數
serverless 發起請求 trigger 一個 build 任務
travis-ci 同步語雀文章並構建hexo
github 生成靜態頁面展現

1. hexo+github+triavs-ci

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

那麼如何同步語雀的文章呢？答案就是：七牛雲存儲

yuque-hexo

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

"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文件。

2. serverless

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

1）建立函數

2）serverless 函數示例:

<?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 = '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...

3. 語雀配置

配置一個倉庫的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函數內。