From slidev-complete
Deploys Slidev presentations as static sites to GitHub Pages via Actions/gh-pages, Netlify via UI/netlify.toml, Vercel, and Docker. Includes build options and CI/CD workflows.
npx claudepluginhub yoanbernabeu/slidev-skills --plugin slidev-getting-startedThis skill uses the workspace's default tool permissions.
This skill covers deploying Slidev presentations as static websites to various hosting platforms, making your presentations accessible online.
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Checks Next.js compilation errors using a running Turbopack dev server after code edits. Fixes actionable issues before reporting complete. Replaces `next build`.
This skill covers deploying Slidev presentations as static websites to various hosting platforms, making your presentations accessible online.
npx slidev build
Or via npm script:
npm run build
Creates dist/ directory containing:
index.html# 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
Enable GitHub Pages:
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>/
npm install -D gh-pages
Add to package.json:
{
"scripts": {
"deploy": "slidev build --base /repo-name/ && gh-pages -d dist"
}
}
Then:
npm run deploy
npm run builddistCreate 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.
In Netlify dashboard:
npm install -g vercel
vercel
Create vercel.json:
{
"buildCommand": "npm run build",
"outputDirectory": "dist",
"framework": null,
"rewrites": [
{ "source": "/(.*)", "destination": "/index.html" }
]
}
npm run builddistname = "my-presentation"
compatibility_date = "2024-01-01"
[site]
bucket = "./dist"
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;"]
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;
}
}
}
docker build -t my-presentation .
docker run -p 8080:80 my-presentation
version: '3.8'
services:
presentation:
build: .
ports:
- "8080:80"
restart: unless-stopped
npm install -g serve
npm run build
serve dist
npm install -g http-server
npm run build
http-server dist
npm run build
cd dist
python -m http.server 8080
If hosting at https://example.com/slides/:
npx slidev build --base /slides/
Or in frontmatter:
---
base: /slides/
---
If hosting at root https://example.com/:
npx slidev build --base /
npx slidev build --without-notes
Removes speaker notes from built version.
For private presentations:
Netlify: Use Netlify Identity or password protection feature.
Vercel: Use Vercel Authentication.
Custom: Add basic auth in server config.
Built presentations don't include remote control by default.
Create .env:
VITE_API_URL=https://api.example.com
Access in slides:
<script setup>
const apiUrl = import.meta.env.VITE_API_URL
</script>
Set in platform dashboards (Netlify, Vercel, etc.)
| Type | Name | Value |
|---|---|---|
| CNAME | www | platform-subdomain |
| A | @ | Platform IP |
Most platforms provide free SSL:
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
rm -rf node_modules && npm install/ prefix for public/)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
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