slides2pages

Marp を GitHub ページにデプロイする

Web ページへのプレゼンテーション: 即座に!

何？

Marp を使用すると、マークダウンから HTML スライドを作成できます (このように!)。

このプレゼンテーションは Web サイトと README.md の両方です。

なぜ？

コードを扱うのと同じようにプレゼンテーションを扱います。

• git を使用して変更を追跡する
• 共同作業のためのプルリクエスト
• 自動的に展開する
• 問題が見つかりましたか?問題を開いてください!

設定

自分で作成してみませんか?

まず、テンプレート リポジトリから新しいリポジトリを作成します。

GitHub ページの構成

新しいリポジトリを開いて公開を設定します。

通常は、 gh-pagesデプロイ ブランチとして使用します。

ビルドのレビュー

「アクション」タブをクリックして、ビルドが成功したかどうかを確認します (時間がかかる場合があります)。

gh-pagesブランチに生成されたファイルが表示されるはずです。

ウェブページを見る

デプロイされた Web ページを開いてコンテンツを確認します。

すぐに使用すると、 README.md /index.htmlおよび/README.pdfとして表示されます。 docs/下のスライドも変換されます。

ローカルで実行する

• marp-cliインストールせずにワンショット変換

$ npx @marp-team/marp-cli@latest README.md -o build/README.pdf

---

• または、 npmを使用してmarp-cli現在のディレクトリにインストールします

$ npm install --save-dev @marp-team/marp-cli

• 上記のコマンドを実行すると、現在のディレクトリに次のようなpackage.jsonファイルが作成されます。

{
	"devDependencies" : {
		"@marp-team/marp-cli" : " ^4.0.0 "
	}
}

---

• npxというプレフィックスを付けると、現在のディレクトリでmarpコマンドが使用できるようになりました。

$ npx marp README.md -o build/README.pdf

• そしてこれが出力です

[  INFO ] Converting 1 markdown...
[  INFO ] README.md = > build/README.pdf

---

• 現在のディレクトリにpackage.jsonファイルがすでにある場合は、これを実行するだけで、指定されたパッケージがインストールされます。

$ npm install

ワークフローのステップとして

ワークフローは同等のステップを実行します。

 - name: Marp Build (README.pdf)
  uses: docker://marpteam/marp-cli:v1.7.0
  with:
    args: README.md -o build/README.pdf
  env:
    MARP_USER: root:root

args前のスライドと一致していることに注意してください。

ビルドのカスタマイズ

build/フォルダー内のすべてのものは GitHub Pages にデプロイされます。

余分なファイルをコピーしたり、他のツールを使用してさらなる処理ステップを実行したりできます。

マープについて詳しく見る

Marp についてさらに学ぶ良い機会です。以下にいくつかのリソースがあります。

• コモンマーク
• チートシート
• テーマ
• CSS テーマ
• 指令
• VSコードプラグイン
• マープオンラインエディター

サイトの例

このアクションを使用する既知のサイトは次のとおりです。

• イリノイ大学アーバナ・シャンペーン校の CS 199 さらなる実践 (コード)
• エージェントベースのモデルの探索 (コード)

プル リクエストを送信してサイトを追加してください。

スライドを公開する

プレゼンテーションを共有する準備ができたら、 mainにコミットまたはマージすると、GitHub Pages のコンテンツが自動的に更新されます。

?

万歳！