Hexo：语雀云端写作，Github Actions持续集成

最新推荐文章于 2024-09-12 08:00:50 发布

置顶 _Johnny_

最新推荐文章于 2024-09-12 08:00:50 发布

阅读量5.8k

点赞数 12

分类专栏： Hexo 文章标签： Github Actions 持续集成云端写作语雀 hexo

本文链接：https://blog.csdn.net/z_johnny/article/details/104629805

版权

Hexo 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文章为原创内容，只发布于我的私人博客、我的 Django 博客和本博客，转载请注明，谢谢

本文已被 yuque-hexo 的开发作者列为最佳实践典型

使用 Hexo 静态博客网站发表文章，需要

本地以Markdown的形式写好文章
借助 Hexo 生成静态页面
部署到云主机或者通过 git 到托管平台

既然要本地借助 Hexo 生成静态页面，那就需要设置 Node.js 环境和博客源码，虽然环境设置简单，源码从Github、coding、gitee、gitlab等地方下载方便，但是在换电脑之后，又要重复相同的事情，还是比较麻烦，前一阵我用 docker 将我的博客源码打包成镜像留存下来，也是面临同样的问题，就是换电脑后还要安装 docker 和 docker-compose，也是麻烦。

当我遇见了 Github Actions 和 yuque-hexo 后，一切都发生了变化

简单来说就是

由 Hexo + 语雀 + yuque-hexo + Github Actions + web hook + severless 打造的持续集成个人博客

至于托管平台，Github Pages or Coding Pages or VPS or Other，自行选择。

Github 保存博客源码，私有库已经免费，还在用Travis CI？非开源的私有项目想在 Travis CI 上构建价格还是非常感人的!
Github Actions 是 Github 推出的一款持续集成工具，完全免费
语雀是阿里人都在用的笔记与文档知识库，专业的云端知识库，支持web hook
yuque-hexo 是 Github 上开源的一款语雀知识库同步工具
severless 是云函数，当前腾讯云函数和阿里云函数都可以免费提供，对于博客，免费额度足够了，可以对比一下费用自行选择

关于 Hexo

Hexo 是一款基于 Node.js 的静态博客框架，其快速、简洁且高效。没有数据库和后台的概念。

超快速度，Node.js 所带来的超快生成速度，让上百个页面在几秒内瞬间完成渲染。
Hexo 支持 GitHub Flavored Markdown 的所有功能，甚至可以整合 Octopress 的大多数插件。
一键部署，只需一条指令即可部署到 GitHub Pages, Heroku 或其他平台。
插件和可扩展性，强大的 API 带来无限的可能，与数种模板引擎（EJS，Pug，Nunjucks）和工具（Babel，PostCSS，Less/Sass）轻易集成

关于 Github Actions

不妨先去了解一下

About GitHub Actions

GitHub Actions 入门教程

[译] GitHub Actions 介绍，了解一下？

我的博客持续集成和交付专栏有实例可以去参考一下，后续还会继续更新。

或者我的 CSDN 博客

repository_dispatch

之所以有了这篇文章是因为我看到了Github Actions中的外部事件repository_dispatch

GitHub Actions 支持的外部事件repository_dispatch 必须具有以下请求头：

curl -X POST https://api.github.com/repos/:owner/:repo/dispatches \
    -H 'Accept: application/vnd.github.everest-preview+json' \
    -H "Authorization: token GITHUB_PERSONAL_ACCESS_TOKEN" \
    -d '{"event_type":"start"}'

如果返回的 Response 是 Status: 204 No Content，那就是成功了，去 Github 中看一看，事件已经被触发，这个可以使用 postman 测试一下
在这里插入图片描述
注意，Accept 具有application/vnd.github.everest-preview+json自定义媒体类型值。

语雀中的Web Hook是不能添加请求头的，所有我们就需要一个中间件把他们连接起来，这个就是serverless云函数

具体流程

