Reveal.js is an open-source presentation framework that enables you to create interactive, highly customizable presentations on the web. For this tutorial we will use the Reveal framework within the context of a static site generator called Hugo! Using Hugo and Reveal together allows us to publish our work to the web for free.

Create Github Repo

First create a github repository (commonly referred to as a ‘repo’) – following the instructions outlined here. Ensure the visibility of the repo is set to public.

Install Github

Install git on your laptop – git allows you to control github from the terminal or command prompt.

• For windows follow the “Install Git on Windows” instructions here. Select the Git Bash option during installation.
• Most macs already have git installed. But if you don’t follow these instructions.

Cloning a repo

Next clone the newly created repo on your laptop following the steps outlined here.

Install Hugo

Hugo is an opensource static site generator that makes it easy to build website quickly with very little coding. To install follow the below instructions:

• For Windows users follow this
• For Mac users: first install homebrew by typing the below command into your terminal, then install Hugo following this

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Setup the Hugo folder

In your terminal (or command prompt in Windows) navigate to the repo you cloned earlier and run the following command.

hugo new site . --force

This commands sets up a new Hugo website template in this folder. Next navigate to the themes folder by typing

cd themes

Then clone the reveal github repo by typing

git clone https://github.com/dzello/reveal-hugo

Open the config.toml file and add the following contents to the bottom:

theme = "reveal-hugo"

[markup.goldmark.renderer]
unsafe = true

[outputFormats.Reveal]
baseName = "index"
mediaType = "text/html"
isHTML = true

Next create a new file in the content folder called _index.md

Add content

Open the _index.md file and add the following content to create the first slide.

+++
title = "My presentation"
outputs = ["Reveal"]
+++

# Hello world!

This is my first slide.

To see how this looks in the browser, you’ll need to create a local server. Go back to the top of the folder in your terminal or command prompt and type

hugo server

Finally, open up a browser window and navigate to ‘http://localhost:1313/’ to see your presentation.

Slides in Hugo are created with the ‘—’ symbol. So to add a new slide to the presentation add ‘—’ to the _index.md file followed by some content

+++
title = "My presentation"
outputs = ["Reveal"]
+++

# Hello world!

This is my first slide.

---

# Second slide!

This is a test

Example

An example of how your site should look locally is here

Customization

In Hugo files like the _index.md above, all content below and above the ‘+++’ symbols are the meta-data that is used to customize and set parameters of your website. For example, to change the theme of the presentation add the below content to the _index.md file above the last ‘+++’ symbol.

[reveal_hugo]
theme = "moon"

so now the top of your _index.md file should look like this

+++
title = "My presentation"
outputs = ["Reveal"]
[reveal_hugo]
theme = "moon"
+++

To see more theme and other customization options refer to the documentation

There is also a demonstration of how to add customization options in Hugo here