Openshift Primer: an Example for Hosting Your Awestruct Presentations in the Cloud

It has never been easier to combine excellent cloud and JBoss technology, like Ruby, than a nifty presentation tool called impress.js, a site generation tooling known as awestruct, and cloud hosting from OpenShift to dazzle at your next presentation.

Introduction

The example I am going to take you through will eventually look just like this site, where you find some of my presentations for the last year, deployed in a Ruby based OpenShift cloud instance, written using impress.js, and generated by awestruct.

Note that you can browse through the presentations, use the arrows provided in the bottom right corner to walk through the slides, embed your site and presentations anywhere as it is HTML (just use an iframe), and that it is automatically available on all mobile devices without any more adjustments from your side.

Now change into the presos directory and we will be copying into your repository, the setup I have ready for you in my repository (https://github.com/eschabell/openshift-presos-awstruct/tree/v0.3).

Run the following commands.

$ cd presos
$ git remote add upstream -m master git://github.com/eschabell/openshift-presos-awstruct.git
$ git pull -s recursive -X theirs upstream master
$ git push

This will pull down my code into your project, merge the results, then you push it up to your OpenShift instance. Watch the console output as it merges in the new code, installs the required awestruct dependencies, kick starts the server, and you are ready to check out your project online at http://presos-$yourdomain.rhcloud.com

Command line tooling
Once you have installed the OpenShift command line tooling (just a gem install RHC command for Unix-based machines), you can do the folowing to get your Ruby instance set up and populated with my quickstart project.

$ rhc app create -a presos -t ruby-1.9 --from-code=https://github.com/eschabell/openshift-presos-awstruct.git

This will pull my code into your project, merge the results, then you push it up to your OpenShift instance. Watch the console output as it merges in the new code, installs the required awestruct dependencies, kick starts the server, and you are ready to check out your project online at http://presos-$yourdomain.rhcloud.com

Bring It to Life

You will notice that the site you are looking at is found in presos/lib/*, here you will need to place your own presentations. Each presentation is represented by a .haml file. This is used to generate the eventual .html file.

---
layout: judconbase
---

.slides
  %section.title(data-state="judcon2013" )
    .title-information
      %h2 Do you want
      %h4 to be a
      %h2 JBoss Rock Star
      %h5
    .title-author
      Eric D. Schabell
      %br
        JBoss Technology Evangelist (Integration & BPM)
      %a{ :href=>"http://twitter.com/ericschabell"}@ericschabell

  %section(data-state="judcon2013" )
    .title-information
    %h1 What does it take?

If we take a closer look at the rockstar presentation haml file, we see that it starts with a layout referencing a base file, in this case called judconbase. We find this is just an included haml file locating in the_layouts directory. Review this for things you might want to adjust for your presentation, but you will note a line that is important which links to a CSS file where we will set up any images we want to use.

%link{ :rel=>'stylesheet', :type=>'text/css', :href=>"#{site.base_url}/css/theme/judcon.css", :id=>'theme'}

Then you will find a .slides line that starts the slides, here we show only two slides, which are defined using markdown. The data-state attribute is a link to the CSS file we mentioned above, where if you look there you will find the images used in the slides setup to display as a background, cover, or somewhere inside the slide canvas area.

The easiest way to determine how your changes are affecting the layout of your slides is to run the awestruct command from the lib directory and in daemon mode. This will provide a local server for you to access at http://localhost:4242, and it is auto updated each save of a file in the lib directory.

$ cd presos/lib
$ awestruct -d

By default, the build that awestruct is creating is for localhost, but you can adjust the file in presos/lib/_config/site.yml to have several profiles. Just run awestruct with the -P flag and provide one of your profiles to generate a new target site in_site.

Code, Deploy, Enjoy

The motto is code, deploy, enjoy! I hope this article provides a bit of a helping hand to get you started in pushing your presentations online.