slidev-deployment

Q: How do I install slidev-deployment?

Run npx skills add https://github.com/yoanbernabeu/slidev-skills --skill slidev-deployment in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/slidev-deployment/ (personal) or .claude/skills/slidev-deployment/ (project).

by yoanbernabeuDevOps & Cloud

Deploy Slidev presentations to the web. Use this skill for GitHub Pages, Netlify, Vercel, and Docker deployments.

Installs: 197
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/yoanbernabeu/slidev-skills --skill slidev-deployment

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads slidev-deployment automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

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)

Enable GitHub Pages:
- Go to Settings → Pages
- Source: GitHub Actions
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

Push to trigger deployment
Access at: https://<username>.github.io/<repo>/

Method 2: gh-pages Branch

npm install -D gh-pages

Add to package.json:

{
  "scripts": {
    "deploy": "slidev build --base /repo-name/ && gh-pages -d dist"
  }
}

Then:

npm run deploy

Netlify

Method 1: Netlify UI

Push code to GitHub/GitLab
Connect repo in Netlify dashboard
Configure:
- Build command: npm run build
- Publish directory: dist

Method 2: netlify.toml

Create netlify.toml:

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

[build.environment]
  NODE_VERSION = "20"

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

Push and Netlify auto-deploys.

Custom Domain

In Netlify dashboard:

Domain settings
Add custom domain
Configure DNS

Vercel

Method 1: Vercel CLI

npm install -g vercel
vercel

Method 2: vercel.json

Create vercel.json:

