DevOps Zone is brought to you in partnership with:

I am the API Evangelist. Not in the sense that I’m evangelizing a single API to you--In the sense that APIs are important for everyone to be aware of. I’m paying attention to not just the technical, but the business and politics of the web API movement. I share my insights by blogging on the business of APIs at apievangelist.com, politics of APIs at apivoice.com and you can find more information about me at kinlane.com. Kin is a DZone MVB and is not an employee of DZone and has posted 95 posts at DZone. You can read more from them at their website. View Full User Profile

Private Web Application Running on Github

11.08.2013
| 5325 views |
  • submit to reddit

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');    
        if($ThisPage==''){
            $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>';
                   $("#primaryNavItems").append($NavigationString);           
                });
                
                // Build the Page Content
                $.each($Site['pages'], function($key, $value) {
                    if($key==$ThisPage){
                        $("#pageBody").html($value);
                        }             
                });  
             }          
        });
        
    </script> 

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.


Published at DZone with permission of Kin Lane, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)