Basic Django app using the Github API
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

Django app with the Github API

Today we are going to build a simple app that consumes the JSON response of a simple GitHub API request. We shall be using the following technologies:

  • Python/Django
  • Requests
  • Pipeline
  • NodeJS
  • Bower

That is all the technology we shall need. Python and Django will provide the framework for the application. Requests will be used to make a simple request to the Github API. NodeJS and Bower will be used for front end dependency management and Pipeline will do the asset compression.

The Github resources we shall use:

  • Github API
  • Primer CSS kit
  • Octicons

Getting Started

This tutorial assumes a knowledge of virtual environments. The use of virtualenv and virtualenvwrapper is highly recommended. If you don't have these, you can install them using pip with the following commands:

$ pip install virtualenv
$ pip install virtualenvwrapper

You should then create a virtual environment. Ours will be called gitit. Get it?

$ mkvirtualenv gitit

This should activate a virtualenv called Gitit. We shall then install Django, Requests and Pipeline.

$ pip install Django==1.8.6
$ pip install requests
$ pip install django-pipeline

When you run the pip freeze command it should show the following:


Switch to the directory where you intend to create the project and run the command to start a project.

django-admin startproject gitit

This should give us the following directory structure

├── gitit
│   ├──
│   ├──
│   ├──
│   └──

This is the basic directory structure of a Django project with no apps. We shall now proceed to create directories for our static files and the templates.

cd gitit
mkdir static templates
mkdir static/js static/css

It now time to run our server just to ensure that everything is fine.

python runserver

It should run fine, but we need to run migrations to assuage the server gods so run the migrate command

python migrate

Let's create the app

Great, now time to create the app. We shall call it yokogao the Japanese word for profile of a face as seen from the side. This may need clarification :)

python startapp yokogao

Our structure should now have changed to this:

├── db.sqlite3
├── gitit
│   ├──
│   ├── __init__.pyc
│   ├──
│   ├── settings.pyc
│   ├──
│   ├──
│   └── wsgi.pyc
├── static
│   ├── css
│   └── js
├── templates
└── yokogao
    ├── migrations
    │   └──

It is now time to customize our settings so as to enable the app work best within the project. Let us add the app to the installed apps


    #local apps

We should now be ready to create the views that allow us to access the Github API and request the basic information we require for our app. For more about the information returned by the API, use Curl


For a simple Curl tutorial that uses the Github API, check this one out.

Please use your Github username wherever raybesiga is used

Edit the yokogao/ file to look this way:

from django.shortcuts import render, HttpResponse
import requests
import json

def index(request):
    yoko = requests.get('')
    content = yoko.text
    return HttpResponse(content)

You should note that we import requests and json. Requests to query the API, and JSON to handle the JSON returned. We shall store the JSON as text in the content variable, for now.

You should now create a URLS file at yokogao/

from django.conf.urls import url
import views 

