【3分】Github Actionsを使ってSlidevをGithub Pagesで公開する手順メモ

始めてSlidevを触ってみたが、Github Pagesで公開するまでは簡単だったものの、一部メモしておいた方が良かったため手順を残すことにした。

今度JAWS PANKRATION 2024で発表させていただくが、Ginza.rb 第82回でsli.devで作られた資料を見て、これは便利だと感じ、実際に触ってみた。

簡単な手順で、中身はデモのプレゼンだがGithub Pagesで公開することができた。→ https://umihico.github.io/jawspankration2024/

前提条件

レポジトリ名をhttps://github.com/umihico/jawspankration2024とするため、適宜読み替えること。

手順

レポジトリjawspankration2024を作成する。後でforce-pushするため、作成時にプッシュコマンドを例示してくれるよう、README無しの空が良い。
レポジトリをクローンせず、親ディレクトリでnpm init slidev@latestを実行する。
プロジェクト名をjawspankration2024、パッケージマネージャーをnpmに設定する。
プロジェクト名で生成されたディレクトリに入って、生成物をコミットする。（コマンド後述）
公式ドキュメントを参考にdeploy.ymlをコピーして.github/workflows/deploy.ymlを作成する。
Githubのレポジトリ設定からPagesでGithub Actionsを選択する。(原文: In your repository, go to Settings > Pages. Under Build and deployment, select GitHub Actions.)
Push（コマンド後述）してCIが通ったことを確認したら、Github Pagesで公開されていることを確認する。

コマンド

# 親ディレクトリで実行して生成されたディレクトリに入る
npm init slidev@latest
cd jawspankration2024

# 生成物をコミットする
git init
git add -A
git commit -m "cmd: npm init slidev@latest" -m "project name -> jawspankration2024 / package manager > npm"

# deploy.ymlを追加した後
git add -A
git commit -m "cmd: add deploy.yml" -m "copy from https://sli.dev/guide/hosting#github-pages"

# Githubのレポジトリ設定からPagesでGithub Actionsを選択した後にプッシュする。レポジトリ生成時の例示コマンドを使う。
git branch -M main
git remote add origin git@github.com:umihico/jawspankration2024.git
git push -u origin main

メモしたかったところ

パッケージマネージャーはnpmにしないとdeploy.ymlが動かない
レポジトリの中でnpm init slidev@latestを実行すると、ディレクトリjawspankration2024の中にjawspankration2024が入れ子で作成されてしまう

以上。簡単。