スライドをreveal-hugoで管理するのすごくよい

reveal.js

スライド作る時にreveal.jsは重宝していて、reveal.jsをHTTPサーバでラップしたrevealgoなるツールを作るほどであった。

https://github.com/yusukebe/revealgo

reveal.jsはつまり、スライドをMarkdownで書ける、スライドはブラウザで見れる、という代物。例えば、以下のように書けば、---を区切り文字として3枚のスライドになる。

# タイトル

---

## サブタイトル

本文ですよ。

---

## 3ページ目

3ページ目の本文ですよ。
こんにちわ。

表示はこんな感じ。

revealgoならコマンド一発でローカルサーバーが立ち上がるので、http://localhost:3000にアクセスすればよい。

$ revealgo example.md
accepting connections at http://*:3000/

管理めんどい

と、まぁ

1. 手元でMarkdownを書いて
2. revealgoを実行して
3. 発表

という流れはいいものの、それをアーカイブしてWebで公開しておくの手段がなかった。否、あるんだけど、諸々管理が面倒でやってなかった。で、いいのないかなーって探してたら、いいのがあった。そしてこれを使えば、revealgo要らなかった。

reveal-hugo

Hugoも便利で個人ブログやトラベルブックのテックブログで使っている。いわゆるSSGなんだけど、以下の2点が特徴だ。

• プレビューサーバーが内蔵されている
• ビルドが速いのでライブリロードにフラストレーションがない

このHugoのテーマの一つが、「reveal-hugo」である。revea.jsのスライドをHugoのテーマでやっちゃうって発想が素晴らしい。

https://github.com/dzello/reveal-hugo

Hugoのテーマは、生成されるHTMLの見た目を調整できる。reveal-hugoはreveal.jsのJavaScriptやCSSを、HTMLに流し込んで、「スライドの見た目」にしちゃうテーマである。ブログ記事を書くようにスライドのネタをMarkdownで書けば、それがrevea.jsのスライドになるのだ。これなら、これまで書いたスライドのネタ=Markdownを管理できる。

それだけではない。Hugoには「プレビュー・ライブリロード」の機能があるので、スライドの作成・発表にも使える。

「公開」はHugoが得意のところ。HTMLを出力してくれるので、それをそのままホスティングしちゃえば簡単。今回はGitHub Pagesで公開することにした。GitHub ActionsがHTMLをビルドして、gh-pagesブランチに配置・デプロイしてくれる。

一気通貫

ってことで、reveal-hugoを使えばスライドにまつわる全部をカバーできる。

1. 手元でMarkdownを書いて
2. プレビューして
3. 発表
4. 管理
5. Webで公開

これはすごい。

スライド公開ページ

それで、スライドを公開してるページはこちら。むかーしむかーしのスライドをいくつか掲載している。

https://yusukebe.github.io/slides/

なかでも、

• 1日でわかるWebサービス制作の全て ～企画から実装まで～

は 2013年！ に作ったものだけど、今でも通じるものだと思うので、オススメ。