Presentations on steroids

Learn how to combine reveal.js+pandoc+GitHub Pages to put together a great presentation.

Summary

Reveal.js is a great framework for producing awesome presentations. If you are reading this, then you are probably already familiar with it; if you don’t, and you give presentations using slides, then you should stop reading immediately and go read about Reveal here. This article explains how to host your presentations on GitHub pages. Check this page to see what the result looks like.

Why

I find it very convenient to host my presentations on GitHub for three reasons. First, I deploy and then I don’t need my laptop with me anymore: usually at conferences or in class there is always one desktop computer connected to the projector: I can open the browser, visit the page hosted on GitHub and it always works. Second, if somebody wants to check the presentation later, he does not have to download anything or ask me to send the slides: write down the url and visit it whenever you want. Finally, If I have to make a small change, I can use the GitHub editor: the presentation is updated on the commit. Convinced? Keep reading to learn how to do it.

How to do it

Create an empty repository on GitHub

The first thing to do is creating a new repository: we will call it reveal_HelloWorld.

img

Set a branch for Pages

Now you have to specify which branch to publish: got to https://github.com/youruser/reponame/settings, and from the menu branch under GitHub Pages set master as the source branch, then click save. At this point you don’t need to do anything else on the GitHub website: close the browser and open the terminal.

img

Clone reveal.js

Download reveal.js on your local machine inside the folder reponame

git clone git@github.com:hakimel/reveal.js.git reponame

Set your GitHub repo as the default origin

This commands remove the remote origin of reveal.js and connects it to your newly created repo:

cd reponame/
git remote rm origin
$ git remote add origin https://github.com/youruser/reponame.git

Where reponame is the name of the repo that you just created on GitHub.

Push

We are almost done: let’s push! I use the -f option to overwrite the README.md that is in the remote branch: I initialized the repo with the README so that I could go directly to the settings and set master as the source branch for Pages; if the branch is empty, you can’t do that.

$ git push -f --set-upstream origin master 

Now you have just pushed the demo presentation of reveal.js to your repository. You can see it here: http://youruser.github.io/reponame/. If you can’t see it, then give it a minute.

Editing the presentation

To create your presentation and replace the demo, you have to modify the index.html file. A quick way to do it is to write it in markdown — one title per slide — and then export it to HTML using pandoc (follow the instructions to install it).

This is my sample presentation in markdown:

# ./revealHello/presentation.md
---
author: Angelo Basile
title: Reveal.js+GitHubPages+Pandoc
date: June 21, 2017
---
# Reveal rocks

Some code


```python
       print("hello world")
```

# Slide 2

* test
* test

Now, assuming that you have presentation.md in the the presentation folder, you type the following to export the presentation from markdown to HTML.

$ pandoc -t revealjs -V revealjs-url=./ --slide-level=2 -s presentation.md -o index.html

Note: you have to set the number of levels that you want, otherwise you will produce one big slide.

Now you are done: push again to save the changes and update your presentation online.

$ git add .
$ git commit -m 'edited presentation with pandoc'
$ git push

If you enjoyed the article, consider subscribing to the newsletter to receive free updates directly in your mailbox.

tl;dr

create a new repository from https://github.com/new

got to https://github.com/youruser/reponame/settings

under GitHub Pages set the variable source to master branch and click Save

then:

$ git clone git@github.com:hakimel/reveal.js.git reponame
$ cd reponame/
$ git remote rm origin
$ git remote add origin https://github.com/youruser/reponame.git
$ git push --set-upstream origin master

Screencast

Here is a screencast that shows that whole process: