如何用hexo+triavs ci+语雀打造个人博客

北枳
2,086 阅读4分钟

如何用hexo+triavs-ci+语雀打造个人博客

前言

在写博客的时候会遇到两个问题，展示和写作。 在语雀上（和你的小伙伴一起）编辑文章，在自己的网站上展示文章，多好。

准备工作

使用工具

一个静态网页框架

一个开源代码托管平台

「语雀」是一个「专业的云端知识库」,就是提供编辑功能的云文档平台

一个自动化部署工具，可以将上传到github的hexo源码自动编译成静态网页

yuque-hexo是用于下载语雀的文章到 hexo 的文章目录下的一款命令行工具。

  • serverless

一个云函数，作用是将发起请求 trigger 一个 build 任务

总体思路

简单点说就是在语雀上发表了一篇文章，然后webhook监听到这个动作，去调用了servseless函数，这个函数发起了一个请求trigger 开始了一个构建任务，然后triavs-ci就会去同步语雀的文章（使用到yuque-hexo）并构建hexo,之后github 生成静态页面展示。

一些预先需要安装的工具

  • Node.js (Node.js 版本需不低于 8.6，建议使用 Node.js 10.0 及以上版本)
  • Git

一些需要提前做的准备

https://username.github.io就是我们的博客访问地址,在浏览器地址栏访问该地址，如果页面正常显示出我们的项目名称等字样则表明我们的项目已经成功创建。至此我们的github准备工作就基本完成了。

部署hexo

主要参考hexo官网文档 链接 按照官方文档按照git，node.js

安装hexo

npm install hexo

建站

首先创建一个目录，将来存放项目的源码。就叫它web好了，之后在myweb文件夹下新建hexo项目

hexo init myweb
cd myweb
npm install

新建完成后，指定文件夹的目录如下

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

完成上述步骤后执行$ hexo server命令启动服务器，浏览器访问地址http://localhost:4000/，如果可以看到浏览器显示出下图界面表明Hexo已经成功安装。

image.png

安装主题

但是，这个原始的页面实在是太丑了，所以我找了一个好看的hexo主题 ocean

image.png
当然，你也可以选择其他的主题，官方主题商店链接hexo.io/zh-cn/docs/… 以下操作都是基于ocean，如果遇到问题，请参考Ocean 中文文档

配置文件

完成上述步骤后我们便已经完成了Hexo的安装和本地项目构建。接下来我们只需项目目录下的_config.yml做简单的配置修改便将完成我们的博客搭建工作。 打开我们刚刚通过github创建的新项目，拷贝项目地址 然后再打开本地Hexo项目目录下的_config.yml文件，定位到deploy,将repository设置为github项目地址,修改配置为如下形式

image.png

将hexo同步到github

执行下列命令，保存项目设置并同步上传到GitHub

 hexo generate
 hexo deploy

如果上述步骤出现错误，请参考利用Github和Hexo快速搭建个人博客

使用triavs-ci自动同步

以上就完成了简单的将hexo 部署到github上，并手动build同步数据的过程。那么，我们是不是可以更加的省事一点，办法是有的，我们可以使用triavs-ci进行自动同步，说白了，就是triavs-ci会检测你的github项目，如果发生变化，就会自动的build你的代码。 本节参考用Travis CI自动部署hexo

在 Github 建立代码库

首先，要在 Github 上建立一个代码仓库，要将自己 hexo 博客 push 到上面。hexo 项目作为运行部署的项目，然后 Github Page 的项目作为部署的目标项目。

开启 Travis CI

第二步，我们需要有一个 Travis CI 的账号，直接进入 Travis CI 官网，用自己的 Github 账号授权登录即可。 然后可以看到当前账号的所有代码仓库，接下来将博客项目的状态设置为启用。

创建SSH key

第三步，创建一个部署在 Travis CI 上面的 SSH key 利用这个 SSH key 可以让 Travis CI 向我们自己的项目提交代码(也就是将博客部署到 zhio.github.io)。

ssh-keygen -t rsa -C "youremail@example.com"

得到 id_rsa.pub 和 id_rsa，然后将有 pub 后缀的配置到 zhio.github.io 的 Deploy key。 因为之前我们可能已经把id_rsa.pub作为了github与主机之间的key，所以 无需设置成个别项目的key,但是这样可能会有Travis CI操作整个仓库的权利，会对你的代码造成不安全的影响。所以你可以新建其他的key作为专有Travis CI key

加密私钥

刚才讲公钥文件配置好了，然后就要配置私钥文件，在 hexo 项目下面建立一个 .travis 的文件夹来放置需要配置的文件。 首先要安装 travis 命令行工具(如果在国内的网络环境下建议安装之前先换源)。

$ gem install travis

用命令行工具登录：

$ travis login --auto

然后将刚刚生成的 id_rsa 复制到 .travis 文件夹，用命令行工具进行加密：