urlpatterns = [
    url(r'^$', views.index, name='index'),

Head over to gitit/ and edit the file so as to use the Yokogao URLs for the app

from django.conf.urls import include, url
from django.contrib import admin

urlpatterns = [
    url(r'^admin/', include(,
    url(r'^', include('yokogao.urls')),

If you run your server now, you should be able to see this in your browser, albeit without format

   "name":"Ray Besiga",
   "company":"Sparkplug ",
   "location":"Kampala, Uganda",

Let us build templates

Great, we are now at the step where we can show stuff in the browser. However, there is business we need to take care of before we can even build our base template. Time to do some front end stuff. Remember the NodeJS and Bower I mentioned earlier? Yeah, now is the time to use it. Ensure you have NodeJS and NPM installed on your machine. More on that here

We shall install Bower and Yuglify, Pipeline's default JS and CSS compressor.

$ npm install -g bower
$ npm install -g yuglify

To keep things interesting, we shall use the Primer toolkit by Github. It is purposely incomplete an they do say so themselves

Heads up! We love open source, but Primer is unlikely to add new features that are not used in It's first and foremost our CSS toolkit. We really love to share though, so hopefully that means we're still friends <3.

Let us proceed to use it in our app, change directory to the static/css folder and run the following command

bower install primer-css --save

You should now have a bower_components folder therein with the primer-css and octicons child directories. Time to make changes to the settings file so as to use these assets in our templates.

Change the Templates section of the settings as follows:

        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': ['templates'],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [

Add the following for the STATIC to comply

STATIC_ROOT = os.path.join(BASE_DIR, 'static')

# Django Pipeline


PIPELINE_CSS_COMPRESSOR = 'pipeline.compressors.yuglify.YuglifyCompressor'

        'yokogao': {
            'source_filenames': (
            'output_filename': 'css/yokogao.css',
            'extra_context': {
                'media': 'screen,projection',

Great, the settings are looking good, the stars should be aligned, time to collect our compressed static.

python collectstatic

The output is long but at the bottom, you should have something similar to this at the bottom:

62 static files copied to '/Users/raybesiga/Projects/gitit/static', 64 post-processed.

We shall now proceed to use the static in our templates. Change directory to the templates folder and create a base.html file. Mine looks something like this:

{% load pipeline %}
<!DOCTYPE html>  
<html lang="en">  
    <meta charset="utf-8">
    <title>{% block title %}Build with the Github API{% endblock %}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Building with the Github API">
    <meta name="author" content="Ray Besiga">

    <!-- Styles -->
    {% stylesheet 'yokogao' %}
    <div class="container">
      {% block content %}

      {% endblock %}
    <!-- Javascript -->
    {% block extra_scripts %}
    {% endblock %}


Please note that we include {% load pipeline %} at the top and then use {% stylesheet 'yokogao' %} for the output stylesheet.

We shall proceed to create the templates folder and the index.html file for the app within the yokogao folder.

$ mkdir yokogao/templates/yokogao
$ cd yokogao/templates/yokogao
$ touch index.html

Before we can show data in the index.html file, we need to get the context data within the views file. Let is make those changes to our yokogao/ file.

from django.shortcuts import render, HttpResponse
import requests

def index(request):
    yoko = requests.get('')
    lisht = []
    cleanedData = []
    yokogaoData = {}
    for data in lisht:
        yokogaoData['name'] = data['name']
        yokogaoData['blog'] = data['blog']
        yokogaoData['email'] = data['email']
        yokogaoData['public_gists'] = data['public_gists']
        yokogaoData['public_repos'] = data['public_repos']
        yokogaoData['avatar_url'] = data['avatar_url']
        yokogaoData['followers'] = data['followers']
        yokogaoData['following'] = data['following']
        yokogaoData['location'] = data['location']
        yokogaoData['created_at'] = data['created_at']
        yokogaoData['updated_at'] = data['updated_at']
    return render(request, 'yokogao/index.html', {'data': yokogaoData})

Then edit the index.html file

{% extends "base.html" %}

{% block title %} Github Yokogao {% endblock %}

{% block content %}

<div class="columns centered">
    <div class="one-third column centered">
        <h3>Basic Django app with the Github API</h3>

<div class="columns">
  <div class="one-third column centered">
    <img class="avatar" src="{{ data.avatar_url }}" width="300" height="300" style="border-radius: 50%;">
  <div class="one-third column centered">
  <div class="one-third column centered">
        <nav class="menu">
            <a class="menu-item" href="#">
            <span class="octicon octicon-person"></span>
            {{ }}
          <a class="menu-item" href="#">
            <span class="octicon octicon-location"></span>
            {{ data.location }}
          <a class="menu-item" href="#">
            <span class="octicon octicon-list-ordered"></span>
            <span class="counter">{{ data.public_repos }}</span>
            Public Repos
          <a class="menu-item" href="#">
            <span class="octicon octicon-bookmark" ></span>
            <span class="counter">{{ data.followers }}</span>
          <a class="menu-item" href="#">
            <span class="octicon octicon-eye"></span>
            <span class="counter">{{ data.following }}</span>
          <a class="menu-item " href="{{ }}" target="_blank">
            <span class="octicon octicon-globe"></span>
            Website: {{ }}

<div clas="columns">
    <div class="one-third column centered">
        <h4>Built with <span class="octicon octicon-heart" ></span> using the Github API and Primer</h4>

{% endblock %}

Now if you run your server, you should have the browser showing your yokogao on the index page.

Create a local settings file

The project has been updated a couple of times, make sure to add the following to your local settings

GITHUB_USER = 'your_github_username'
DEBUG = True