This is a boilerplate to use Reveal.JS easily with Gulp, Jade and Stylus.
To know more about Reveal.js and how to use, read the docs here.
You can see the demo here
First of all, install the dependencies to run this boilerplate.
# Clone this repository
$ git clone [email protected]:Qualy-org/qualy-presenter.git new_project
$ cd new_project
# install dependencies
$ npm install
# run tasks and serve
$ gulp
With the commands above, you have everything to start.
├── Readme.md
├── build
│ ├── css
│ │ └── main.css
│ ├── img
│ ├── index.html
│ └── js
│ ├── main.js
│ └── vendor
├── gulp
│ ├── index.js
│ ├── paths.js
│ └── tasks
├── gulpfile.js
├── package.json
└── src
├── img
├── js
│ ├── main.js
│ └── vendor
├── slides
├── styl
│ ├── highlight-themes
│ ├── main.styl
│ ├── reveal-themes
│ └── vendor
└── templates
├── inc
│ ├── head.jade
│ └── scripts.jade
└── index.jade
-
Write your slides in
src/slides
folder in separated files using the jade syntax and add them ontemplates/index.jade
. -
If you want to add another scripts and css use the
templates/inc/
folder and call them in thetemplates/index.jade
. -
Look for different themes on src/styl/reveal-themes and call them on src/styl/main.styl.
-
For highlight themes you can see on src/styl/highlight-themes.
When you clone this repo, every git information will be downloaded to. So, you have to remove all my git stuff to create yours.
# Inside of your project runs to remove git folder.
rm -Rf .git
Next, initialize your git repository:
# init the repo
git init
Commit all files:
# add all files to commit
git add .
# create a commit
git commit -m "Initial commit"
The first deploy needs to be manual:
# creates a gh-pages branch
git checkout -b gh-pages
# push and track the gh-pages branch
git push --set-upstream origin gh-pages
To do next deploys, you just have to run with gulp:
# will create a .publish folder with build content
# and push to gh-pages branch.
gulp deploy-pages
gulp
: Initialize watch for changes and a server(localhost:3000)gulp js
: execute js filesgulp notes
: copy speaker notesgulp stylus
: compile stylus filesgulp imagemin
:compress image filesgulp watch
: call for watch filesgulp jade
: compile jade filesgulp deploy-pages
: deploy compiled files atbuild
togithub
on branchgh-pages
.
Some presentations using the boilerplate:
This boilerplate is free and open source software, distributed under the The MIT License. So feel free to use this to create your site without linking back to me or using a disclaimer.
If you’d like to give me credit somewhere on your blog or tweet a shout out to @willian_justen, that would be pretty sweet.