GitHub ビルド成功のバッジを README に表示させたい

Builded complete badge

README にこんな感じでバッジを貼りたい！

Goal

README に build 成功のバッジを表示する
GitHub だけで完結

GitHub Actions の workflow が成功したかどうかのステータスをバッジ表示できる

https://github.com/<OWNER>/<REPOSITORY>/actions/workflows/<WORKFLOW_FILE>/badge.svg

上記のフォーマットで任意の workflow の status をバッジとして表示できる

1. main ブランチが更新された際に build を実行してそのステータスを表示させる

いつもの React のプロジェクトなので、main ブランチが更新・PRがマージされた際に実行される workflow を作成する

.github/workflows/build.yml

# name が badge に表示されるラベルになる
name: Build
on:
  push:
    branches: ['main']
    paths:
      - '.github/workflows/build.yml'
      - 'src/**'
      - 'package.json'
      - 'tsconfig.json'

jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: ['lts/*']
    steps:
      - uses: actions/checkout@v3
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.node-version }}
      - name: setup
        run: npm ci
      # Test と build を実行
      - run: npm run test
      - run: npm run build

トリガーは pull_request: types: 'closed' でも良いが、個人プロジェクトなので直接 main ブランチに push することもあるだろうし PR marge 時は main ブランチに push されるので push をトリガーとした

⚠ `$default-branch` が効かない

$default-branch にしておくと main / master どちらでものブランチでも OK になるように GitHub の記事に書かれていたのですが、実際には動作しないようです…

The documentation on custom workflow templates linked in that changelog post says this:

If you need to refer to a repository’s default branch, you can use the $default-branch placeholder. When a workflow is created using your template, the placeholder will be automatically replaced with the name of the repository’s default branch.

So $default-branch doesn’t seem to be supported in the actual workflow file.
cf. $default-branch not working · community · Discussion #26597 · GitHub

つまり、GitHub上のテンプレートを使用して作成した場合は $default-branch がデフォルトブランチ名に置き換えられるけど、local で $default-branch としたファイルを作成しても置き換えられないので効かないということっぽい。
local で workflow のファイルを作成するときは自分のデフォルトブランチ名 (main / master) を直接指定する必要がある

2. README.md にバッジを表示するコードを追加する

![build status]
(https://github.com/<OWNER>/<REPOSITORY>/actions/workflows/<WORKFLOW_FILE>/badge.svg)

作成した workflow のファイル名が build.yml なので https://github.com/<OWNER>/<REPOSITORY>/actions/workflows/build.yml/badge.svg でバッジが表示できる
今回は main ブランチのみで実行するので ?branch=main パラメーターを付けて https://github.com/<OWNER>/<REPOSITORY>/actions/workflows/build.yml/badge.svg?branch=main とした

これで main ブランチが更新されたらBuild workflow が実行されバッジに Build: passing / Build: failure などのステータスが表示されるようになった
GitHub だけで完結でききるし簡単だしとても良かった！

おわり ₍ ᐢ. ̫ .ᐢ ₎

[参考]