DEV Community

Rob Waller
Rob Waller

Posted on

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.

Latest comments (6)

Collapse
 
christopherme profile image
Christopher Elias

Thank you! Really useful! I don't know why to GitHub doesn't specify this on their docs.

Collapse
 
amolgawai profile image
Amol

Is it possible to link to the latest build page instead of the actions page?

Collapse
 
anisha profile image
Anisha Mohanty

This is quite useful. Thanks for sharing!

Collapse
 
jefersonchaves profile image
Jéferson Chaves

Thanks for sharing it, Rob.

Collapse
 
sandordargo profile image
Sandor Dargo

This is great, I've been looking for this in the documentation and after all, once again, I ended up on DEV!
Thanks!

Collapse
 
robdwaller profile image
Rob Waller

Glad it helped!