Add Your Git Commits to Your Website

Tina Huynh - May 4 '22 - - Dev Community

Have you wanted to share your git commit chart on your personal website? It's a lot easier than you think!!

Thanks to people such as Jason Long and people on StackOverflow, there are countless of answers! Jason uses obelisk.js, which is a a JavaScript library for building isometric pixel objects. You can create bricks, cube, pyramids, etc. within the HTML5 canvas.

codesnap code

This graph also links to Git Skyline

2d git commit graph

Here, yoshi389111 creates and updates a very detailed graph of git commits and uses GitHub actions. You're able to see a beautiful chart of your most used languages, the number of forks, etc. So much detail and you also get a various of style to choose from!

3d commit graph

This is how the graphs will appear in your repository once you have run the git action.

Github repo file structure

There's a basic green version with a white background, two season versions for Northern Hemisphere and Southern Hemisphere, a night view version, a night green version with a black background, a night rainbow version, and a git black version. Let me know which one is your favorite!

green version
green version

Northern hemisphere version
northern

Southern hemisphere version
southern

night view version
night view

night green version
night green

night rainbow version
night rainbow

git block version
potential 3d option

Happy coding!

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .