Reveal.js is an HTML-base presentation framework. You just need a browser with CSS 3D transforms. That means Chrome, Firefox, Safari, Opera, and IE 10-11 are supported. It also provides a nice fallback for other legacy browsers. Check out a live demo yourself.

This Tech Tip will show how to create Reveal.js-based presentations easily using Gist and OpenShift.

Why Gist?

This allows to separate presentation layer (Node.js on OpenShift) and data layer (HTML source on Gist), and also keep them distributed. You may not be able to show demos using this, at least yet, but at least you don’t need to worry about laptop crashes. You can certainly keep the source for your presentation any where you like, such as github or some other repo, but will need to change the templating framework accordingly.

Why OpenShift?

Full setup of Reveal.js require installation of Node.js, Grunt, and some other dependencies. And even then your slides are only locally available. To keep it completely distributed, its important to have Node.js and other dependencies running in the cloud. OpenShift is an open-source polyglot PaaS from Red Hat that allows Node.js to be run in the cloud. You can certainly choose any other Node.js hosting environment as well but this is what I feel most comfortable with.

Meet Gist-Reveal.it

Ryan (@ryanj) created Gist-Reveal.it an open source slideshow templating service that makes it easy to create, edit, present, and share Reveal.js slides on the web.

A cool feature of this framework on how one browser can be configured as broadcaster and all others as receivers. This allows the presenter (or broadcaster) to share the slides URL and allow the viewers (or receivers) to follow the slides along on their own favorite device. This could be very useful in a conference setting particularly.

Gist-powered Reveal.js slideshows provide a quick introduction to setup. This Tech Tip will use Gist-Reveal.it + OpenShift and show you how to setup your own personal hosting environment for beautiful HTML slides.

Lets get started!

• Sign up for OpenShift at openshift.com/app/account/new. No credit card and free account gives you 3 gears where each gear is 1GB disk and 0.5 GB memory. A free gear is enough to host your web front end for Reveal.js.
• Sample slides are available at slides-milestogo.rhcloud.com. Click on the button on bottom-left to create a new OpenShift application. This application will clone the source code from gist-reveal.it and use that as the basis for the newly created application.
• Create a new gist and copy the unique ID assigned to it. For example, for the gist created at gist.github.com/arun-gupta/9ac2cea40c302986a8e3 the unique id is “9ac2cea40c302986a8e3″.
• Register a new API key on GitHub at github.com/settings/applications. Note down the “Client ID” and “Client Secret”. Leave “Authorization callback URL” empty, everything else is straight forward.
• Install OpenShift CLI tools and set them up. Setup a few environment variables for the OpenShift application:
  
  rhc env set GH_CLIENT_SECRET=<CLIENT_SECRET> --app slides rhc env set GH_CLIENT_ID=<CLIENT_ID> --app slides rhc env set DEFAULT_GIST=<GIST_ID> --app slides rhc env set REVEAL_SOCKET_SECRET=<SUPER_SECRET_VALUE> --app slides

  1 2 3 4 5 6

  rhc env set GH_CLIENT_SECRET=<CLIENT_SECRET> --app slides rhc env set GH_CLIENT_ID=<CLIENT_ID> --app slides rhc env set DEFAULT_GIST=<GIST_ID> --app slides rhc env set REVEAL_SOCKET_SECRET=<SUPER_SECRET_VALUE> --app slides

  
  Replace <CLIENT_SECRET>, <CLIENT_ID>, and <GIST_ID> with your specific values. Also note, “slides” is the application that is used in this blog. If your OpenShift application name is different then use that instead.

  REVEAL_SOCKET_SECRET is an environment variable that is used by the templating framework to look for a special value to identify the broadcaster (or the presenter). This value needs to be kept secret and not shared with others. A browser can be made as a broadcaster by accessing the following URL

  http://slides-milestogo.rhcloud.com/?setToken=<SUPER_SECRET_VALUE>

  1 2 3

  http://slides-milestogo.rhcloud.com/?setToken=<SUPER_SECRET_VALUE>

  Accessing this URL stores this token in browser’s local storage. Make sure to change the URL to reflect your particular application and domain on OpenShift. For example, application name in this case is “slides” and domain is “milestogo”.

Other configuration values are explained at github.com/ryanj/gist-reveal.it#application-config. Complete documentation about the framework is at github.com/ryanj/gist-reveal.it.

Enjoy!

Thanks to Ryan (@ryanj) for helping me setup the environment.

I’m waiting which conference will be the first one to provide Gist-Reveal themes