Hexo 博客搭建好，将源码上传到 Github，私有还是公有库都可以
在 Github 中开启 Github Actions 服务，配置 yaml 格式的deploy脚本
注册语雀，创建知识库并发布一篇文章，必须发布过文章，因为 yuque-hexo 会删除 _posts 文件夹
编写 serverless函数，测试可以触发 Github Actions，获取触发地址
配置语雀的 webhook，使其可调用 serverless 函数
触发 Github Actions 实现 Hexo 的自动部署，生成静态文件并发布

下面以Github Actions将Hexo生成的静态页面推送到Github Pages举例

创建 Github Pages

登录github
创建项目，项目名字username.github.io，必须为公开库

创建 Hexo 博客并配置

可参考：

配置完成，本地预览达到自己满意，编写文章发布一切搞定后就能继续了。

创建 Github 源码仓库

在github上创建存放 Hexo源码的仓库，此仓库和 Pages 不是一个仓库，并将源码push到此仓库

私有库和公开库都可以，放在 Pages 仓库其他分支也行，本教程是基于单独的 Hexo 源码仓库

配置 Github Actions 脚本

两种方法配置，内容一样

在Hexo源码仓库的页面选择Actions-->Set up a workflow yourself，进行网页编写
在本地环境根目录创建.github/workflows文件夹，里面放写好的 yaml 脚本

脚本我以一种举例，其他方法同样可以实现，请查看我的博客

如

# workflow name
name: Deploy To Github Pages

# 当有 push 到仓库和外部触发的时候就运行
on: [push, repository_dispatch]

# YUQUE_TOKEN
# Github_SSH_PRIVATE_KEY
jobs:
  deploy: 
    name: Deploy Hexo Public To Pages
    runs-on: ubuntu-latest 
    env:
      TZ: Asia/Shanghai    
        
    steps:
    # check it to your workflow can access it
    # from: https://github.com/actions/checkout
    - name: Checkout Repository master branch
      uses: actions/checkout@master 
      
    # from: https://github.com/actions/setup-node  
    - name: Setup Node.js 10.x 
      uses: actions/setup-node@master
      with:
        node-version: "10.x"
    
    # from https://github.com/x-cold/yuque-hexo
    - name: Setup Hexo Dependencies and Generate Public Files
      env:
        YUQUE_TOKEN: ${{ secrets.YUQUE_TOKEN }}
      run: |
        npm install hexo-cli -g
        npm install yuque-hexo -g
        npm install
        npm run start
        
    # from https://github.com/peaceiris/actions-gh-pages    
    - name: Deploy
      uses: peaceiris/actions-gh-pages@v3
        with:
          deploy_key: ${{ secrets.Github_SSH_PRIVATE_KEY }}
          external_repository: 用户名/仓库
          publish_branch: master
          publish_dir: ./public
          commit_message: ${{ github.event.head_commit.message }}

这个脚本实现了发布 Hexo 的 Public 到 Pages，这只是一种方法，你也可以使用 hexo d 、API、github-pages-deploy-action等形式进行发布。

但是现在你还不能运行，因为里面的隐藏参数还没有设置

参数	说明
YUQUE_TOKEN	从语雀获取的TOKEN，语雀上点击个人头像 --> 设置 --> Token 即可获取，要在Hexo源仓库的Settings–>Secrets中进行添加，对重要信息进行保密
Github_API_Token	是`SSH-Key`密钥中的私钥，需要在`Secrets`中进行添加，公钥（.pub）已经存储在 Github 中

配置腾讯云函数

登录腾讯云，搜索云函数，创建
选择 python，2.7和3.6都行，空白函数
运行角色，SCF_QcsRole 即可
注意执行方法，有强制要求

这里我使用的是python 2.7

# -*- coding: utf8 -*-
import requests

def main_handler(event, context):
    r = requests.post("https://api.github.com/repos/用户名/仓库名/dispatches",
    json = {"event_type": "start"},
    headers = {"User-Agent":'curl/7.52.1',
              'Content-Type': 'application/json',
              'Accept': 'application/vnd.github.everest-preview+json',
              'Authorization': 'token Github访问Token'})

    if r.status_code == 204:
        return "This's OK!" 
    else:
        return r.status_code

在函数代码中测试一下，如果Actions正常触发，大功告成

