ビルドとホスティング

Slidev はスライドを編集またはプレゼンテーション中に Web サーバーとして実行するように設計されています。ただし、プレゼンテーション後も、インタラクティブなスライドを他の人と共有したい場合があります。このガイドでは、スライドをビルドしてホストする方法を説明します。

SPA としてビルド

次のコマンドを使用して、スライドを静的な シングルページアプリケーション (SPA) にビルドできます。

$ slidev build

デフォルトでは、生成されたファイルは dist フォルダに配置されます。ビルドされたバージョンのスライドをテストするには、npx vite preview または他の静的サーバーを実行します。

ベースパス

スライドをサブルートにデプロイするには、--base オプションを渡す必要があります。--base パスは スラッシュ / で始まり、スラッシュ / で終わる必要があります。例えば:

$ slidev build --base /talks/my-cool-talk/

詳細については Vite のドキュメント を参照してください。

出力先のディレクトリ

--out を使用して出力先のディレクトリを変更できます。

$ slidev build --out my-build-folder

複数ビルド

複数のマークダウンファイルを引数として渡すことで、一度に複数のスライドデッキをビルドできます。

$ slidev build slides1.md slides2.md

またはシェルがサポートしている場合、グロブパターンを使用できます。

$ slidev build *.md

この場合、各入力ファイルは出力ディレクトリ内のビルドを含むフォルダを生成します。

例

エクスポートされた SPA の例をいくつか示します。

• デモスライド
• Composable Vue by Anthony Fu
• その他は ショーケース を参照

オプション

✨ ビルド時の PDF 生成

✨ リモートアセットのバンドル

ホスティング

プロジェクトのひな型を作成するには、npm init slidev@latest を使用することをお勧めします。これには、ホスティングサービスに必要な構成ファイルが含まれています。

GitHub Pages

GitHub Actions を使用して GitHub Pages にスライドをデプロイするには、以下の手順に従ってください。

1. リポジトリで、Settings > Pages に進みます。Build and deployment の下で GitHub Actions を選択します。(Deploy from a branch を選択して dist ディレクトリを主導でアップロードする方法は推奨されません)
2. .github/workflows/deploy.yml を作成して、以下の内容で GitHub Actions を通じて GitHub Pages にスライドをデプロイします。

deploy.yml

name: Deploy pages

on:
  workflow_dispatch:
  push:
    branches: [main]

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: pages
  cancel-in-progress: false

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: 'lts/*'

      - name: Setup @antfu/ni
        run: npm i -g @antfu/ni

      - name: Install dependencies
        run: nci

      - name: Build
        run: nr build --base /${{github.event.repository.name}}/

      - name: Setup Pages
        uses: actions/configure-pages@v4

      - uses: actions/upload-pages-artifact@v3
        with:
          path: dist

  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    needs: build
    runs-on: ubuntu-latest
    name: Deploy
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

3. リポジトリに変更をコミットしてプッシュします。GitHub Actions ワークフローは main ブランチにプッシュするたびに自動的にスライドを GitHub Pages にデプロイします。
4. スライドに https://<username>.github.io/<repository-name>/ でアクセスできます。

Netlify

プロジェクトルートに netlify.toml を作成して、以下の内容にします。

netlify.toml

[build]
publish = 'dist'
command = 'npm run build'

[build.environment]
NODE_VERSION = '20'

[[redirects]]
from = '/*'
to = '/index.html'
status = 200

その後、Netlify ダッシュボード に移動してリポジトリから新しいサイトを作成します。

Vercel

プロジェクトルートに vercel.json を作成して、以下の内容にします。

vercel.json

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

その後、Vercel ダッシュボード に移動してリポジトリから新しいサイトを作成します。

Docker でホストする

コンテナでプレゼンテーションを実行する迅速な方法が必要な場合は、tangramor によって維持されているプリビルト docker イメージ を使用することも、独自にビルドすることもできます。

Docker イメージを使用する

作業フォルダで以下のコマンドを実行するだけです。

docker run --name slidev --rm -it \
    --user node \
    -v ${PWD}:/slidev \
    -p 3030:3030 \
    -e NPM_MIRROR="https://registry.npmmirror.com" \
    tangramor/slidev:latest

注: NPM_MIRROR を使用して npm ミラーを指定してインストールプロセスを高速化できます。

作業フォルダが空の場合、テンプレート slides.md とその他の関連ファイルを作業フォルダの下に生成し、ポート 3030 でサーバーを起動します。

スライドには http://localhost:3030/ からアクセスできます

スライド用の Docker イメージを作成するには、以下の Dockerfile を使用できます。

FROM tangramor/slidev:latest

ADD . /slidev

docker イメージを作成: docker build -t myslides .

コンテナを実行: docker run --name myslides --rm --user node -p 3030:3030 myslides

スライドを http://localhost:3030/ で確認できます