How to Add a GitHub Actions Badge to Your Project

robdwaller

Rob Waller

Posted on March 20, 2020

How to Add a GitHub Actions Badge to Your Project

I've been playing with GitHub Actions for a couple of months now. I had been an ardent Travis loyalist, but given how impressive GitHub Actions are it feels inevitable I will make the switch.

One thing which tripped me up though was how to add GitHub Actions badges to my projects. This is so I can provide some observability and prove my projects build and the tests pass.

It turns out it is really simple, but it doesn't seem to be well documented anywhere. So I thought I'd make a note of it and share it.

To add a GitHub Actions badge to your project just use the following markdown. Obviously fill in the relevant {user}, {repo} and {action} information:

[![Actions Status](https://github.com/{user}/{repo}/workflows/{action}/badge.svg)](https://github.com/{user}/{repo}/actions)
Enter fullscreen mode Exit fullscreen mode

One thing which can be a little confusing is what the {action} name should be. This should reference the name property in the yaml action config file within your ./.github/workflows directory.

For a Rust project I recently worked on this is Build and Test.

name: Build and Test

on: [push]

jobs:
  build:
  ...
Enter fullscreen mode Exit fullscreen mode

The only change required for the badge URL is to replace the spaces with %20, so the URL {action} reference becomes Build%20and%20Test.

Here is an example from my Rust project which should make this clearer:

[![Actions Status](https://github.com/RobDWaller/csp-generator/workflows/Build%20and%20Test/badge.svg)](https://github.com/RobDWaller/csp-generator/actions)
Enter fullscreen mode Exit fullscreen mode

And you can see the working badge here:
Actions Status

I hope this info helps, have fun with GitHub Actions, and if you have any questions drop me a message @RobDWaller.

💖 💪 🙅 🚩
robdwaller
Rob Waller

Posted on March 20, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related