Slidevをモノレポ管理して公開したい
ぱんだSlidevでスライドを作りたいけど一応公開してリンクを共有できるようにしておきたい。VercelとNetlifyとGitHub Pagesへの静的ホスティングをサポートしているので簡単に公開できるが基本的にSlidev１プロジェクトに対して１つのスライドとなるので毎回Gitリポジトリを作成するのは面倒。
なのでモノレポのような構成にして１つのリポジトリで複数のSlidevプロジェクトを管理したい。
ぱんだVercel
Vercelでモノレポのプロジェクトもデプロイできるみたい。
ただ、無料枠だと３つまでしかプロジェクトを公開できないみたいなので別の方法を探す。
ぱんだNetlify
Netlifyは月300分のビルド時間を超えると課金が走るよう。クレジット登録しないでも使えるみたいだけど上限超えるとサイトが停止するよう。モノレポにも対応してそう。
そんなにスライド作る予定ないから公開できるプロジェクト数の上限とかなければNetlifyでもいいかも。
ぱんだCloudflare Pages
こちらもモノレポ対応したそうで本当はプロフィールサイトもCloudflareだから使いたかったけどモノレポの上限プロジェクト数が5サイトまでのようなのであきらめた。
ぱんだGitHub Pages
TODO
ぱんだSlidevの作者の方のスライド管理してるリポジトリ見つけた
pnpmのモノレポで管理していてNetlifyで公開してる。ちょっとリダイレクトの設定が理解しきれなかったのだけど公開URLをわかりやすくリダイレクトしてるのか？
ぱんだ使い方プロすぎてびびる
ぱんだできた
ルートディレクトリにnetlify.tomlを置いてビルドコマンドでpnpm run -r buildを実行して各slidevプロジェクトのビルドをする。ビルドの成果物はルートのdistに置いておいてルーティングはリダイレクトセクションを設定してビルドしたページに行くようにする。
ぱんだルートパスだけ設定してないから404ページになってしまうのでなにかしら置いておくかどこかのスライドにリダイレクトするようにしておかないといけない。
ぱんだpnpm workspaceを使ったモノレポ化
書いてなかったので書いておく。
pnpmのインストールがしてない場合、インストールする。
今からインストールするならcorepacksを使ってインストールするのが推奨らしい。
# corepackの有効化
corepack enable
# corepack経由でインストール
corepack prepare pnpm@latest --activate
pnpm -v
9.4.0
pnpm init
workspaceを有効にするために以下を作成
packages:
- "*/src"
ディレクトリ構造は悩んだけどとりあえずantfuさんの構成を真似した。
ルートのpackage.jsonにビルドタスクを記載しておく。
{
"name": "talks",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
+ "build": "pnpm run -r build",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"packageManager": "pnpm@9.4.0+sha512.f549b8a52c9d2b8536762f99c0722205efc5af913e77835dbccc3b0b0b2ca9e7dc8022b78062c17291c48e88749c70ce88eb5a74f1fa8c4bf5e18bb46c8bd83a"
}
あとはスライドを作りたいディレクトリを作成してpnpm create slidevを実行すればslidevのプロジェクトが作成される。
vercelとnetlifyのデプロイファイルは不要なので削除しておく。
ルートにpnpm-lock.yamlとnode_modulesを作成したいので一回pnpm installを実行しておく。
ここまでで、ディレクトリ構成は以下のようになっているはず
% tree -I node_modules
.
├── 2024-06-28
│ └── src
│ ├── README.md
│ ├── components
│ │ └── Counter.vue
│ ├── package.json
│ ├── pages
│ │ └── multiple-entries.md
│ ├── slides.md
│ └── snippets
│ └── external.ts
├── README.md
├── package.json
├── pnpm-lock.yaml
└── pnpm-workspace.yaml
プロジェクトごとのpackage.jsonは以下のようにルートのdistにビルドするようにしておく。
{
"type": "module",
"private": true,
"scripts": {
"dev": "slidev --open",
"build": "slidev build --base /2024/not-hate-go/ --out ../../dist/2024/not-hate-go",
"export": "slidev export --dark --output ../2024-06-28-not-hate-go.pdf"
}
}
途中でビルドできなくて焦ったが以下のissueで解決
ぱんだやっぱりCloudflare pagesにデプロイする
netlifyでできたけど結局pnpmのworkspaceを使ったモノレポ管理だがdist配下にすべてbuildしてredirectの設定をすることでルーティングをしているだけなのでモノレポ対応していなくてもデプロイできる。
なので、Cloudflare pagesにデプロイしてみる。
netlify.tomlで設定していたredirectセクションはデプロイ対象のディレクトリ配下に_redirectsというファイルを作成すればok。
/2024/not-hate-go/* /2024/not-hate-go/index.html 200
/ /index.html 200
あとはデプロイするだけ。
pnpm i -D wrangler
pnpx wrangler login
pnpx wrangler pages deploy dist
まじでデプロイ楽
ぱんだトップ画面
ルートディレクトリを設定していないので何かしら設定しておく。いろいろやり方が考えられたが今回はhome/srcにviteプロジェクトを作成してdist配下にbuildするようにした。
mkdir -p home/src
cd home/src
pnpm create vite@latest talks-home --template vanilla-ts
適当にスライドのリンクを箇条書きしただけのトップページを作ってデプロイ。ほんと楽
ぱんだGitHub リポジトリ
公開webサイト