GitHub Pages で
スライドショーを実行

Markdownからプロフェッショナルなプレゼンテーションまで、様々なスライドショーをGitHub Pagesで公開する完全ガイド

Markdown対応

テキストベースでプレゼンテーションを簡単作成

無料ホスティング

GitHub Pagesで世界中に無料公開

自動デプロイ

GitHub Actionsで更新を自動反映

実装方法一覧

用途に応じて最適なスライドショーツールを選択できます

Reveal.js

推奨

最も人気のあるHTML5プレゼンテーションフレームワーク。Markdownサポート、豊富なテーマ、プラグインが特徴。

Markdownサポート
豊富なテーマ
アニメーション効果

Remark.js

シンプル

軽量でシンプルなMarkdown駆動のスライドショーツール。素早くプレゼンテーションを作成したい場合に最適。

軽量
学習コストが低い
カスタマイズ性

画像スライダー

画像特化

HTML/CSS/JavaScriptで作成する画像専用スライドショー。ポートフォリオやギャラリーサイトに最適。

レスポンシブ対応
タッチ操作
自動再生

実装チュートリアル

Reveal.jsを使用したスライドショーの作成から公開まで

1

リポジトリの作成と設定

GitHubでリポジトリを作成し、必要なディレクトリ構成を設定します。

ディレクトリ構成
slides/
├── docs/         # GitHub Pages公開用
├── md/           # Markdownファイル
├── css/          # カスタムスタイル
└── .nojekyll     # Jekyll無効化
2

reveal-mdのインストール

Markdownからスライドを生成するreveal-mdをインストールします。

Terminal
# npm経由でインストール
npm install -g reveal-md

# スライドの作成とプレビュー
reveal-md ./md -w

# 静的ファイルの生成
reveal-md md --static docs
3

Markdownスライドの作成

Markdownファイルでスライドコンテンツを作成します。

slides.md
---
theme: white
slideNumber: true
---

# GitHub Pagesスライドショー

Markdownで簡単にプレゼンテーション作成

---

## 特徴

- Markdownで記述
- テーマのカスタマイズ
- アニメーション効果

---

## まとめ

GitHub Pagesで手軽にスライド公開!
4

GitHub Actionsの設定

自動ビルドとデプロイのためのワークフローを設定します。

.github/workflows/deploy.yml
name: Deploy Slides
on:
  push:
    branches: [ main ]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: |
          npm install -g reveal-md
          reveal-md md --static docs
      - name: Deploy to Pages
        uses: peaceiris/actions-gh-pages@v4
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: docs
5

GitHub Pagesの有効化

リポジトリ設定でGitHub Pagesを有効化し、docsフォルダを公開対象に設定します。

Settings → Pages → Source を「Deploy from a branch」に設定し、ブランチを「gh-pages」または「main」の「docs」フォルダに指定

ツール比較

主要なスライドショーツールの特徴と適用場面を比較

ベストプラクティス

  • Markdownファイルは構造化して管理する
  • 画像は適切なサイズに最適化する
  • テーマは一貫性を保って選択する
  • スライド数は適切な範囲に抑える

よくある問題と解決策

  • パスの設定ミス → 相対パスを正しく設定
  • Jekyll干渉 → .nojekyllファイルを配置
  • テーマが適用されない → CSSパスを確認
  • 自動デプロイ失敗 → GitHub Actions権限を確認

参考リソース

さらに詳しい情報と実例