Zenn
📝

SlidevをローカルでビルドしてGitHub Pagesに置く

2022/08/10に公開
GitHub
SPA
Slidev
tech

https://sli.dev/

SlidevはMarkdownでスライドを作成するツールです。
Window環境でスライドを作成してGitHub Pagesとして置く、というのをやってみました。

準備

Node.jsを使用するので入ってなければインストールしておきます。
最近はwinget経由だとおしゃれかも。

初期化

対象のフォルダで次のコマンドを実行

$ npm init slidev
プロジェクト名などを聞かれるので適当に設定します
npm init slidev

  ●■▲
  Slidev Creator  v0.35.4

? Project name: » slidevTestSlidev
√ Project name: ... TestSlidev
? Package name: » testslidev
√ Package name: ... testslidev
  Scaffolding project in TestSlidev ...
  Done.

? Install and start it now? » (Y/n)Y
√ Install and start it now? ... yes
? Choose the agent » - Use arrow-keys. Return to submit.
>   npm
    yarn
    pnpm

√ Choose the agent » npm

added 481 packages, and audited 482 packages in 7s

89 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

> dev
> slidev --open



  ●■▲
  Slidev  v0.35.4

  theme   @slidev/theme-seriph
  entry   C:\work\test\TestSlidev\slides.md

  public slide show   > http://localhost:3030/
  presenter mode      > http://localhost:3030/presenter/
  remote control      > pass --remote to enable

  shortcuts           > restart | open | edit

  ! UnoCSS support is experimental, the styling might break without following semver.
  ! We suggest pinning the version of Slidev when using experimental features.

指定したプロジェクト名のフォルダが生成されます。
slides.mdがスライド本体でこのファイルを編集していくことになります。

編集中のものをgitなどで落としてきた場合はこちらのコマンドは必要ありません。

編集

プロジェクトフォルダ内に移動し、次のコマンドでプレビューがブラウザに表示されます。

$ npm run dev

slides.mdがデフォルトでサンプル的な内容になっているので、プレビューと見比べるといろいろな機能がわかります。slides.mdの変更内容はリアルタイムで反映されますが、編集したページに自動で遷移するわけではないのでちょっと不便です。

VS Code拡張

VS Codeの拡張機能がおすすめです。
https://github.com/slidevjs/slidev-vscode

プレビューも編集に合わせて遷移します。
表示されてない場合は 表示 > 外観 > Secondary Side Bar(Ctrl+Alt+B)

画像の置き場

画像は静的コンテンツ置き場である、[プロジェクトフォルダ]/public下に置きます。
Markdown上では/publicでパスを指定するのが正解みたいです。

![](/public/image.png)
<img src=/public/image.png />

public、./publicなどでもプレビュー上では問題なかったのですが後述するエクスポートした際にエラーになりました。

ビルド

SlidevはPDF、PNG、SPA(Single-Page Applitaion)としてエクスポートできます。

SPAについては、ドキュメントのStatic Hostingに詳しくにのっていて、Netlify、Vercelにホスティングしてもらうのがおすすめみたいです。たしかにリポジトリを見て勝手に更新してくれるので楽そうです。また、GitHub Pagesに出力する場合もGitHub Actionsで自動的に生成する方法が紹介されています。

今回はこれらとは違い、ローカルでSPAとして出力しGitHub Pagesに手動で置く方法になります。

SPAでエクスポート

プロジェクトフォルダで次のコマンドを実行します。

$ npm run build -- --out docs

これでdocsフォルダにSPAとしてのファイルが生成されます。

出力フォルダはデフォルトではdistなのですが、GitHub Pagesのフォルダとして使えるパスは/か/docsなので、--out オプションで出力フォルダをdocsにしています。

GitHub Pagesの設定

ここまで出来たらプロジェクトフォルダをまるごとGitHubにPushします。
GitHubのリポジトリで、GitHub Pagesの設定をします。

Settings > Pages > Branch でブランチとフォルダを指定します。

これで、https://[username].github.io/[repository]でスライドが公開されます。

Discussion