English | 日本語 |
GitHub Pages連携ガイド
概要
AutoSlideIdeaは、GitHub Pagesと統合してプレゼンテーションをWebサイトとして公開する機能を提供します。これにより、URLを共有するだけで誰でもプレゼンテーションにアクセスできるようになります。
🎯 デモサイトを見る - 実際のGitHub Pages出力例
主な機能
- 自動デプロイ: mainブランチへのプッシュ時に自動的にWebサイトを更新
- 美しいギャラリー: 複数のプレゼンテーションを一覧表示
- 検索・フィルタ機能: タグや検索ワードでプレゼンテーションを絞り込み
- レスポンシブデザイン: PC・タブレット・スマートフォンに対応
- ダークモード対応: システム設定に応じて自動切り替え
セットアップ方法
1. GitHub Pagesワークフローで新規作成
最も簡単な方法は、create-presentation.sh
スクリプトでGitHub Pages専用ワークフローを使用することです:
# GitHub Pages対応のプレゼンテーションを作成
./scripts/create-presentation.sh --github --workflow github-pages my-portfolio
# パブリックリポジトリとして作成(推奨)
./scripts/create-presentation.sh --github --public --workflow github-pages conference-2024
このコマンドで以下が自動的に設定されます:
- GitHub Actionsワークフロー(
.github/workflows/github-pages.yml
) - 必要な権限設定
- ビルドとデプロイの自動化
2. 既存プレゼンテーションへの追加
既存のプレゼンテーションリポジトリにGitHub Pages機能を追加する場合:
- ワークフローファイルをコピー
cp templates/github-workflows/github-pages.yml .github/workflows/
- コミットしてプッシュ
git add .github/workflows/github-pages.yml git commit -m "Add GitHub Pages workflow" git push origin main
- GitHub Pagesを有効化
- リポジトリの Settings → Pages へ移動
- Source を “GitHub Actions” に設定
3. 初回デプロイ
プッシュ後、GitHub Actionsが自動的に実行されます:
- 進行状況の確認
- リポジトリの Actions タブで進行状況を確認
- 初回は5-10分程度かかる場合があります
- URL確認
https://[ユーザー名].github.io/[リポジトリ名]/
プレゼンテーションの管理
ディレクトリ構造
GitHub Pagesワークフローは以下の構造を前提としています:
your-presentation/
├── slides.md # メインプレゼンテーション
├── additional-talk.md # 追加のプレゼンテーション(任意)
├── assets/ # 画像・リソース
│ ├── images/
│ └── styles/
└── .github/
└── workflows/
└── github-pages.yml
複数プレゼンテーションの管理
1つのリポジトリで複数のプレゼンテーションを管理できます:
repository/
├── slides.md # メイン
├── workshop/
│ └── hands-on.md # ワークショップ資料
├── lightning-talks/
│ ├── intro.md # 5分トーク
│ └── advanced.md # 詳細版
└── assets/ # 共通リソース
すべての.md
ファイルが自動的にHTML/PDFに変換され、ギャラリーに表示されます。
カスタマイズ
インデックスページのカスタマイズ
デフォルトのインデックスページをカスタマイズするには:
- テンプレートをコピー
cp templates/github-pages/index-template.html index-template.html
- プレースホルダーを編集
- ``: サイトタイトル
- ``: サイト説明
- ``: ヘッダータイトル
- その他のテキストを必要に応じて変更
- ワークフローを更新 カスタムテンプレートを使用するようワークフローを修正
プレゼンテーションメタデータ
各プレゼンテーションにメタデータを追加して、ギャラリー表示を充実させることができます:
---
title: AI時代のプレゼンテーション作成
author: 山田太郎
date: 2024-01-15
tags: [AI, 自動化, Marp]
description: AIツールを活用した効率的なプレゼンテーション作成方法
---
# スライドタイトル
トラブルシューティング
ビルドが失敗する場合
- Actions権限の確認
- Settings → Actions → General
- “Read and write permissions” が有効になっているか確認
- ワークフローの確認
- Actions タブでエラーログを確認
- 日本語フォントのインストールに失敗している場合が多い
ページが表示されない場合
- GitHub Pages設定の確認
- Settings → Pages
- Source が “GitHub Actions” になっているか確認
- カスタムドメインを使用している場合はDNS設定も確認
- デプロイ状況の確認
- Actions タブで “pages build and deployment” が成功しているか確認
スタイルが適用されない場合
- アセットパスの確認
- 相対パスが正しいか確認
--allow-local-files
オプションが有効になっているか確認
- キャッシュのクリア
- ブラウザのキャッシュをクリア
- GitHub Pagesのキャッシュは最大10分
ベストプラクティス
- プレゼンテーションの整理
- 関連するプレゼンテーションはディレクトリでグループ化
- 明確なファイル名を使用(日付やイベント名を含める)
- アセット管理
- 画像は適切に圧縮
- 共通リソースは
assets/
ディレクトリに集約
- 継続的な改善
- プレゼンテーション後もフィードバックを反映
- 更新履歴をコミットメッセージで明確に
- セキュリティ
- 機密情報を含むプレゼンテーションは別管理
- 必要に応じてプライベートリポジトリを使用