Display your Github repos with jQuery and Mustache.js

After failing to keep a simple Markdown document with up-to-date information of all my Github repositories I decided to skip using that method in favor of something more efficient. I didn’t have to look any further than using jQuery’s getJSON function and the JavaScript implementation of the Mustache templating engine. The end result looks pretty neat, although I think I’m going to tweak the UI a bit. I also created a repository for it on Github.

The JavaScript

This is the function itself:

function getGithubRepositories(username) {

  "use strict";

  var repoList = $("#repo-list");

  var githubUsername = function(username, callback) {
    $.getJSON("https://api.github.com/users/" + username + "/repos?callback=?",

  githubUsername(username, function(data) {

    var template    = $("#github-repos").html(),
        information = Mustache.render(template, data);




And you simply use it like this:

$(document).ready(function() {

  "use strict";


Just replace gummesson with your own username and you’re good to go!

The template

Pro-tip: If you’re planning to use Mustache.js on a Jekyll site like I do, don’t forget to wrap the <script> template in a raw block.

<ul id="repo-list">
  <script id="github-repos" type="text/template">
        <a href="{{html_url}}" title="{{name}}" alt="{{name}}">

I essentially only wanted to display the name, the URL and the language but you can of course add about a million other things like the description, how many forks the repo has and so forth.

comments powered by Disqus