• EBI reveal-hugo template
• Install
• Usage
  • Serve
  • Edit
  • Maths
  • Theme/Styling
  • Logo
• Deploy

EBI reveal-hugo template

This repository is a template for a minimal EMBL-EBI-themed reveal.js presentation.

Install

Firstly, to develop the presentation, you need to have Hugo installed.

brew install hugo
# also install optional Pygments package for syntax highlighting in presentation
pip3 install Pygments

Hugo will serve the presentation as a local static site in your web browser and update as you make changes in the source code of the presentation.

Next, clone this template in a directory (ideally named for your presentation)

presentation="awesome_conference"
git clone --recurse-submodules https://github.com/mbhall88/reveal-hugo-ebi "$presentation"
cd "$presentation"
# if you forgot to give the recursive flag when cloning
git submodule update --init --recursive

Usage

Serve

To serve the presentation in your web browser run the following from the root directory of the repository.

hugo serve

In your web browser, navigate to http://localhost:1313/ . Every time you make changes this webpage will auto-reload to reflect those changes.

You should see a screen that looks like this

Edit

The reveal-hugo docs have a great tutorial to get you up and running. There is also a thorough blog post here.

The config.toml is a central place for defining the settings of your presentation. A full list of configurations can be found here.

The slides themselves are within content/. _index.md is the "root" for your slides and you can also define presentation-wide settings in this file too. You can put all of your slides in _index.md if you wish, but you can likewise break them up into sections. Sections will be vertically stacked within the presentation when placed in content/home/.

So if we had an _index.md file that looked like This

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

# Hello, world!

This is my first slide.

---

# Hello Mars!

This is my second slide

---

## Mars method

This slide describes the methods and has a pretty plot

We could move the slides about Mars into their own section with the following setup.

content/_index.md

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

# Hello world!

This is my first slide.

content/home/mars.md

+++
weight = 10
+++
{{% section %}}
# Hello Mars!

This is my second slide

---

## Mars method

This slide describes the methods and has a pretty plot.
{{% /section %}}

Note: weight is how you define the order of slides. If you have another .md file with weight = 11 it will come after content/home/method.md. See this for more info.

For more information on sections, see the docs.

Maths

Maths rendering with [MathJax][mathjax] is supported provided you have access to an internet connection when initially serving the slides.

In short, you write equations in [Tex/LaTex format][texmaths].

An example of adding an equation to a slide

## Cool equations

Displayed equations are wrapped in double-\$

$$\frac{n!}{k!(n-k)!} = \binom{n}{k}$$  

Inline equations like $E=mc^2$ are wrapped in single-\$

Theme/Styling

If you would like to make any changes to the font, colours, style etc. then this can be done in static/stylesheets/robot-lung-ebi.css. The current stylesheet is a copy of the robot-lung theme, which I have changed some colours to match the EBI colour scheme.

Logo

There are two forms of the EBI logo, which can be found in static/logos/. There is one for white background presentations (ebi_white_bg.svg) and one for dark backgrounds (ebi_dark_bg.svg).
If you would like to make any changes to the size, layout, or which logo is used, then instructions can be found in this short tutorial.

Deploy

If you would like to share your presentation with others, or even access it without having to run a local server, the presentation is easily deployable to a static website. Netlify is an easy solution that I have used many times. It's as simple as connecting your GitHub repository. See here for an example presentation deployed with Netlify.