/ 技术笔记

静态博客Hexo+语雀编辑器

静态博客Hexo+语雀编辑器

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

方法一

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. 语雀配置

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~


方法二

创建 Hexo 博客

已经有 Hexo 博客的可以跳过。如果你是 Jekyll ,也可以跳过。

  • 安装 Node.js
  • 安装 Hexo 脚手架
npm install -g hexo-cli
  • 初始化一个博客
hexo init <folder>
cd <folder>
npm install

安装语雀文章下载插件

yuque-hexo 是一个 Node.js 环境下的语雀下载器,使用 npm 安装

  • 安装 yuque-hexo
npm i -g yuque-hexo
  • 注册语雀,创建知识库,获得你的个人路径和知识库的名字,比如我的博客的知识库是 https://www.yuque.com/page/luan.ma
  • 在 Hexo 博客的目录下面的 package.json 中,进行下面的配置
{
  "name": "your hexo project", //如果原来已经有这个不用再加了,直接加下面的就可以
  "yuqueConfig": {
    "baseUrl": "https://www.yuque.com/api/v2",
    "login": "page",
    "repo": "luan.ma",
    "mdNameFormat": "slug",
    "postPath": "source/_posts/yuque"
  }
}

如果不是 Hexo 博客,则需要按照上面的文件保存一个 package.json 到博客目录,并且配置 postPath 为正确的文章目录

  • 同步文章
yuque-hexo sync

PS: 插件支持 Front-matter,在语雀写文章的时候直接写在前面,然后插入一条分割线即可,不写也没问题:

tags: [Hexo]
categories: 教程
date: 2018-10-05 10:43:50

启动/部署 Hexo 博客

  • 本地启动(调试用)
hexo s
  • 生成 html 不部署
hexo g
  • 自动上传到服务器/静态空间/git (部署)
  1. 先找到一个部署插件
  2. 在配置文件中配置好相关的账号密码
  3. 在 hexo 中生成 HTML 并且部署
hexo g -d

静态博客空间选择

  1. Github Pages: 方便,不太稳定,Git部署
  2. Coding.net Pages: 需要挂一个链接 或者 付费,速度尚可,Git部署
  3. 腾讯云 COS + 腾讯云 CDN:需要备案,速度极快,COS 插件部署
  4. 自有服务器:可定制,速度一般 ,支持多种方式部署

后面

其实这篇文章干货不多,主要是应某网友的要求,顺便把我的 TenneyBlog 做个了结。核心是把 yuque-hexo 这个东西介绍给大家。这个插件由阿里巴巴的同学开发,我也做了一些微小的贡献。本博客目前也是使用这个方案同步语雀的文章。

当然,关于 Hexo 皮肤、评论插件等等玩法也要折腾很久,我就不在这篇文章里面说了。