GitHub is a web-based hosting service for software development projects that use the Git version control system. Our projects are stored in form of repositories which are nothing more than directory or folder as we speak. Sometimes we want to list them in our private blog or websites. But right now, github doesn’t seem to offer this service. But this doesn’t mean there’s not any other way.

Steps to list the Github repos

Getting into the code, open up the file where you want to list the repo. Note that this is not the automatic process.

Insert the following code anywhere you would like to display the repo.

<div class=”github-widget” data-repo=”githubuser/githubrepo”></div>

Now replace the githubuser with your user name and githubrepo with the name of the github repository. For listing more than one repo, replace the same code with different github repo name.

Then include the JavaScript file somewhere after you’ve include jQuery:

<script type=”text/javascript” src=”jquery.githubRepoWidget.min.js”></script>

Here is  the link to the Repo for listing Github projects

All of the styling is included and image assets are pulled from GitHub. Here is the sample image for listing one of my github repo.

You can also directly see the latest commit date and even download the zip file. The only downside is API limit rate exceeds if the widgets is refreshed or called for more than 60 times in an hour. To avoid rate limit exceed, visit github docs.