Github: GhPages an Overview

David G - DrupalRecently for a university project we wanted to move a PHP template based website from a subdirectory to a Github Pages (Ghpages) website. All in all the transition went very smoothly. The original website was managed from a local in-house Git repository and it’s contents were synced with the live site URL occassionaly after a cumbersome process involving emailing and notifying about 2-4 individuals. While in comparison the Github Pages site simply needs to accept Pull Requests.

Most of our existing PHP site was in reality a simple Header, Footer and Content region of the site that accepted new content in the body. This is exactly the type of website which could be replicated and maintained easily using Ghpages.

For example the Header, Footer and Content template of the website easily is re-created in Jekyll as a master template file:

<!DOCTYPE html>
<html lang="en">

  {% include head.html %}

  <body>

    <a href="#end_of_header" class="hidden">Skip to Content</a>
    <div id="main">

      <a target="_blank" id="ucsb-header" href="http://www.ucsb.edu/">UCSB</a>

      {% include main-nav.html %}

      <div id="content">

        <div class="header">
          <h1><a href="/">UC Santa Barbara Web Standards</a></h1>
          <form class="search-form" method="GET" action="/search">
             <label for="search-query" class="hidden">Search Query:</label>
             <input type="text" id="search-query" name="query" />
             <input class="search-btn" type="submit" value="Search" />
         </form>
        </div>

        <h2>{{ page.title }}</h2>

        {{ content }}

      </div>

      {% include footer.html %}

    </div>
  </body>
</html>

The regions of the legacy PHP application are now Jekyll include files:
https://github.com/ucsb-wsg/ucsb-wsg.github.io/tree/master/_includes

Then essentially new pages define the page specific content to be placed above in the base template. This is a mechanism referred to as a static site generator, or a flat file CMS. I’m mentioned it a few times in this article but the particular tool generating this is called Jekyll and is powered by Ruby. Github supports the Jekyll toolchain natively (with some limits on what 3rd party Jekyll modules are supported by the Github runtime). But by following simple repository naming conventions you can have a custom, static content website, up and running in a few quick minutes — easily maintainable by a community of members. Directions for creating your own Github Pages sites can be found here.

After creating your repository with a github.io compatible name (or containing a gh-pages branch) you can simply create the Markdown content for your pages and templates and after every commit of your work the site content is updated. Nifty!

Another item to note is that you can host your GhPages powered site through a custom vanity domain. But, you must be able to control (or request) additional CNAME records to your site. Then you simply add the CNAME to your repository. Full directions on custom urls can be found in the github documentation.

If you’d like to see 2 examples of github pages powered sites I will point you to our current 2 Open Source works provided by UCSB. The UCSB Webguide and the associated Examples repository.

Example Webguide homepage on Jekyll.

Example Webguide homepage on Jekyll.

Second "Examples" website. The repository name acts as a url path within the parent ucsb-wsg.github.io URL.

Second “Examples” website. The repository name acts as a url path within the parent ucsb-wsg.github.io URL.

If you have questions specifically on Jekyll, Github or Github Pages please feel free to ask! I will also be giving some writings on other flat file CMS’s such as PHP powered GRAV in the near future.

Looking for quality web hosting? Look no further than Arvixe Web Hosting!

 

Tags: , , | Posted under Github | RSS 2.0

Author Spotlight

David Gurba

I am a web programmer currently employed at UCSB. I have been developing web applications professionally for 8+ years now. For the last 5 years I’ve been actively developing websites primarily in PHP using Drupal. I have experience using LAMP and developing data driven websites for clients in aviation, higher education and e-commerce. If you’d like to contact me I can be reached at david.gurba@arvixe.com

Leave a Reply

Your email address will not be published. Required fields are marked *