Jekyll: Create Slides with reveal.js
reveal.js is a framework for creating interactive slide using HTML. It has many useful features, including Markdown content, PDF export and speaker notes. You can check out its live demo. In this post I will share with you how to integrate reveal.js to Jekyll site.
reveal.js to your site’s root folder:
git clone https://github.com/hakimel/reveal.js.git
or if you use git for your site. Add
reveal.js as its submodule:
git submodule add https://github.com/hakimel/reveal.js.git
Now we create a layout for slide pages. Create a new file, called
_layouts folder, then paste this content to the new file:
This layout is based on the index.html file of the live demo. I have added in some Liquid code to get the title, author, description as well as the theme and slide transition from the page YAML front matter.
You can checkout my slide of this post. Here is the YAML front matter of the page:
--- layout: slide title: Jekyll: Make presentation page with reveal.js description: A presentation slide for how to use reveal.js in Jekyll theme: black transition: slide ---
Each slide is enclosed in a
<section> tag. Here is an example slide using markdown:
<section data-markdown> ## Overview [reveal.js](https://github.com/hakimel/reveal.js/) enables you to create beautiful interactive slide decks using HTML. This presentation will show you how to integrate it with [Jekyll](http://jekyllrb.com/) </section>
That’s it, you can check more slide examples, configurations of reveal.js at its site.