スライド発表資料を作成・公開する方法

手順

• reveal.jsを使って資料を作成します

• GitHub Pagesに公開します

Revel.jsを直接使用する場合、テーマであるリポジトリを持ってきて、それを編集し、アップロードして公開する感じになります。後述する方法は、ジェネレーターを使用するため、もう少し手順が簡単になります。

デモ

Revel.js

Revel.jsというのは、簡単には以下の様なイメージ。

[{
"package":"bower",
"build":"grunt",
"theme":"reveal"
]}

インストールと実行

$ npm install -g bower yo grunt-cli

$ git clone https://github.com/hakimel/reveal.js/

$ cd reveal.js

$ npm install

$ grunt serve

------------------------------------------------
$ curl http://localhost:8000

generator-reveal

generator-revealを使うと、revealのテンプレートをyoコマンド一発で作成できるようになる。また、GitHub Pagesに上げやすいよう設定ファイルなども作ってくれるのでおすすめ。

[{
"generator":"yo",
"package":"bower",
"build":"grunt",
"theme":"reveal"
]}

インストールと実行

$ npm install -g bower yo grunt-cli generator-reveal

$ sudo yo reveal
# ここではGitHub Pagesに公開する設定を行います

$ sudo yo reveal:slide "Slide Title" --markdown

$ cat slides/list.json
$ vim slides/index.md

$ grunt serve

------------------------------------------------
$ curl http://localhost:9000 

GitHub Pagesとして公開する方法

$ cat .yo-rc.json
{
  "generator-reveal": {
    "presentationTitle": "Reveal.js and Yeoman is Awesomeness",
    "packageVersion": "0.0.0",
    "useSass": true,
    "deployToGithubPages": true,
    "githubUsername": "syui",
    "githubRepository": "slide-test"
  }

$ grunt serve

$ grunt dist

$ cd dist  

$ git init  
$ git add *
$ ...
# repositoryのmasterにpushする

$ git checkout -b gh-pages

$ git push -u origin gh-pages

# 更新とかする際はこのコマンドで行けるかもしれない
$ grunt deploy

# あと、`branch:gh-pages`が有効に動作するには`user.github.io`のリポジトリを`branch:master`で作成しておかなければならないかもしれない

カスタマイズ

見た目がダサいのでシンタックスハイライトをmonokaiに変更し、バックグラウンドカラーをwhiteにしてみた

シンタックスハイライト

templates/_index.html

<link rel="stylesheet" href="bower_components/highlightjs/styles/monokai_sublime.css">

バックグラウンドカラー

$ cd bower_components/reveal.js/css/theme/

$ cp source/white.scss template/ 

css/source/theme.scss

// Theme template ------------------------------
@import "../../bower_components/reveal.js/css/theme/template/white";
//@import "../../bower_components/reveal.js/css/theme/template/theme";