Let's create an easily sharable presentation via gh-pages!

To start, make sure that node.js is installed.

Yeoman is a tool that lets people share project generators for web applications. When this generator runs, it bascially builds a scafolding for the presentation in reveal.js.

First we need to install Yoeman.

npm install -g yo

We next need to install Generator-reveal. Reveal allows us to turn markdown into a slide deck.

npm install -g generator-reveal

We install grunt (similar to make - specifies how to build things and does file watching for auto detecting edits). We also install bower (a package manager for things that you sever as part of your website).

npm install -g grunt-cli
npm -g install bower
bower install

Finally, we run a simple command to execute Yeoman:

yo

Choose reveal in the menu.

Answer a few questions and eventually you'll see the job finish:

grunt

Bower is the front end dependency manager, but the bower files are ignored by github by default. So we need to remove bower_components from the .gitignore file before preceeding. Hence, my .gitignore file only contains the following lines:

node_modules
dist
*.log
.sass-cache
index.html

The following commands will allow you to view the project on gh-pages:

git commit -am 'starting the presentation'
git push
git checkout -b gh-pages
git push origin gh-pages

Then visit userName.github.io/repoName replacing userName and repoName with the appropriate values.

The slides directory contains two types of files:

• list.json - this file is the order of the slides.
• .md files - these files are the slides.

The index.html file is built by grunt from a template each time bower is run, which means that you must edit template/_index.html to change the css.

Many options exist for changing the css such as the theme:

• Go to bower_components/reveal.js/css/theme/ and look at the options.
• The starting theme is default.css.
• Edit template/_index.html with the desired theme.

Thank you Erik Cunningham for the instruction!