資料館オープン (Marp + GitHub Actionsでスライド資料を簡単デプロイ)
9月 5, 2026はじめに#
こんにちは. ここ一年ほど, 色々なイベントに顔を出すようになり, 以前の自分では考えられないほど活発に活動するようになりました.
その中で, ちょくちょく発表する機会もあったので, そこで使った資料をまとめておく場所が欲しいなと思い, 資料館を作りました. (まあ, 半年ほど前くらいからオープンしていたのですが…)
こういう感じ↓
せっかくなので, ここで資料館の作り方を簡単に紹介しておこうと思います. なお, 資料館のソースコード（テンプレート）はこちらに置いてあります. よければ適当にforkしてカスタムして使ってください.
資料館とは#
資料館は, MarpとGitHub Actionsを使った, 楽々スライド共有サービスです.
「え, SlideShareとかSpeakerDeckとかあるじゃん」と思う方もいるかも知れません…. お帰りください.
「いやだああ、自分でセルフホストしたいよ〜せっかく自分のドメインもホームページもあるのに！」同士の方, ようこそ, 資料館へ.
SlideShareなどサービスの場合, 当然ながらその資料の閲覧環境はサービス側の都合に依存します. 広告まみれになったり, ある日突然サービスが終了したりするリスクがあります. セルフホストしておけば, 問題ありません. それに, なんとなく, 自分が書いた資料は自分の管理下に置いておきたいという気持ちもあります. まあ, そういう人向けです.
ちなみに… 調べたところ, 同じようなことをしている人はいました.
MarpでGithubActionsを使ってGithubPagesにスライドを公開してみる - komura-c.log https://komura-c.hatenablog.com/entry/2022/07/21/032248
機能と使い方#
- スライドのHTMLとPDFを自動生成してGitHub Pagesにデプロイ
slides/YYYY-MM-DD-eventnameのようなディレクトリにindex.mdを置くと, 自動でhttps://slides.example.com/YYYY-MM-DD-eventname/にプレビュー用HTML(index.html)とPDF(index.pdf)が生成されます. テーマ指定とかもできます. (stylesディレクトリにCSSをおけばOK)
- トップページにスライド一覧を自動生成
https://slides.example.comにアクセスすると, これまでにアップロードしたスライドの一覧が表示されます. もちろん, 日付順にソートされます.- 説明文やイベント名などのメタ情報は,
index.mdのYAML Front Matterに書くことで反映されます.
- OGP用のサムネイル画像を自動生成
- スライドの1ページ目を切り出してOGP用のサムネイル画像として自動生成します. これにより, SNSでシェアしたときにスライドの1ページ目が表示されます.
仕組み#
基本的にはまあ, 上述の先行事例と同じようにGitHub ActionsでPush時にMarp CLIでPDFとHTMLに変換して, GitHub Pagesにデプロイするだけです.
OGP用のサムネイル画像は, Marp CLIで生成したPDFの1ページ目を画像として切り出して生成しています. そして, Maro CLIで生成したHTMLの<head>にOGP用のメタタグを埋め込むようにしています.
毎回生成していると, 資料の数が増えてくるとHTML/PDF/OGP画像の生成に時間がかかるので, 生成済みの資料はキャッシュして, 変更があった場合のみ再生成するようにしています.
おわりに#
資料館をオープンしました. 今後, ここに自分が作ったスライド資料をどんどんアップロードしていく予定です. もし興味があれば覗いてみてください.
テンプレートはこちらに置いてあります.