Using Academic Kickstarter to Deliver a Slide Show

Mar 13, 2020

Online Slidedecks

Slidedecks or presentations don’t have to be complex. You can make them using nothing but a text file. There are a lot of advantages to doing things this way, but what I really like is that it makes sharing slides super easy - no downloads, no stupid Microsoft Powerpoint faffing around. Your slides are just a really nice little webpage. Your slides can also be annotated with Hypothes.is so in the event you can’t present in person, folks can still collaboratively read and comment on the presentation. The system we’re using here also allows you to embed your notes for each slide in a ‘speaker view’.

Here’s a demo slide show I made that shows off what this all looks like. Go take a look, then come back here.

Make your Slidedeck

In your academic-kickstarter repository on Github, make a new folder slides/first-slidedeck in the content folder (h/t to Maggie for the catch.)

So, go to the content folder, and then select ‘create new file’ then type slides/first-slidedeck/index.md .Each time you hit the / github knows that it is a subfolder and so adds it to the path. Full path will be: academic-kickstart/content/slides/first-slidedeck/index.md

Any future slidedecks you build get their own subfolders and index.md files.

your slide deck is actually a text file which you will call ‘index.md’

The slide has to have a metadata block at the top that tells hugo to use the slideshow formatting for everything that follows. Remember, don’t use colons in the values unless you wrap the value in quotations - look at the date field to see what I mean:


---
title: Slides
summary: An introduction to using Academic's Slides feature.
authors: []
tags: []
categories: []
date: "2019-02-05T00:00:00Z"
slides:
  # Choose a theme from https://github.com/hakimel/reveal.js#theming
  theme: black
  # Choose a code highlighting style (if highlighting enabled in `params.toml`)
  #   Light style: github. Dark style: dracula (default).
  highlight_style: dracula
---

Each slide gets divided off by ---. Three dashes means the show will scroll left to right; two dashes will allow you to scroll slides top to bottom. Mixing the two allows you to have major points in the left-right scroll, and minor points in the top-to-bottom. You don’t have to do that.

Make sure there is a blank line above and below your --- or --.

Your slide show, once you commit that index.md file, will live at http://your-subdomain.netlify.com/slides/first-slidedeck/

Making slides this way makes your slides findable, it makes the data in them resuable, and text in your slides can be annotated with hypothesis.

This demo slide file gives you an idea of many of the features you could add to your slides. If you ‘view raw’ you can copy the code directly into your own files and modify as necessary.

Images can be inserted via the regular markdown image convention, eg,


![alt-text](/img/filename.png)

Remember you need to drop that image in the static/img folder of your academic-kickstarter repository. You could also provide the path to images elsewhere on the web to bring them into your presentation- right-click on an image, select ‘copy image path’ and that’s what you’d use, eg:

![dhmuse-site-logo](https://shawngraham.github.io/dhmuse/images/logo.svg)

Example Markdown for a Slidedeck

---
title: A Minimal Slideshow
summary: A demo for students.
date: "2019-03-013T00:00:00Z"
slides:
  theme: beige
---

# My Slide show

By Joe Q. Student

---

## Part One

![image of a cow](/img/cow.png)

+ Cows are wonderful
+ Cows are big

{{% speaker_note %}}
Cows have been part of human history since time immemorial. Archaeological research demonstrates that...

{{% /speaker_note %}}

---

> a quotation about cows goes here. Magni voluptatem minima voluptas. Doloremque esse quos ea ut blanditiis sapiente fuga. Aut sed sit non. Voluptates perspiciatis dicta voluptatum. Qui aut harum est quod. Ducimus cum in doloremque consectetur.

---

## The End.