MarpでGithubActionsを使ってGithubPagesにスライドを公開してみる

はじめに

LTとか発表用のスライドはGoogleスライドなどで作るのが良いなーと思っているんですが、自分の勉強、個人利用で簡単にスライド作成したいのとマークダウン使いたいなー良いのないかなと探してたら、Marpという良いCLIツールを見つけたので書いておきます。

Marpとは

marp.app

Marpは、プレーンなMarkdownを使用してスライドを作成するためのエコシステムです。とあります。エコシステムという表現をしてるのは、CLIツールだけでなく、最小構成のHTML&CSSのフレームワークだったり、変換するエンジンの部分がCoreとして切り出されていたり、VSCodeの拡張があるからっぽいですね。

Marp導入

今回はnodeで使いたいので、npmでインストールします。

npm -y init
npm install --save-dev @marp-team/marp-cli

その後、マークダウンファイルを記述します。

---
marp: true
theme: gaia
class:
    - lead
---

## はじOS読んだまとめ

---

### 読んだ目的
- コンピュータシステムの全体像を理解する

---

...

https://github.com/komura-c/tech-memo/blob/main/src/slides/first-os-code-reading.md

こんな感じで書いた後、mdファイルを置いた読み込むディレクトリ、HTMLファイルを出力するディレクトリを設定します。設定ファイルは、marp.config.jsとか.marprcとかを作成して書けるみたいですが、面倒なのでpackage.jsonのセクションに書きます。

...
  "marp": {
    "inputDir": "./src/slides/",
    "output": "./public/slides/"
  }
...

https://github.com/marp-team/marp-cli#configuration-file

そして、開発用サーバーを立ち上げます。

marp -s

その開発サーバー(localhost)にアクセスすると、スライドとして出力結果が見れるので、コードを編集しながらスライドを作成できます。

その他できることについては、リポジトリのREADMEにまとまってるのでやりたいことを探してみると良いかもしれません。 GitHub - marp-team/marp-cli: A CLI interface for Marp and Marpit based converters

実際に出力結果を別のファイルに書き出したい時は、次のシンプルなコマンドでできます。

marp

GithubActionsを使ってGithubPagesにスライドを公開してみる

今回は、マークダウンファイルを編集してpushしたら、スライドが公開されてるといいなーと考えたため、簡単なGithubActionsのyamlファイルを記述してGithubPagesに公開してみました。

// 先ほどのコマンドを少し変えてpackage.jsonに書き、npmコマンドで使えるようにしています
  "scripts": {
    "dev": "marp -s",
    "build": "marp && cp src/index.html public"
  },

name: Publish GitHub Pages
on:
  push:
    branches:
      - main

jobs:
  publish:
    runs-on: ubuntu-latest
    timeout-minutes: 5
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 14
      - run: npm ci
      - run: npm run build
      - uses: peaceiris/actions-gh-pages@v3
        with:
          deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}
          publish_dir: ./public

やってることは、単純にMarpをインストールして、出力結果をgh-pagesブランチにpushすることで、GithubPagesに公開しているという感じです。

注意点が1つあるとすると、リポジトリにpushするため、そのためのsshキーをdeploy_keyで指定する必要があることです。これは、actions-gh-pagesのリポジトリのREADMEのCreate SSH Deploy Keyに設定方法が丁寧に書いてあります。 https://github.com/peaceiris/actions-gh-pages#tips-and-faq

手順としては、次のコマンドで生成した公開鍵を自分のリポジトリのSettings→Deploy Keys、秘密鍵を自分のリポジトリのSettings→Secretsに追加するだけです。

ssh-keygen -t rsa -b 4096 -C "$(git config user.email)" -f gh-pages -N ""

Secretsに追加した秘密鍵のタイトルでdeploy_keyに追加することで使えます。

deploy_key: ${{ secrets.ACTIONS_DEPLOY_KEY }}

おわりに

雑にMarpでGithubActionsを使ってGithubPagesにスライドを公開してみる流れを書きました。シンプルに触ってみただけなため、まだ活用できているわけではなく、今後上手く使っていこうと思いました。

komura-c.log

komura-cのWeb技術、音、生活のメモの備忘ログ