Over a million developers have joined DZone.

Private Web Application Running on Github

DZone's Guide to

Private Web Application Running on Github

· DevOps Zone ·
Free Resource

Do you need to strengthen the security of the mobile apps you build? Discover more than 50 secure mobile development coding practices to make your apps more secure.

I wanted to launch a small web application in stealth mode. I also wanted it to run completely on GitHub, using GitHub Pages. I was able to setup a GitHub repository, as a private repo, then was able to launch a GitHub Page for the same repository and make this branch public.

This approach gives me two branches to work with. The master which is private and the gh-pages which is public. Using Jekyll I was able to quickly setup a basic website in the gh-pages brand of my repository. Once I had the basic site outline and index page setup, I needed a way to make content show on each page, but only for people who had access.

To secure my website I did two things. First I setup a JSON file that was stored in the private, master branch of my site repository. Then I setup my site to pull the navigation of the site and the content for each page from this JSON file. My site would load the home page, about page and other pages from this private JSON file.

Next I needed to provide a key to my private website, one that would allow the public gh-pages branch to pull the JSON file from the private master branch. I opted to use oAuth as the authentication layer. I went to my GitHub settings and generated an oAuth key for a specific application I set-up for my project. Using this key I can control who has access to my site.

  <script type="text/javascript">
        function getUrlVar(key){
            var result = new RegExp(key + "=([^&]*)", "i").exec(window.location.search); 
            return result && unescape(result[1]) || ""; 
        $ThisPage = getUrlVar('p');    
            $ThisPage = "Home";
        $token = getUrlVar('t');
        var github = new Github({
            token: $token,
            auth: "oauth"
        var repo = github.getRepo('kinlane', 'api-commons');
        repo.read('master','site.json',function(err, data){            
            if(!err) {
                $Site = jQuery.parseJSON(data);
                // Build the navigation
                $.each($Site['navigation'], function($key, $value) {
                    $value = $value + '?p=' + $key + '&t=' + $token;
                    $NavigationString = '<li><a href="' + $value + '" title="' + $key + '">' + $key + '</a></li>';
                // Build the Page Content
                $.each($Site['pages'], function($key, $value) {

When you visit the website URL, then append the oAuth token as a variable, all the content shows on the website. Using Github.js I pass the oAuth token and authenticate with the master repository, pull the contents of the JSON file and publish to the page.

My JSON file located in the private master repository acts as a sort of backend database to my public gh-pages repository which is actually viewed publicly at the website URL. Using JavaScript, the GitHub API and oAuth for security I'm easily able to control access to the web application.

A more advanced approach to this would be to require oAuth authentication using GitHub, allowing each user to be managed through GitHub team or collaborators settings. Then I could control each user who has access, but the approach applies to both scenarios, and is a pretty quick and dirty way to launch a private web site or application, that completely runs on GitHub.

Check out tips for blazing the way from agile to DevSecOps with security built into your mobile app toolchain.


Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}