reveal.js

• great presentation tool
• easy setup
• basic HTML skills
• scales with your skills
• do anything you can do in JS
• slides.com visual editor

canvas

WebGL

CSS animations

Embedding

Charts

Hosting

Host on Github!

• share your presentation code
• share your reveal.js setup

Setup

forking

• fork hakimel/reveal.js
  for each talk
• slidedeck.io will pick it up
• hard to update reveal.js core
• no easy code-reuse

Setup

use bower

• setup your own talks repository
• install via bower
• update core easily
• add components easily
• re-use code in several talks

use github pages

Layout

• backgrounds background iframe contents
• css/js/videos global assets
• images images
  • backgrounds large background images
• my_talk talk folder(s)
  • css/js/images talk assets
  • index.html talk file
• index.html talk index

.gitignore

do NOT commit large images or videos

#.gitignore
bower_components
node_modules
images/backgrounds
videos
.grunt
                        

alternatively, setup image optimisation in grunt

bower

//bower.json
{
    ...
    "ignore": [
        "**/.*",
        "node_modules",
        "bower_components",
        "test",
        "tests"
    ],
    "dependencies": {
        "reveal-js": "hakimel/reveal.js#3.1.0",
    }
}
                        

Gruntfile.js

• copy bower_components/reveal-js/Gruntfile.js
• delegate all tasks back to reveal.js, e.g.

//Grunfile.js
uglify: {
    gruntfile: 'bower_components/reveal-js/Gruntfile.js',
    tasks: ['uglify']
},
                        

Grunt & Bower

//Gruntfile.js
grunt.initConfig({
    'bower-install-simple': {
        options: {
            production: true
        }
    }
}
grunt.loadNpmTasks('grunt-bower-install-simple');
grunt.registerTask('publish', ['bower-install-simple']);
                        

Github Pages

git checkout --orphan gh-pages
git rm -rf .
                            

git checkout master -- path/to/file
mv path/to/file path/to/final/location
                                

too hard

use grunt!

Github Pages

grunt.initConfig({
    'gh-pages': {
        options: {
            push: true
        },
        src: [
            'js/**/*.js',
            'css/**/*.css',
            'images/**/*',
            'bower_components/**',
            'index.html',
            '.../**/*'
        ]
    }
}
grunt.loadNpmTasks('grunt-gh-pages');
grunt.registerTask('publish', ['bower-install-simple', 'gh-pages']);
                        

Done

Thank you

Jump-start your repo

fork wyrfel/talks