Stoat：一站式 GitHub action，可以在每个 pull request 上显示自定义控制面板

[tuliren]

我和朋友开发了一个 GitHub action ，名叫 Stoat ，可以给 GitHub pull request 提供一站式服务。

文档： https://docs.stoat.dev/docs/intro

示例： https://github.com/stoat-dev/stoat-action/pull/43#issuecomment-1344719650

以上截图显示的是在 GitHub pull request 下，Stoat 以置顶评论的形式，显示的项目信息。目前主要开发了两个小组件：HTML 预览，以及 GitHub job 运行时间跟踪。

• HTML 预览：可以上传并托管项目构建过程中生成的任意静态 HTML 文件或者文件夹。常见的使用场景包括：预览测试覆盖率报告、文档、前端 storybook 。

• GitHub job 运行时间跟踪：为 pull request 中所有 GitHub workflow job 绘制运行时间变化图。常见的使用场景是，查看新的代码有没有给 job 运行时间带来意料之外的变化。

每次有新的 commit 和 GitHub workflow run ，pull request 上的这条评论都会自动更新。这种显示的形式类似 Vercel ，但是支持更多的功能。

---

以 Storybook 为例，假设现有一个前端项目，已经安装了 Storybook ，并且已存在一个 GitHub action ，会构建 Storybook 。那么可以使用方法如下：

1. 安装 Stoat app： https://github.com/apps/stoat-app/
2. 创建一个配置文件：.stoat/config.yaml

---
version: 1
enabled: true
tasks:
  # 自定义的任务 ID
  # 这是一个 HTML 托管任务
  preview-storybook:
    static_hosting:
      # 构建好的 Storybook 的文件夹，通常是 storybook-static
      path: storybook-static
  # 这是一个 job 运行时间跟踪任务
  track-build-time:
    job_runtime:

1. 在现有的 GitHub workflow 中增加 Stoat action

# 这是现有的 workflow steps
- name: Checkout
  uses: actions/checkout@v3

- name: Set up Node
  uses: actions/setup-node@v3
  with:
    node-version: 18

- name: Build Storybook
  run: |
    npm install
    npm run build-storybook

# 在现有 workflow 末尾，添加 Stoat action
- name: Run Stoat Action
  uses: stoat-dev/stoat-action@v0
  if: always()

以上步骤的文档： https://docs.stoat.dev/docs/quick-start/storybook

更多示例： https://docs.stoat.dev/docs/category/quick-start

---

相比现有的各类托管 GitHub action ，这个项目的优势是：

• 通过一个通用的 action ，同时实现多种功能，不同再学习不同 action 的不同配置方式。
• 为项目的构建数据，提供存储、整合、展示一条龙服务。
• 以后开发者可以在 Stoat 的基础上，很方便地编写自己的 DevOps 逻辑。

项目是全英文开发，目前还没有中文文档，还请见谅。

感谢大家尝试使用！

[tuliren]

昨天新添加了运行时间的对比功能。每次在显示 pull request GitHub workflow job 运行时间的同时，也会显示 default branch （比如 master / main ）的运行时间，作为对照。如下图所示：


详见： https://docs.stoat.dev/docs/tutorials/build-runtimes

[tuliren]

原来回复不支持 markdown 图片……

https://stoat-dev--static.stoat.page/screenshot-graph.png