Adding Custom badges ๐Ÿ“› to Gitlab...

Aafaque A.
3 min readJun 21, 2019

--

By default, Gitlab provides only two badges for the group/project level.

  1. Pipeline badge
  2. Coverage badge

But we can add more badges based on project permissions and project nature. There are different ways to add custom badges to Gitlab project page.

There are already some instructions on Gitlab issues discussion and StackOverflow in bits and pieces. I am adding some detailed and easy steps here.

  1. Dynamic JSON file + Shields.io (For Public repositories)
  2. AnyBadge (For python projects)

Dynamic JSON file + Shields.io

Shields.io provide a way to generate dynamic badges for your Gitlab repository via a jsonfile. But if your repository is private (only accessible from internal network) then you will get an inaccessible message in your badges.

Steps:

Create a shell script get-updated-badge-info.sh (code below) in your repository that can grab the information based on git repository or other code dependencies and add those into a json file.

Add a build step in Gitlab CI/CD .gitlab-ci.yml file, insideafter_script configuration to run the shell script get-updated-badge-info.sh, and use artifacts to upload the JSON file to be available once the pipeline is done.

after_script will make sure that even some error happens json will be generated and pushed to artifacts (must use when: always in artifacts)

Once the artifact badges.json is uploaded and publicly available, we can use Shields.ioโ€™s dynamic badge creation option from json file. Simply navigate to the dynamic section of shield.io and add details or follow the pattern in link below and verify it returns you a badge with the information in your JSON file.

https://img.shields.io/badge/dynamic/json.svg?label=YourLabel&url=https://example.gitlab.com/{project_path}/raw/{branch_name/badge.json&query=commits&colorB=brightgreen

query can be set to any json keys like query=release_tag

Once the badge has been created, that can be used in Gitlab.

Go to project Settings > General> Badges and add URL link and image URL click on Add Badge and it will be available on your project page.

AnyBadge

Anybadge can be used to add badge generation to your Python projects, and also provides a command line interface.

If your build uses python Docker images or any other python installation with dependencies, you can simply install the anybadge package and generate svg badges to be used in the project from the artifacts directly.

Add Gitlab CI/CD configuration in .gitlab-ci.yml having python installation or using python docker image. Install pip install anybadge inside docker image and create a badge using cli for anybage for anything and upload to artifacts using after_script and artifact push configuration of when:always in case of pipeline error out, the badge will be created.

After the pipeline is finished commits.svg will be pushed to artifacts and can be used directly in adding badges. To access svg from artifacts the URL should be of below pattern.

http://example.gitlab.com/%{project_path}/-/jobs/artifacts/<ref>/raw/commits.svg?job=create_badge_svg

replace <ref> with branch_name or commit_id , and note ?job=job name, this is required else badge will not be created.

Go to Gitlab project Settings > General > Badges and add the Badge image URL above with <ref> as branchname or commit_id

After adding this you can see the badge on project main page

This way as many badges as you want can add on the project.

Let me know if there are other ways to add these badges in Gitlab in comments.

--

--