Cloud Zone is brought to you in partnership with:

Eric D. Schabell has been working within software development since 1998 for many different organizations such as IBM, Radboud University Nijmegen, SNS Bank and smaller software companies. He has been involved in different roles within Open Source projects such as Sourcemage Linux, eGroupWare, DocConversion, cmlFramework and is still helping out in the JBoss jBPM project focusing as lead on the jBPM Migration project. Since 2009 he has been actively evangelising JBoss products and is a huge fan of OpenShift (PaaS). He is employed as JBoss Technology Evangelist for Red Hat, is a guest lecturer at the Radboud University Nijmegen and enjoys writing on various topics. Eric D. is a DZone MVB and is not an employee of DZone and has posted 73 posts at DZone. You can read more from them at their website. View Full User Profile

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

09.30.2013
| 2161 views |
  • submit to reddit
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.

Getting Started

You will need Git, Ruby, an editor, an OpenShift account, and awestruct installed, you know the basics. I am not going to walk through all of this with you, but assume you can follow these components getting started guides.

What I have done is put together a quickstart to get your site as shown above up and running, which is then a template for adding in your very own presentations. It is giving you a head start, to save some time. Follow along as I walk you through putting this together on your own, first from the web admin console from OpenShift, then from the command line with OpenShift tooling (rhc).

OpenShift web console
You will need to log in to OpenShift (http://openshift.com) with your user and create a Ruby 1.9 cartridge (not the older ones you might see listed there). Just name it presos and leave the rest to default settings.


Ruby 1.9 cartridge creation.

You will be presented with a getting started screen, with half way down the page instructions for cloning the repository of the instance you just created. You will need to open a console and clone this into your local machine:
$ git clone ssh://5242ecxxxxxxxxx0000aa@presos-inthe.rhcloud.com/~/git/presos.git/
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.





Published at DZone with permission of Eric D. Schabell, 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.)