Creating web-based presentations has never been easier now that org-revel is just an option in the org layer for Spacemacs. By adding a variable to the org layer in the Spacemacs configuration and setting the location of Reveal.js on your file space you are ready to convert .org files into lovely presentations.

You can see examples of my presentations at http://jr0cket.co.uk/slides

If you have not used org-reveal before, see my previous articles on creating cool slides with Emacs Org-mode and Org-reveal, please note that article has an older configuration. If you have not experienced the amazing Org-mode, then see how to manage your developer life with this amazing tool.

Configure the Org layer

Open the ~/.spacemacs configuration file, SPC f e d (file, emacs, dotfile).

Search for the dotspacemacs-configuration-layers using SPC / (or just scroll down as its near the top of the file)

Now add org-enable-reveal-js-support t as a variable to the org layer, so your org layer entry looks as follows

1
2
(org :variables
 org-enable-reveal-js-support t)

If you already have org-mode installed, then simply reload the ~/.spacemacs configuration with SPC f e R.

If this is the first time you are installing org-mode, or org-reveal does’t seem to work, I suggest restarting Spacemacs with SPC q r.

In my ~/.spacemacs configuration file I also have github support to create README files that display on Github repositories.

1
2
3
(org :variables
 org-enable-github-support t
 org-enable-reveal-js-support t)

Configure the location of Reveal.js

You can specify the location of Reveal.js in each .org file you write by using the variable REVEAL_ROOT. You can use a local directory on your file space or a content delivery network (for which you need to be online to convert your files)

1
#+REVEAL_ROOT: http://cdn.jsdelivr.net/reveal.js/3.0.0/

I prefer to use a local copy of Reveal.js. This does mean I need to download and update Reveal.js manually, however it means that do not need to include the REVEAL_ROOT in each .org file. Instead you need to set the (setq org-reveal-root "") in ``

I place the css, js, plugin and stylesheet directories into a folder that contains all my .org files, so I set an empty org-reveal-root as follows

1
(setq org-reveal-root "")

I deploy my slides on Github pages which does cache some artefacts, so hopefully it also caches org-reveal. I have never experienced any issues with speed browsing the slides.

Creating your slides

Create a new file with the file extension .org, for example my-awesome-presentation.org. You can add meta-data at the top for the title slide and all other slides are defined with a single *. Child slides, appearing underneath a parent slide are created with two * characters, ie. **

I have detailed how to create your first presentation with org-mode and org-reveal in my article entitled Creating Cool Slides With Emacs Org-Mode and Revealjs.

Creating (rendering) the Reveal.js slides

You can use the Org-export dispatcher to convert your .org file into a beautiful Reveal.js presentation:

Use C-c C-e to open the dispatcher menu, select R for the reveal section and R to render the .org file as an .html file of the same name.

Or use C-c C-e R B to render the .html file and open it in a new browser window.

Spacemacs Org-reveal - Org-export Dispatcher

If you prefer using the Spacemacs menu, you can use following commands to convert your .org file:

1
2
3
SPC SPC org-reveal-export-to-html
SPC SPC org-reveal-export-to-html-and-browse

Publishing the slides on Github

Github Pages are a great place for publishing your Reveal.js presentations or any static web content. For existing repositories you simply commit your content to a gh-pages branch or you can create a specific user or organisation repository and commit to the master branch.

I wrote about sharing your Revealjs slides on Github Pages previously, so I wont repeat myself here.

Thank you.
@jr0cket