How to Embed GitHub Contributions Chart/Calendar
Wouldn’t it be great to embed your GitHub contribution chart/calendar into any web page?
Well you can, and it’s very easy!
How to embed GitHub contributions on a website
First you need a web page where you can embed HTML. If you need help with setting up a website, we’ve provide more complete instructions here.
If you already have a web page ready, then embed your contributions chart by using the below HTML image code, just replace username with your GitHub username (e.g. from https://github.com/username) .
<img src="http://ghchart.rshah.org/username" alt="Name Your GitHub chart">Here’s an example of what it’ll look like:
If you want to use a custom color for the chart use the below code with your HEX color.
<img src="http://ghchart.rshah.org/HEXCOLORCODE/username" alt="Name Your GitHub chart" />Here’s an example of what it’ll look like:
That’s it, you’re done! Here’s a look at example charts using the code:
Resources
- The GitHub repo: https://github.com/2016rshah/githubchart-api
- The site for this project: https://ghchart.rshah.org
- The Ruby gem: https://github.com/akerl/githubchart
- Need hosting to host this? Get discounted Hosting here: https://profitpress.local/tools/#products
How Can We Make This Better?
How can we make this how-to guide better? What wasn’t clear? Please let us know in the comments!