【Marp】スライドを自動デプロイしてみる

Markdown 形式でスライドを作成するツール Marp は、作成したスライドを静的な HTML ファイルとして出力することができます。

ということで、Github リポジトリにプッシュした Markdown ファイルを静的サイトホスティングに自動デプロイする方法をまとめてみました。

前提

後々ビルドをしやすくするため、下記のようなフォルダ構成でスライドを作ります。

<Directory>/
├ images/
│  └ <画像ファイルを入れる>
└ index.md

例では、スライド1つだけですが、複数スライド(.mdファイル)を入れていても問題ないです。

まずは、下記コマンドを実行して、package.json を作成します。

途中パッケージ名などを求められますが、すべてデフォルトでも問題ないです。

npm init

続けて、ビルドに必要なライブラリをインストールします。

npm install @marp-team/marp-cli
npm install cpx

package.json が出来たら、適当なエディタで開き、scripts に下記のコマンドを追加します。

  "scripts": {
    "build": "marp -I . -o dist && cpx 'images/**' dist/images"
  },

ここで追加したコマンドは下記のことをしています。

ここまで出来たら、下記コマンドを実行して、dist ディレクトリに html ファイルが生成されるのを確認します。

npm run build

まずは、静的サイトでおなじみになった Netlify にデプロイします。

無料プランでもスライド公開であれば、十分に使えます。

Github リポジトリから Netlify 上でビルドを行う設定も Web でお手軽にできるのが良さみです。

Netlify の Team overview を開き、「New site from git」を選択します
画面の指示通り、GitHub との連携、リポジトリの選択をします
Basic build settings は、下記のように設定してください
- 「Build command」に、「npm run build」を入れます
- 「Publish directory」に、「dist」を入れます
設定が終わったら、ビルドが始まるので完了まで待ちます

次に、Microsoft Azure が提供する静的ホスティングサービスの Static Web Apps にデプロイします。

プレビュー中(2021/05/10時点)ですが、こちらも無料で使えます。

他の2つと違って、リポジトリ側（Github Actions）でビルドするのがポイントです。

ビルド以外は、ドキュメント通りに作成していきます
ビルドは、下記のように設定してください
- 「App location」に、「/」を入れます
- 「Api location」は、空にします
- 「App artifact location」に、「dist」を入れます
設定が終わったら、Github Actions でビルドが始まるので完了まで待ちます

最後に、CDN や DNS で有名な Cloud flare が提供する静的ホスティングサービスの pages にデプロイします。

無料プランでも Bindwith が無制限なのは魅力的です。

ビルド廻りも Netlify と似ていてお手軽です。

「プロジェクトを作成」を選択します
画面の指示通り、GitHubとの連携、リポジトリの選択をします
ビルドは、下記のように設定してください
- 「フレームワークプリセット」は、「None」を選択します
- 「ビルドコマンド」に、「npm run build」を入れます
- 「ビルド出力ディレクトリ」に、「dist」を入れます
設定が終わったら、ビルドが始まるので完了まで待ちます