# How to use reveal.js in Jekyll
by [Luu Gia Thuy](https://luugiathuy.com) / [@luugiathuy](https://twitter.com/luugiathuy)
April 6, 2015
## Overview
[reveal.js](https://github.com/hakimel/reveal.js/) enables you to create
beautiful interactive slide decks using HTML. This presentation will show you
how to integrate it with [Jekyll](https://jekyllrb.com/)
## reveal.js
Clone reveal.js to your site's root folder:
```
git clone https://github.com/hakimel/reveal.js.git
```
Or, add it as your site's submodule:
```
git submodule add https://github.com/hakimel/reveal.js.git
```
## Slide Layout
Create a layout file, call `slide.html` in `_layouts` folder. And use this gist
for the content of the file https://gist.github.com/luugiathuy/c07ac5608addadb642e5.
## Slide
Now, in your page/post YAML front matter, use `slide` for the layout. You can
define *title*, *author*, *description* as well as the slide's *theme* and
*transition*:
```yaml
---
layout: slide
title: Jekyll: Make presentation page with reveal.js
description: A presentation slide for how to use reveal.js in Jekyll
theme: black
transition: slide
---
```
## Slide
Each slide is enclosed in a `<section>` tag:
```html
<section data-markdown>
## Overview
[reveal.js](https://github.com/hakimel/reveal.js/) enables you to create
beautiful interactive slide decks using HTML. This presentation will show you
how to integrate it with [Jekyll](http://jekyllrb.com/)
</section>
```