Often times a lot of websites require certain form of presentation to demonstrate a product or to simply get their point across. Previously, such websites have been using Flash or embedded videos for such purpose. The problem with that approach is quite evident. Flash is a memory hog and is dying. Making a video means you restrict the users from spending more time on certain part of the presentation. Besides, both these take up a lot of production time. There’s a much more elegant way of achieving this. Jekyll and Hyde.
Jekyll and Hyde is an HTML presentation generator written in Ruby. It’s based on Jekyll, a static site generator written in Ruby and Sippy, a presentation library in jQuery. Jekyll takes in content written in markdown or textile format and converts that into a static, blog-aware website. It also supports theming by allowing you to create skeletons of websites that serve as templates. Sippy then converts this static website into an HTML presentation. All you need then is a Web server such as Apache and you’re all set to host your presentations on your website.
Why not use Sippy
Simplicity. Sippy plays an HTML through a browser. You still need to write the HTML. That is a pain. With Jekyll and Hyde, you have to write your slides in markdown or textile format. Jekyll will then convert it into Sippy compatible HTML which can then be played in the browser. There is really nothing much to it. It works on all the modern browsers. It’s a geeky way to present your content.
How can I make one
Jekyll and Hyde, as already mentioned, requires Ruby. I won’t go into the details of installing the dependencies of the project in this article. You will need to consult the documentation of your distribution and get them up and running. Once you have done that, install Jekyll and Hyde by:
gem install jekyll_and_hyde
After the installation is over, create a new presentation directory by running the command:
jh new mySlides cd mySlides jh generate titleSlide
The first command will fetch a Git repository that has the default template for Jekyl and Hyde and put it into the mySlides directory. The generate task will create a new slide under the _posts directory. You can now open and edit this newly created file and save it. For example, put the following in the titleSlide.
#This is the heading of the slide And this is the random content on the first page
Jekyll and Hyde doesn’t come with a build command on its own. It uses the task from Jekyll. So, build the presentation and then test it out in a browser. Run the following command.
jekyll --server
This will create a directory _site in the mySlides directory which will have the generated presentation. The command above will also start a Web server on the localhost, port 4000 (by default). You can open a browser and go to http://localhost:4000 to see the presentation in action. The slides are written in markdown format. You can also go through the demo of Jekyll and Hyde. Here is the source code of the presentation that you can use as a skeleton to write your slides.
You can use the [Left]/[Right] arrows to move among the slides, [Space] or [Double Click] to go to the next slide in the presentation, [ESC]/[Del]/[Tab] to get an overview of all the slides in the presentation, [0-9] keys followed by [Enter] to directly open that slide number.
Digging Deeper
Jekyll and Hyde can generate GitHub branching information that allows you to directly push the slide show to GitHub pages. You can also additionally specify a --template argument while creating a new presentation along with the URL to a GitHub repository where you have saved your template. Simply run the command:
jh github
…and it will give you all the information and commands required to push your presentation to GitHub pages.
To get a list of all the available commands run:
jh list
Conclusion
Jekyll and Hyde is a fun little project. The default template isn’t that good looking and not everyone might be willing to code in CSS and create a new template for their needs; however, it’s one of the most configurable presentation generators out in the market today that would work on everything, right from the browser on your smartphone and tablets to the computer browsers across all platforms. It’s simple, it’s light and it’s fun. Be warned though, using something like this is also likely to get your branded as an uber nerd. Happy sliding!
Feature image is a remix of Jekyll and Hyde demo’s HTML source in the background and cut-out of Peter Morville’s “Presentations” image on top.
