Created: 2008-08-17 22:36
Updated: 2019-01-27 12:18
License: mit


GitHub Commit Badge

This badge/banner can be used for displaying the latest (or a specific commit) for a GitHub project on your website. It looks like this:

GitHub commit badge

It is implemented in JavaScript, meaning that it is completely client-based. I recently rewrote this whole project using CoffeeScript and SASS instead of plain JavaScript and CSS.


github-commit-badge uses jquery. Many websites/blogs already include it, but if you don't, then simply add this line to your website:

<script type="text/javascript" src=""></script>


To use the badge on your website, upload the 'css', 'html', 'img' and 'js' directories to your webserver. Then you can spawn badges on your website like this:

<div id="gcb-container">
	<script type="text/javascript">
		Badges = [
			{ "username": "heipei",       "repo": "github-commit-badge",  "branch": "master" },
			{ "username": "git",          "repo": "git",                  "branch": "master" },
			{ "username": "brotherbard",  "repo": "gitx",                 "branch": "experimental" },
			{ "username": "rep",          "repo": "hpfeeds" }
	<script type="text/javascript" src="js/gcb.js"></script>

If you want to use it on something like WordPress you'll have to put HTML quotes around the content of the first script-block

<script type="text/javascript">
		Badges = [



Q: How does it work? Where does the data come from?
A: For each repository, the code will issue two API requests to GitHub to fetch the information.

Q: Why is it called a badge when it's really more of a banner?
A: Because I noticed that calling it banner increases the risk of it being filtered by AdBlock etc.


To make changes you should really use CoffeeScript and Sass. Simply set up watchers like this:

	sass --watch scss:css
	coffee -c --watch -o js coffee


Johannes Gilger

Cookies help us deliver our services. By using our services, you agree to our use of cookies Learn more