配置触发方式，保存，获取到访问路径

触发方式：API网关触发器
API服务类型：新建API服务
API服务：SCF_API_SERVICE
请求方法：ANY
发布环境：发布
鉴权方法：免鉴权
启动集成响应：未启用

配置语雀

语雀上

注册，登录
创建知识库–>文档知识库–>可见范围为互联网可见
工作台–>知识库–>找到新创建的知识库，管理–>设置–>路径进行自定义，后面有用
工作台–>知识库–>找到新创建的知识库，管理–>设置–>开发者–>名称任意。URL为云函数的地址，即上面获取到的访问路径

权限建议选择

仅主动推送更新触发（强烈建议）
发布文档
更新文档
删除文档

hexo源码上

可本地更新后push或者直接github网页修改

先安装 yuque-hexo

npm install yuque-hexo --save

编辑package.json文件，添加以下内容

Npm Scripts “start” 和 yuqueConfig，将操作命令合并为一个脚本，只需要执行npm run start即可完成语雀的同步和Hexo的清理和静态文件生成，yueque记得要用最新版本

{

 ...
 
  "scripts": {
    "start": "yuque-hexo clean && yuque-hexo sync && hexo clean && hexo generate",
    "build": "hexo generate",
    "clean": "hexo clean",
    "deploy": "hexo deploy",
    "server": "hexo server"
  },
  
 ...
 
  "yuqueConfig": {
    "baseUrl": "https://www.yuque.com/api/v2",
    "login": "语雀个人路径",
    "repo": "知识库名称",
    "mdNameFormat": "title",
    "postPath": "source/_posts",
    "onlyPublished": false
  }
}

Come on 发布文章

无论是发布新文章还是更新删除等等操作，只要选择“文档有较大更新，推送给关注知识库的人”即可自动触发

下面推荐了一下我的博客主题，算是广告吧~！！

关于 halo

本人目前使用的主题是 hexo-theme-halo ，这是一个采用 Material Design 和响应式设计的 Hexo 博客主题。是博主基于 hexo-theme-matery 主题修改而来。

主题演示

特性

简单漂亮，文章内容美观易读
Material Design 设计
博客名字动态显示，文章信息统计统页面展示
响应式设计，博客在桌面端、平板、手机等设备上均能很好的展现
首页轮播文章及每天动态切换 Banner 图片，首页轮播图设置为70%页面高度
首页subtitle替换打字效果，添加动态诗词自动切换，
瀑布流式的博客文章列表（文章无特色图片时会有 24 张漂亮的图片代替）
时间轴式的归档页，增加简约风归档页面
分类页、标签页和标签云同一页面显示，集中展示
丰富的关于我页面（包括关于我、文章统计图、我的项目、我的技能、相册等可自定义）
可自定义的数据的友情链接页面
支持文章置顶和文章打赏
类似于Python Django中SLUG用法的urlname
支持 MathJax
TOC 目录
可设置复制文章内容时追加版权信息
可设置阅读文章时做密码验证
Gitalk、Gitment、Valine 和 Disqus 评论模块（推荐使用 Gitalk）
集成了不蒜子统计、谷歌分析（Google Analytics）和文章字数统计等功能
支持在首页的音乐播放和视频播放功能
支持emoji表情，用markdown emoji语法书写直接生成对应的能跳跃的表情。
支持 DaoVoice、Tidio 在线聊天功能。

下载

当你看到这里的时候，应该已经有一个自己的 Hexo 博客了。如果还没有的话，不妨使用 Hexo 和 Markdown 来写博客和文章。

点击这里下载 master 分支的最新稳定版的代码，解压缩后，将 hexo-theme-halo 的文件夹复制到你 Hexo 的 themes 文件夹中，并修改主题配置项即可。

当然你也可以在你的 themes 文件夹下使用 git clone 命令来下载:

git clone https://github.com/hongweifuture/hexo-theme-halo.git themes/halo

配置

详情请参照 hexo-theme-halo

_Johnny_

关注

12
点赞
踩
21

收藏

觉得还不错? 一键收藏
8
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录