Menú
Deploy Slidev presentations to the web. Use this skill for GitHub Pages, Netlify, Vercel, and Docker deployments.
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional SOC
| name | slidev-deployment |
| description | Deploy Slidev presentations to the web. Use this skill for GitHub Pages, Netlify, Vercel, and Docker deployments. |
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
Master v-click and sequential animations in Slidev. Use this skill to reveal content progressively and create engaging presentations.
Add smooth slide transitions in Slidev. Use this skill for fade, slide, and custom transitions between slides.
Create beautiful code blocks with Shiki syntax highlighting. Use this skill for code snippets, line highlighting, and code groups.
Animate code transformations with Shiki Magic Move. Use this skill to create smooth morphing transitions between code states.
Add live coding with Monaco Editor in Slidev. Use this skill for interactive code demos, executable code, and real-time editing.
Leverage Vue components in Slidev slides. Use this skill to add interactivity with built-in components or create custom ones.