Markdownからプロフェッショナルなプレゼンテーションまで、様々なスライドショーをGitHub Pagesで公開する完全ガイド
テキストベースでプレゼンテーションを簡単作成
GitHub Pagesで世界中に無料公開
GitHub Actionsで更新を自動反映
用途に応じて最適なスライドショーツールを選択できます
最も人気のあるHTML5プレゼンテーションフレームワーク。Markdownサポート、豊富なテーマ、プラグインが特徴。
軽量でシンプルなMarkdown駆動のスライドショーツール。素早くプレゼンテーションを作成したい場合に最適。
HTML/CSS/JavaScriptで作成する画像専用スライドショー。ポートフォリオやギャラリーサイトに最適。
Reveal.jsを使用したスライドショーの作成から公開まで
GitHubでリポジトリを作成し、必要なディレクトリ構成を設定します。
slides/
├── docs/ # GitHub Pages公開用
├── md/ # Markdownファイル
├── css/ # カスタムスタイル
└── .nojekyll # Jekyll無効化
Markdownからスライドを生成するreveal-mdをインストールします。
# npm経由でインストール
npm install -g reveal-md
# スライドの作成とプレビュー
reveal-md ./md -w
# 静的ファイルの生成
reveal-md md --static docs
Markdownファイルでスライドコンテンツを作成します。
---
theme: white
slideNumber: true
---
# GitHub Pagesスライドショー
Markdownで簡単にプレゼンテーション作成
---
## 特徴
- Markdownで記述
- テーマのカスタマイズ
- アニメーション効果
---
## まとめ
GitHub Pagesで手軽にスライド公開!
自動ビルドとデプロイのためのワークフローを設定します。
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
リポジトリ設定でGitHub Pagesを有効化し、docsフォルダを公開対象に設定します。
主要なスライドショーツールの特徴と適用場面を比較