Hexo 博客终极玩法:云端写作,自动部署

125
Hexo + Github + 语雀 + yuque-hexo +travis-ci+severless 打造全自动持续集成个人博客,云端写作,自动部署,完美体验~

一、Hexo+Github 的痛点

1.为啥要用hexo+github?

作为一个程序猿,博客肯定是必须要有的拉,github也是必须要混的拉~所以:

  • hexo + github = 高大上

image.jpeg

2.蛋疼的写作体验

使用hexo,会面临如下问题:

  • 博客源码怎么管理?
  • 图片存在哪?
  • 如何编写markdown文件?

相信很多人都在使用本地编辑器来写博客,那体验,真心蛋疼,比如说vscode,可视化插件一般般,图片还不能复制黏贴,想插入个图片还要先保存成文件放在本地,然后再引用,啥?你说七牛云存储?哪有复制黏贴爽呀~
当然,博客源码可以使用travis-ci 来做持续集成,想写博客或者换个电脑,clone一下源仓库,写完push一下,就可以不用管了。but,比起独立站点的博客,如wordpress,还是觉得写作体验有点不爽。
image.jpeg

3. 脑洞大开:

偶然间,朋友安利了语雀这个文档写作平台,觉得这就是完美的写作体验,各种UI和编辑器都很舒服~秀个图:
image.png

markdown编辑器也是巨爽:
image.png

于是乎,就在想能不能在语雀里写作,写完之后自动同步到Github的博客呢?年轻就要有激情,说干就干,花了一天时间,结合了severless、yuque-hexo、travis-ci之后,终于跑通了整个写作、发布、自动部署的流程~
image.jpeg

二、具体方案

整体流程:
工作流.png

  • 语雀发布一篇文章
  • webhook调用serverless函数
  • serverless 发起请求 trigger 一个 build 任务
  • travis-ci 同步语雀文章并构建hexo
  • github 生成静态页面展示

1. hexo+github+triavs-ci

hexo如何部署,如何集成travis-ci,等等,我就不再讲了,网上类似的文章灰常多~
比如:

image.png

那么如何同步语雀的文章呢?答案就是:

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

2. serverless

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

1)创建函数

image.png

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 中设置界面获取:

image.png

  • 仓库ID 或 扩展名,

使用findder 或者 postman 发起一个请求: https://api.travis-ci.org/owner/Ghostdar/repos

clipboard.png


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

3) 配置触发方式

image.png

一般会得到这么个api:
https://service-s08f6nvk-1251...

3. 语雀配置

配置一个仓库的webhook:
image.png

可以选择所有更新触发或者主动触发,主动触发的意思即发布需要勾选一个选项才会触发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函数内。

4. 开始发布或更新一篇文章

发布或者更新一篇文章后,我们前往travis-ci,可以看到已经触发了一次构建请求:

image.png
构建完成后,咱们的博客上已经妥妥的展示出来拉~
image.png

附上博客地址:https://ghostdar.github.io/ ,羞耻的求个star~

image.jpeg

三、其他的思路

1. github api 

可以使用github 的 api ,每当更新文章,自动生成一个commit ,触发travis-ci 构建,但是感觉工作量很大,就放弃了~

2. 有待挖掘的travis-ci 

目前我使用的方法是trigger a build ,其实可以做到更多的 自定义配置~为啥不研究?主要是我懒~
当然,如果有更好的方案也欢迎交流~

最后:

再次感谢语雀开发webhook,以及@尹挚 大神的yuque-hexo插件~
附上地址:


如果觉得我的文章对你有用,请随意赞赏
已赞赏

你可能感兴趣的

25 条评论
Aaron_Zhou · 1月9日

gitlab版本 异曲同工 😂
https://aaron67.cc/2017/02/19...

+2 回复

marven · 1月7日

厉害👍

回复

lucahan · 1月8日

牛逼

回复

距离 · 1月9日

赞👍🏻

回复

杨晓东 · 1月9日

先点个赞
发布后同步到微信,微博等第三方平台也可以搞起来了. 哈哈.

回复

小丑皇 · 1月15日

感觉这个万一很带劲啊

回复

iszengmh · 1月26日

"yuqueConfig": {

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

},
这个什么login没有说明,不知道哪里的

回复

0

原来是自己语雀个人路径名https://www.yuque.com/[login]

iszengmh · 1月26日
iszengmh · 1月26日

知识库发布了语雀没有触发travis的build T_T

回复

0

我就差一点了,没有想到触发不了webhook,不知道为什么,不过担心在语雀发布了文章可能没有办法分类哦

iszengmh · 1月27日
Celine · 1月31日

你好,想问你一个问题,vs code如何配置.styl编译为.css需要安装什么拓展插件呢

回复

0

安装个.styl的扩展就好了,或者使用css的解析器打开这张类型的文件

Nero 作者 · 1月31日
0

请问styl的拓展具体名字是什么呢,我不知道哪一个哦

iscelinetam · 1月31日
0

@Nero vscode里面需要下载拓展插件,具体叫什么名字的呢

iscelinetam · 1月31日
iscelinetam · 2月5日

0.0

回复

dream · 2月16日

666

回复

yuutan · 5月7日

实践了之后发现有两个问题:1travis 的token是access token而不是profile里的token,第二我在serverless设置好了分支,返回了202但是没有触发travis requests里面的任务……不清楚是什么原因

回复

载入中...