Blog Post

Creating presentations with Reveal and Github pages

,

I really don’t like Powerpoint.

I’ll do pretty much anything to avoid writing a presentation in it. Thankfully for the last few years there’s been a service called GitPitch which allowed me to write presentations in markdown, push to Github, and it publishes the presentation at a custom URL.

I really liked this service as it made updating my presentations really easy and if anyone asked for my slides I could give them the URL.

Unfortunately, GitPitch is shutting down on March 1st so all my presentations will become unavailable after that date.

So I had to find an alternative and as there’s no way I was going to use Powerpoint, I was kinda stuck.

Thankfully, Mark Wilkinson (b|t) came to my rescue and told me about Reveal.

(He also gave me some (ok, a LOT) of pointers in how to get up and running, thank you Mark!)

Reveal combined with Github Pages pretty much gives me the same setup that I had with GitPitch so I was saved from Powerpoint!

Let’s run through how to create a presentation using both.

First, clone down the Reveal repo: –

git clone https://github.com/hakimel/reveal.js.git

Create a directory for the new presentation locally: –

mkdir demopresentation

Navigate to the new directory: –

cd demopresentation

Initialise the repo: –

git init

N.B. – you can confiure git to initialise a main branch instead of master by running: –

git config --global init.defaultBranch main

We need to populate the repo with something before we can do anything else. So create a test file: –

new-item test.txt

Commit test.txt to main branch: –

git add test.txt
git commit -m "added test.txt"

Now go to Github and create the repository that we’re going to push the local one to: –

Once the repo is created, Github will give instructions on how to link and push our local repository to it: –

So run: –

git remote add origin https://github.com/dbafromthecold/demopresentation.git
git branch -M main
git push -u origin main

And there’s the repo with our test file in it on Github: –

Now that the main branch has been initialised and the first commit executed we can create a gh-pages branch.

The gh-pages branch, when pushed to Github, will automatically create a URL that we can use to publish our presentation.

So let’s create the branch: –

git branch gh-pages

Switch to the gh-pages branch: –

git checkout gh-pages

Copy the required files into the gh-pages branch from the Reveal repo: –

copy-item ..reveal.jsindex.html
copy-item ..reveal.jscss -recurse
copy-item ..reveal.jsdist -recurse
copy-item ..reveal.jsjs -recurse
copy-item ..reveal.jsplugin -recurse

Open the index.html file and replace: –

<div class="reveal">
<div class="slides">
<section>Slide 1</section>
<section>Slide 2</section>
</div>
</div>

With the following: –

<div class="reveal">
<div class="slides">
<section data-markdown="slides.md"
data-separator="^^r?n---r?n$"
data-separator-vertical="^r?n------r?n$"
data-separator-notes="^Note:"
data-charset="iso-8859-15"
data-transition="slide">
</section>
</div>
</div>

What this is doing is allowing us to use a slides.md file to create our presentation (data-markdown=”slides.md”). Check out this page for what the other lines are doing.

Now create the slides.md file (just going to have a title slide initially): –

echo '## Demo Presentation' > slides.md

Now run a commit on the gh-pages branch: –

git add .
git commit -m "created demo presentation"

And finally, add the remote location for the branch and push: –

git push --set-upstream origin gh-pages

And that’s it! Give it a few minutes and the presentation will be available at dbafromthecold.github.io/demopresentation

The URL can be checked in the settings of the repo: –

And there’s the presentation! To add more slides, simply update the slides.md file. For an example, check out my Docker Deep Dive slides.

DISCLAIMER! – that doesn’t contain the greatest markdown if I’m honest, but it works for what I want ??

Finally…what happens if you’re at a conference and the wifi is sketchy? No bother, if you have Python installed you can navigate to where your presentation is locally and run: –

python -m http.server 8080

And the presentation will be available at localhost:8080

Pretty cool eh?

Thanks for reading!

Original post (opens in new tab)
View comments in original post (opens in new tab)

Rate

(1)

You rated this post out of 5. Change rating

Share

Share

Rate

(1)

You rated this post out of 5. Change rating