{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "framework": null,
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

Automatic Deployment

Import project in Vercel dashboard
Connect GitHub repo
Vercel auto-detects and deploys

Cloudflare Pages

Setup

Connect repo in Cloudflare Pages
Configure:
- Build command: npm run build
- Output directory: dist
Deploy

wrangler.toml (Optional)

name = "my-presentation"
compatibility_date = "2024-01-01"

[site]
bucket = "./dist"

Docker

Dockerfile

FROM node:20-alpine as builder

WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

nginx.conf

events {
    worker_connections 1024;
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    server {
        listen 80;
        server_name localhost;
        root /usr/share/nginx/html;
        index index.html;

        location / {
            try_files $uri $uri/ /index.html;
        }
    }
}

Build and Run

docker build -t my-presentation .
docker run -p 8080:80 my-presentation

Docker Compose

version: '3.8'
services:
  presentation:
    build: .
    ports:
      - "8080:80"
    restart: unless-stopped

Self-Hosted (Static Server)

Using serve

npm install -g serve
npm run build
serve dist

Using http-server

npm install -g http-server
npm run build
http-server dist

Using Python

npm run build
cd dist
python -m http.server 8080

Base Path Configuration

For Subdirectories

If hosting at https://example.com/slides/:

npx slidev build --base /slides/

Or in frontmatter:

---
base: /slides/
---

Root Path

If hosting at root https://example.com/:

npx slidev build --base /

Security Considerations

Excluding Presenter Notes

npx slidev build --without-notes

Removes speaker notes from built version.

Password Protection

For private presentations:

Netlify: Use Netlify Identity or password protection feature.

Vercel: Use Vercel Authentication.

Custom: Add basic auth in server config.

No Remote Control in Build

Built presentations don't include remote control by default.

Environment Variables

In Build

Create .env:

VITE_API_URL=https://api.example.com

Access in slides:

<script setup>
const apiUrl = import.meta.env.VITE_API_URL
</script>

Platform-Specific

Set in platform dashboards (Netlify, Vercel, etc.)

Custom Domain Setup

DNS Configuration

Type	Name	Value
CNAME	www	platform-subdomain
A	@	Platform IP

SSL/HTTPS

Most platforms provide free SSL:

Netlify: Automatic
Vercel: Automatic
Cloudflare: Automatic
GitHub Pages: Automatic

CI/CD Workflows

GitHub Actions (Full Example)

name: Build and Deploy

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

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
        run: npm ci

      - name: Build
        run: npm run build

      - name: Export PDF
        run: npm run export

      - name: Upload Build
        uses: actions/upload-artifact@v4
        with:
          name: dist
          path: dist/

      - name: Upload PDF
        uses: actions/upload-artifact@v4
        with:
          name: pdf
          path: '*.pdf'

  deploy:
    needs: build
    if: github.ref == 'refs/heads/main'
    runs-on: ubuntu-latest
    steps:
      - name: Download Build
        uses: actions/download-artifact@v4
        with:
          name: dist
          path: dist/

      - name: Deploy to Production
        # Add your deployment step

Troubleshooting

Build Fails

Check Node version (≥18)
Clear node_modules: rm -rf node_modules && npm install
Check for syntax errors in slides

Assets Not Loading

Verify base path configuration
Check asset paths (use / prefix for public/)
Rebuild with correct base

Fonts Missing

Use web fonts
Check font loading in styles

Blank Page After Deploy

Check browser console for errors
Verify SPA routing configuration
Check base path matches URL

Best Practices

Test Build Locally:
```
npm run build && npx serve dist
```
Use CI/CD: Automate deployments
Version Your Deployments: Use git tags
Monitor Performance: Check load times
Keep URLs Stable: Don't change paths frequently

Output Format

When deploying:

PLATFORM: [GitHub Pages | Netlify | Vercel | Docker]

BUILD COMMAND:
npm run build --base [path]

CONFIGURATION FILES:
- [config file name and content]

DEPLOYMENT URL:
https://[your-domain]/[path]/

CHECKLIST:
- [ ] Build succeeds locally
- [ ] Assets load correctly
- [ ] Base path configured
- [ ] SSL/HTTPS enabled
- [ ] (Optional) Custom domain
- [ ] (Optional) Password protection

FAQ

What does the slidev-deployment skill do?

Deploy Slidev presentations to the web. Use this skill for GitHub Pages, Netlify, Vercel, and Docker deployments.

How do I install slidev-deployment?

Run npx skills add https://github.com/yoanbernabeu/slidev-skills --skill slidev-deployment in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/slidev-deployment/ (personal) or .claude/skills/slidev-deployment/ (project).

Which AI agents can use slidev-deployment?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is slidev-deployment safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains slidev-deployment?

It is published by yoanbernabeu in yoanbernabeu/slidev-skills. It has 197 recorded installs.

Popular devops & cloud skills

View category →

microsoft-foundry

microsoft/azure-skills

Build, deploy, evaluate, optimize, fine-tune, and manage Microsoft Foundry agents, models, and resources end to end. USE FOR: foundry, azd ai agent, azd provision/deploy, hosted agent scaffold/develop/run/deploy/troubleshoot, prompt agent create, managed harness agent create, GitHub Copilot harness agent, create agent, update agent, add tool to agent, invoke agent, agent insights, evaluate agent, batch eval, continuous eval, continuous monitoring, agent CI/CD, optimize prompt, improve prompt, optimize agent instructions, Agent Optimizer scaffold, dataset curation from traces, deploy model, model fine-tuning (SFT/DPO/RFT), Foundry project, RBAC, role assignment, permissions, quota, capacity, region, deployment failure, AI Services, create Foundry resource, knowledge index, customize deployment, onboard, availability, training-data, grader, distillation, large file upload. DO NOT USE FOR: Azure Functions, App Service, general Azure deploy (use azure-deploy), general Azure prep (use azure

OfficialDevOps & Cloud579.1K installs

azure-diagnostics

microsoft/azure-skills

Debug Azure production issues on Azure using AppLens, Azure Monitor, resource health, and safe triage. WHEN: debug production issues, troubleshoot app service, app service high CPU, app service deployment failure, troubleshoot container apps, container app 503 or target port mismatch, troubleshoot functions, function telemetry missing or stopped after a config/connection-string change, troubleshoot AKS, VM RDP, Linux SSH, VM black screen, can't connect to VM, reset VM password, NSG or firewall blocking, kubectl cannot connect, kube-system/CoreDNS failures, pod pending, crashloop, node not ready, upgrade failures, analyze logs, KQL, insights, image pull failures, cold start issues, health probe failures, resource health, root cause of errors, troubleshoot event hubs, troubleshoot service bus, messaging SDK error, AMQP connection failure, message lock lost, lock renewal during long-running processing, service bus dead letter.

OfficialDevOps & Cloud569.8K installs

azure-prepare

microsoft/azure-skills

Prepare azd-based Azure projects for deployment: generates azure.yaml, infrastructure (Bicep/Terraform), and Dockerfiles for the Azure Developer CLI (azd) workflow. USE ONLY when the user explicitly wants to use azd as the deployment tool, or the project already has an azure.yaml file. DO NOT USE FOR: non-azd deployments, Python App Service code-only deploys (use python-appservice-deploy), or cross-cloud migration (use azure-cloud-migrate). WHEN: prepare app for azd, create azure.yaml, set up azd infrastructure, modernize app for Azure with azd, deploy with azd, function app, timer trigger, service bus trigger, event-driven function, managed identity, generate Bicep, generate Terraform, create and deploy to Azure.

OfficialDevOps & Cloud569K installs

azure-ai

microsoft/azure-skills

Use for Azure AI: Search, Speech, OpenAI, Document Intelligence. Helps with search, vector/hybrid search, speech-to-text, text-to-speech, transcription, OCR. WHEN: AI Search, query search, vector search, hybrid search, semantic search, speech-to-text, text-to-speech, transcribe, OCR, convert text to speech.

OfficialDevOps & Cloud568.8K installs

azure-deploy

microsoft/azure-skills

Execute Azure deployments for ALREADY-PREPARED applications that have existing .azure/deployment-plan.md and infrastructure files. DO NOT use this skill when the user asks to CREATE a new application — use azure-prepare instead. This skill runs azd up, azd deploy, terraform apply, and az deployment commands with built-in error recovery. Requires .azure/deployment-plan.md from azure-prepare and validated status from azure-validate. WHEN: "run azd up", "run azd deploy", "execute deployment", "push to production", "push to cloud", "go live", "ship it", "bicep deploy", "terraform apply", "publish to Azure", "launch on Azure". DO NOT USE WHEN: "create and deploy", "build and deploy", "create a new app", "set up infrastructure", "create and deploy to Azure using Terraform" — use azure-prepare for these.

OfficialDevOps & Cloud568.6K installs

azure-validate

microsoft/azure-skills

Pre-deployment validation for Azure readiness. Run deep checks on configuration, infrastructure (Bicep or Terraform), RBAC role assignments, managed identity permissions, and prerequisites before deploying. WHEN: validate my app, check deployment readiness, run preflight checks, verify configuration, check if ready to deploy, validate azure.yaml, validate Bicep, test before deploying, troubleshoot deployment errors, validate Azure Functions, validate function app, validate serverless deployment, verify RBAC roles, check role assignments, review managed identity permissions, what-if analysis, validate Container Apps deployment.

OfficialDevOps & Cloud568K installs

slidev-deployment

Install

Install

Describe the task

Review the result

SKILL.md

Deploying Slidev Presentations

When to Use This Skill

Building for Production

Build Command

Output

Build Options

GitHub Pages

Method 1: GitHub Actions (Recommended)

Method 2: gh-pages Branch

Netlify

Method 1: Netlify UI

Method 2: netlify.toml

Custom Domain

Vercel

Method 1: Vercel CLI

Method 2: vercel.json

Automatic Deployment

Cloudflare Pages

Setup

wrangler.toml (Optional)

Docker

Dockerfile

nginx.conf

Build and Run

Docker Compose

Self-Hosted (Static Server)

Using serve

Using http-server

Using Python

Base Path Configuration

For Subdirectories

Root Path

Security Considerations

Excluding Presenter Notes

Password Protection

No Remote Control in Build

Environment Variables

In Build

Platform-Specific

Custom Domain Setup

DNS Configuration

SSL/HTTPS

CI/CD Workflows

GitHub Actions (Full Example)

Troubleshooting

Build Fails

Assets Not Loading

Fonts Missing

Blank Page After Deploy

Best Practices

Output Format

FAQ

More from yoanbernabeu/slidev-skills

Popular devops & cloud skills