mcpField
S
slidev-deployment

slidev-deployment

github.com/yoanbernabeu云与 DevOps41198 次安装39 周前更新
代码仓库

关于 slidev-deployment

面向 Slidev 演示文稿作者的部署技能，介绍如何构建静态网站并发布到多种托管平台。内容涵盖平台配置、部署流程和常见问题排查。

主要功能

  1. 01生产构建与输出选项
  2. 02GitHub Pages、Netlify、Vercel 和 Cloudflare Pages 指南
  3. 03Docker 与静态服务器部署
  4. 04基础路径、备注和环境配置
  5. 05CI/CD 设置与部署问题排查

适用场景

  1. 01在线分享演示文稿
  2. 02托管会议演示文稿
  3. 03创建长期演示文稿存档
  4. 04通过 CI/CD 自动部署演示文稿

安装

复制下面的命令，在终端中运行。

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

安装后在 Claude Code 中输入/slidev-deployment确认已加载。

详细介绍

部署 Slidev 演示文稿

本技能介绍如何将 Slidev 演示文稿部署为静态网站到各种托管平台，让演示文稿可以在线访问。

何时使用此技能

  • 通过 URL 分享演示文稿
  • 为会议／活动托管演示文稿
  • 创建永久的演示文稿存档
  • 为演示文稿设置 CI/CD
  • 将演示文稿嵌入网站

构建生产版本

构建命令
npx slidev build

或通过 npm 脚本：

npm run build
输出

创建包含以下内容的 dist/ 目录：

  • index.html
  • JavaScript 包
  • CSS 文件
  • 资源文件
构建选项
# 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

方法 1：GitHub Actions（推荐）

  1. 启用 GitHub Pages：

    • 前往 Settings → Pages
    • Source：GitHub Actions

  2. 创建工作流文件 .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

  1. 推送以触发部署

  2. 访问地址：https://<username>.github.io/<repo>/

方法 2：gh-pages 分支
npm install -D gh-pages

添加到 package.json：

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

然后：

npm run deploy

Netlify

方法 1：Netlify UI
  1. 将代码推送到 GitHub/GitLab
  2. 在 Netlify 控制面板中连接仓库
  3. 配置：
    • 构建命令：npm run build
    • 发布目录：dist
方法 2：netlify.toml

创建 netlify.toml：

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

[build.environment]
  NODE_VERSION = "20"

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

推送后，Netlify 会自动部署。

自定义域名

在 Netlify 控制面板中：

  1. 域名设置
  2. 添加自定义域名
  3. 配置 DNS

Vercel

方法 1：Vercel CLI
npm install -g vercel
vercel
方法 2：vercel.json

创建 vercel.json：

{
  "buildCommand": "npm run build",
  "outputDirectory": "dist",
  "framework": null,
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}
自动部署
  1. 在 Vercel 控制面板中导入项目
  2. 连接 GitHub 仓库
  3. Vercel 会自动检测并部署

Cloudflare Pages

设置
  1. 在 Cloudflare Pages 中连接仓库
  2. 配置：
    • 构建命令：npm run build
    • 输出目录：dist
  3. 部署
wrangler.toml（可选）
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;
        }
    }
}
构建并运行
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

自托管（静态服务）

使用 serve
npm install -g serve
npm run build
serve dist
使用 http-server
npm install -g http-server
npm run build
http-server dist
使用 Python
npm run build
cd dist
python -m http.server 8080

基础路径配置

用于子目录

如果托管在 https://example.com/slides/：

npx slidev build --base /slides/

或在 frontmatter 中：

---
base: /slides/
---
根路径

如果托管在根路径 https://example.com/：

npx slidev build --base /

安全注意事项

排除演讲者备注
npx slidev build --without-notes

从构建版本中移除演讲者备注。

密码保护

对于私有演示文稿：

Netlify： 使用 Netlify Identity 或密码保护功能。

Vercel： 使用 Vercel Authentication。

自定义： 在服务器配置中添加基本身份验证。

构建版本中不包含远程控制

构建后的演示文稿默认不包含远程控制功能。

环境变量

构建时

创建 .env：

VITE_API_URL=https://api.example.com

在幻灯片中访问：

<script setup>
const apiUrl = import.meta.env.VITE_API_URL
</script>
特定平台

在平台控制面板中设置（Netlify、Vercel 等）

自定义域名设置

DNS 配置
类型名称值
CNAMEwwwplatform-subdomain
A@Platform IP
SSL/HTTPS

大多数平台都提供免费 SSL：

  • Netlify：自动
  • Vercel：自动
  • Cloudflare：自动
  • GitHub Pages：自动

CI/CD 工作流

GitHub Actions（完整示例）
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

故障排除

构建失败
  1. 检查 Node 版本（≥18）
  2. 清除 node_modules：rm -rf node_modules && npm install
  3. 检查幻灯片中是否存在语法错误
资源无法加载
  1. 验证基础路径配置
  2. 检查资源路径（public/ 下的资源使用 / 前缀）
  3. 使用正确的基础路径重新构建
缺少字体
  1. 使用 Web 字体
  2. 检查样式中的字体加载情况
部署后页面空白
  1. 检查浏览器控制台中的错误
  2. 验证 SPA 路由配置
  3. 检查基础路径是否与 URL 匹配

最佳实践

  1. 在本地测试构建：

    npm run build && npx serve dist

  2. 使用 CI/CD：自动化部署

  3. 为部署版本添加版本号：使用 git 标签

  4. 监控性能：检查加载时间

  5. 保持 URL 稳定：不要频繁更改路径

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

评论

支持 Markdown