slidev-deployment

Deploying Slidev Presentations

This skill covers deploying Slidev presentations as static websites to various hosting platforms, making your presentations accessible online.

When to Use This Skill

• Sharing presentations via URL
• Hosting for conferences/events
• Creating permanent presentation archives
• Setting up CI/CD for presentations
• Embedding presentations in websites

Building for Production

Build Command

npx slidev build

Or via npm script:

npm run build

Output

Creates dist/ directory containing:

• index.html
• JavaScript bundles
• CSS files
• Asset files

Build Options

# Custom output directory
npx slidev build --out public

# With base path (for subdirectories)
npx slidev build --base /presentations/my-talk/

# Enable PDF download
npx slidev build --download

# Exclude presenter notes (security)
npx slidev build --without-notes

GitHub Pages

Method 1: GitHub Actions (Recommended)

1. Enable GitHub Pages:

   • Go to Settings → Pages
   • Source: GitHub Actions

2. Create workflow file .github/workflows/deploy.yml:

name: Deploy Slidev

on:
  push:
    branches: [main]
  workflow_dispatch:

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

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

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

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

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