$ travis encrypt-file id_rsa --add

这个时候会生成加密之后的秘钥文件 id_rsa.enc，原来的文件 id_rsa 就可以删掉了。 这时可以看到终端输出了一段 openssl aes-256-cbc -K $encrypted_xxxxxxxxxxx_key -iv $encrypted_xxxxxxxxxxx_iv 这样格式的信息，这是 travis 用来解密 id_rsa.enc 的 key，先保存起来，后面配置 .travis.yml 会用到它。 为了让 git 默认连接 SSH 还要创建一个 ssh_config 文件。在 .travis 文件夹下创建一个 ssh_config 文件，输入以下内容：

Host github.com
    User git
    StrictHostKeyChecking no
    IdentityFile ~/.ssh/id_rsa
    IdentitiesOnly yes

现在进入 travis CI 设置页面

image.png

image.png
顺便把上面的开关打开
image.png

这样，当向项目 push 代码的时候 travis CI 就会根据 .travis.yml 的内容去部署我们的项目了。

配置.travis.yml

在项目的根目录下创建.travis.yml文件

   language: node_js
   node_js:
   - '8'
   branches:
     only:
     - master
   cache:
     directories:
     - node_modules
  before_install:
  - openssl aes-256-cbc -K $encrypted_dbde745e8e2f_key -iv $encrypted_dbde745e8e2f_iv -in .travis/id_rsa.enc -out .travis/id_rsa -d
  - cp .travis/id_rsa  ~/.ssh/id_rsa
  - chmod 600 ~/.ssh/id_rsa
  - eval $(ssh-agent)
  - ssh-add ~/.ssh/id_rsa
  - cp .travis/ssh_config ~/.ssh/config
  - git config --global user.name "你自己的github账号"
  - git config --global user.email 你自己的邮箱
  install:
  - npm install hexo-cli -g
  - npm install
  script:
  - npm run deploy

好了现在只要向项目 push 代码就可以触发部署了，进入travis-ci.org就可以看到部署的过程了。 到此为止，我们实现了 在本地写完博客之后，直接git  push到github,就会自动构建出新的静态博客页面的功能，那么我们怎么实现，将语雀上发布的文章，直接同步到hexo上呢。

自动同步语雀到hexo

使用yuque-hexo

参考文档 链接 事先拥有一个 hexo 项目，并在 package.json 中配置相关信息，可参考 如下。

{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": "3.9.0"
  },
  "yuqueConfig": {
    "postPath": "source/_posts/yuque",
    "cachePath": "yuque.json",
    "mdNameFormat": "title",
    "adapter": "hexo",
    "concurrency": 5,
    "baseUrl": "https://www.yuque.com/api/v2",
    "login": "gpfer",
    "repo": "blog",
    "onlyPublished": false
  },
  "scripts": {
    "clean": "hexo clean",
    "clean:yuque": "yuque-hexo clean",
    "deploy": "npm run sync && hexo deploy",
    "publish": "npm run clean && npm run deploy",
    "dev": "hexo s",
    "sync": "yuque-hexo sync",
    "reset": "npm run clean:yuque && npm run sync"
  },
  "dependencies": {
    "core-js": "^3.1.4",
    "eslint": "^4.19.1",
    "hexo": "^3.9.0",
    "hexo-deployer-git": "^1.0.0",
    "hexo-generator-archive": "^0.1.5",
    "hexo-generator-category": "^0.1.3",
    "hexo-generator-index-pin-top": "^0.2.2",
    "hexo-generator-search": "^2.4.0",
    "hexo-generator-tag": "^0.2.0",
    "hexo-renderer-ejs": "^0.3.1",
    "hexo-renderer-marked": "^1.0.1",
    "hexo-renderer-stylus": "^0.3.3",
    "hexo-server": "^0.3.3"
  },
  "devDependencies": {
    "yuque-hexo": "^1.6.1"
  }
}

serverless

使用的是腾讯云的云函数服务 创建一个云函数,地区选择北京或者广州，之前创建函数的时候 其他地区不能使用触发器

基本配置

image.png

index.php

<?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 = '*****';  // 你的仓库id 或 slug
    $token = '******'; // 你的登录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;
}
?>

触发方式

image.png

会得到一个链接，就是上面打码的这个

语雀配置

配置一个仓库的webhook:

image.png
可以选择所有更新触发或者主动触发，主动触发的意思即发布需要勾选一个选项才会触发webhook。具体可参见语雀文档：www.yuque.com/yuque/devel…； 到此为止，我们就完成了将语雀发布的文章自动同步到hexo上。
image.png
image.png

代码地址：github.com/zhio/hexo_w… 网站地址：zhio.github.io/ 语雀地址：www.yuque.com/gpfer/

参考文献

Hexo 博客终极玩法：云端写作，自动部署链接 利用Github和Hexo快速搭建个人博客 用Travis CI自动部署hexo

avatar
文章
阅读
粉丝