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

栏目:刮痧 来源:股份在线 时间:2019-05-14

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

一、Hexo+Github 的痛点

1. 为啥要用hexo+github?

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

2. 蛋疼的写作体验

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

  • 博客源码怎么管理?

  • 图片存在哪?

  • 如何编写markdown文件?

相信很多人都在使用本地编辑器来写博客,那体验,真心蛋疼,比如说vscode,可视化插件一般般,图片还不能复制黏贴,想插入个图片还要先保存成文件放在本地,然后再引用,啥?你说七牛云存储?哪有复制黏贴爽呀~

当然,博客源码可以使用travis-ci来做持续集成,想写博客或者换个电脑,clone一下源仓库,写完push一下,就可以不用管了。but,比起独立站点的博客,如wordpress,还是觉得写作体验有点不爽。

3. 脑洞大开

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

markdown编辑器也是巨爽:

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

二、具体方案

整体流程:

  • 语雀发布一篇文章

  • webhook:调用serverless函数

  • serverless:发起请求trigger一个build任务

  • travis-ci:同步语雀文章并构建hexo

  • github:生成静态页面展示

1. hexo+github+triavs-ci

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

比如:

  • 使用Hexo+Github+TravisCI搭建自动发布的静态博客系统

  • GitHub pages + Hexo 搭建自己的个人博客

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

这是一个开源库:https://github.com/x-cold/yuque-hexo,用法也很简单:

1)修改package.json,增加配置

  1. ?"yuqueConfig": {

  2. ? ?"baseUrl": "https://www.yuque.com/api/v2",

  3. ? ?"login": "u46795",

  4. ? ?"repo": "blog",

  5. ? ?"mdNameFormat": "title",

  6. ? ?"postPath": "source/_posts/yuque"

  7. ?},

2)增加命令

  1. ?"scripts": {

  2. ? ?"sync": "yuque-hexo sync",

  3. ? ?"clean:yuque": "yuque-hexo clean",

  4. ? ?"deploy": "npm run sync && hexo clean && hexo g -d",

  5. ?},

附上我的package.json文件。

2. serverless

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

1)创建函数

2)serverless 函数示例

  1. php

  2. function main_handler($event, $context) {

  3. ? ?// 解析语雀post的数据

  4. ? ?$update_title = '';

  5. ? ?if($event->body){

  6. ? ? ? ?$yuque_data= json_decode($event->body);

  7. ? ? ? ?$update_title .= $yuque_data->data->title;

  8. ? ?}

  9. ? ?// default params

  10. ? ?$repos = 'xxxx'; ?// 你的仓库id 或 slug

  11. ? ?$token = 'xxxxxx'; // 你的登录token

  12. ? ?$message = date("Y/m/d").':yuque update:'.$update_title;

  13. ? ?$branch = 'master';

  14. ? ?// post params

  15. ? ?$queryString = $event->queryString;

  16. ? ?$q_token = $queryString->token ? $queryString->token : $token;

  17. ? ?$q_repos = $queryString->repos ? $queryString->repos : $repos;

  18. ? ?$q_message = $queryString->message ? $queryString->message

相关文章
评论
新版评论功能开发中
头条推荐
最新资讯