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

Download the blueprint that can take a company of any maturity level all the way up to enterprise-scale continuous delivery using a combination of Automic Release Automation, Automic’s 20+ years of business automation experience, and the proven tools and practices the company is already leveraging.

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.

Download the ‘Practical Blueprint to Continuous Delivery’ to learn how Automic Release Automation can help you begin or continue your company’s digital transformation.


Published at DZone with permission of Kin Lane, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}