Gitlabにカスタムバッジを作成する方法

• 概要
• 環境
• .gitlab-ci.yml
  • ちょっと説明
• プロジェクト側でバッジを参照する
• 動作確認
• 最後に
• 参考サイト

概要

デフォルトだとパイプラインやカバレッジなどのバッジは用意されています
これ以外のバッジを作成する場合は自分で作成する必要があります
今回はカスタムバッジを AnyBadge を使って作成する方法を紹介します

環境

• Gitlab-ee 15.4.3-ee

.gitlab-ci.yml

流れとしてはまず CI 上でバッジ情報を作成します
そして作成したバッジをプロジェクトのバッジ設定から参照するようにする感じです

まずは .gitlab-ci.yml から作成します

stages:
    - build

create_badge_svg:
  stage: build
  image: python:3.10.9
  script:
    - echo "Python other dependencies installation"
  after_script:
    - pip install anybadge
    - d=$(date "+%Y/%m/%d")
    - anybadge -l "Today is" -v $d -f today.svg -c green
  artifacts:
    paths:
        - today.svg
    when: always
    expire_in: 4 weeks

ちょっと説明

簡単にやっていることを説明するとまず anybadge をインストールしています
すると anybadge というコマンドが使えるようになります
今回は日付の情報を表示するバッジを作成したいと思います
date コマンドで本日の日付を取得してその情報を anybadge コマンドに与えて svg ファイルを作成します
あとは作成した svg ファイルを artifacts で保存すれば OK です

プロジェクト側でバッジを参照する

Settings -> General -> Badges から新規でバッジを作成します

• Name･･･なんでもOKです
• Link･･･バッジをクリックしたときに飛ぶURLを記載します、これも何でもOKです
• Badge Image URL･･･ここに gitlab-ci で作成したバッジの URL を記載します

サンプルは以下の通りです

• Name･･･Today
• Link･･･https://calendar.google.com
• Badge Image URL･･･https://your.gitlab.com/api/v4/projects/%{project_id}/jobs/artifacts/master/raw/today.svg?job=create_badge_svg

svg を直接ダウンロードできる URL を指定する必要があります
今回は master ブランチの最新のジョブの svg ファイルを参照する API をコールすることで取得しています
他にも取得する方法はあるのでお好きな方法でアクセスしてください

動作確認

あとはバッジを追加してプロジェクトの先頭にいけばバッジがあることを確認できると思います

最後に

AnyBadge を使って Gitlab にカスタムバッジを作成する方法を紹介しました
今回は gitlab-ci と組み合わせて作成しましたが結局 svg ファイルがあればいいので無理に CI と組合わせる必要はありません

参考サイト

• https://medium.com/@iffi33/adding-custom-badges-to-gitlab-a9af8e3f3569