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.
(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: –
Navigate to the new directory: –
Initialise the repo: –
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: –
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.js\index.html copy-item ..\reveal.js\css -recurse copy-item ..\reveal.js\dist -recurse copy-item ..\reveal.js\js -recurse copy-item ..\reveal.js\plugin -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>
The index.html file should now look like this.
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!