slidev-deployment

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Deploying Slidev Presentations

部署Slidev演示文稿

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

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

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

通过URL分享演示文稿
为会议/活动托管演示文稿
创建演示文稿永久存档
为演示文稿配置CI/CD
在网站中嵌入演示文稿

Building for Production

生产环境构建

Build Command

构建命令

bash

npx slidev build

Or via npm script:

bash

npm run build

bash

npx slidev build

或通过npm脚本执行：

bash

npm run build

Output

构建输出

Creates

dist/

directory containing:

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

生成包含以下内容的

dist/

```
index.html
```
JavaScript 包
CSS 文件
资源文件

Build Options

构建选项

bash

undefined

bash

undefined

Custom output directory

自定义输出目录

npx slidev build --out public

With base path (for subdirectories)

设置基础路径（适用于子目录）

npx slidev build --base /presentations/my-talk/

Enable PDF download

启用PDF下载功能

npx slidev build --download

Exclude presenter notes (security)

排除演示者备注（安全考量）

npx slidev build --without-notes

undefined

npx slidev build --without-notes

undefined

GitHub Pages

Method 1: GitHub Actions (Recommended)

方法1：GitHub Actions（推荐）

Enable GitHub Pages:
- Go to Settings → Pages
- Source: GitHub Actions
Create workflow file
```
.github/workflows/deploy.yml
```
:

yaml

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>/
```

启用GitHub Pages:
- 进入仓库的Settings → Pages
- 源选择：GitHub Actions
创建工作流文件
```
.github/workflows/deploy.yml
```
:

yaml

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

推送代码触发部署
访问地址：
```
https://<username>.github.io/<repo>/
```

Method 2: gh-pages Branch

方法2：gh-pages分支

bash

npm install -D gh-pages

Add to

package.json

json

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

Then:

bash

npm run deploy

bash

npm install -D gh-pages

在

package.json

中添加脚本：

json

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

然后执行：

bash

npm run deploy

Netlify

Method 1: Netlify UI

方法1：Netlify控制台

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

将代码推送到GitHub/GitLab
在Netlify控制台中关联仓库
配置：
- 构建命令：
```
npm run build
```
- 发布目录：
```
dist
```

Method 2: netlify.toml

方法2：netlify.toml配置文件

Create

netlify.toml

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.

创建

netlify.toml

文件：

toml

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

[build.environment]
  NODE_VERSION = "20"

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

推送代码后Netlify会自动部署。

Custom Domain

自定义域名

In Netlify dashboard:

Domain settings
Add custom domain
Configure DNS

在Netlify控制台中：

进入域名设置
添加自定义域名
配置DNS解析

Vercel

Method 1: Vercel CLI

方法1：Vercel CLI

bash

npm install -g vercel
vercel

bash

npm install -g vercel
vercel

Method 2: vercel.json

方法2：vercel.json配置文件

Create

vercel.json

json

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

创建

vercel.json

文件：

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

在Vercel控制台中导入项目
关联GitHub仓库
Vercel会自动检测并完成部署

Cloudflare Pages

Setup

配置步骤

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

在Cloudflare Pages中关联仓库
配置：
- 构建命令：
```
npm run build
```
- 输出目录：
```
dist
```
开始部署

wrangler.toml (Optional)

wrangler.toml（可选）

toml

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

[site]
bucket = "./dist"

toml

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

[site]
bucket = "./dist"

Docker

Dockerfile

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;"]

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

nginx

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;
        }
    }
}

nginx

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

构建与运行

bash

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

bash

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

Docker Compose

yaml

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

yaml

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

Self-Hosted (Static Server)

自托管（静态服务器）

Using serve

使用serve

bash

npm install -g serve
npm run build
serve dist

bash

npm install -g serve
npm run build
serve dist

Using http-server

使用http-server

bash

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

bash

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

Using Python

使用Python

bash

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

bash

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

Base Path Configuration

基础路径配置

For Subdirectories

子目录部署

If hosting at

https://example.com/slides/

bash

npx slidev build --base /slides/

Or in frontmatter:

yaml

---
base: /slides/
---

如果托管在

https://example.com/slides/

：

bash

npx slidev build --base /slides/

或在幻灯片前置元数据中配置：

yaml

---
base: /slides/
---

Root Path

根路径部署

If hosting at root

https://example.com/

bash

npx slidev build --base /

如果托管在根路径

https://example.com/

：

bash

npx slidev build --base /

Security Considerations

安全考量

Excluding Presenter Notes

排除演示者备注

bash

npx slidev build --without-notes

Removes speaker notes from built version.

bash

npx slidev build --without-notes

该命令会从构建产物中移除演示者备注。

Password Protection

密码保护

For private presentations:

Netlify: Use Netlify Identity or password protection feature.

Vercel: Use Vercel Authentication.

Custom: Add basic auth in server config.

针对私有演示文稿：

Netlify: 使用Netlify Identity或内置的密码保护功能。

Vercel: 使用Vercel Authentication。

自定义服务器: 在服务器配置中添加基础认证。

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:

vue

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

创建

.env

文件：

VITE_API_URL=https://api.example.com

在幻灯片中访问：

vue

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

Platform-Specific

平台特定配置

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

在各平台控制台中设置（Netlify、Vercel等）。

Custom Domain Setup

自定义域名配置

DNS Configuration

DNS解析配置

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

类型	名称	值
CNAME	www	平台子域名
A	@	平台IP地址

SSL/HTTPS

Most platforms provide free SSL:

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

大多数平台提供免费SSL证书：

Netlify：自动配置
Vercel：自动配置
Cloudflare：自动配置
GitHub Pages：自动配置

CI/CD Workflows

CI/CD工作流

GitHub Actions (Full Example)

GitHub Actions（完整示例）

yaml

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

yaml

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
        # 添加你的部署步骤

Troubleshooting

故障排除

Build Fails

构建失败

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

检查Node版本（需≥18）
清理node_modules：
```
rm -rf node_modules && npm install
```
检查幻灯片中的语法错误

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

使用Web字体
检查样式中的字体加载配置

Blank Page After Deploy

部署后页面空白

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

检查浏览器控制台的错误信息
验证SPA路由配置
确保基础路径与访问URL匹配

Best Practices

最佳实践

Test Build Locally:
bash
```
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

本地测试构建：
bash
```
npm run build && npx serve dist
```
使用CI/CD：自动化部署流程
版本化部署：使用Git标签标记版本
监控性能：检查页面加载时间
保持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

部署完成后可按以下格式记录：

平台: [GitHub Pages | Netlify | Vercel | Docker]

构建命令:
npm run build --base [路径]

配置文件:
- [配置文件名及内容]

部署URL:
https://[你的域名]/[路径]/

检查清单:
- [ ] 本地构建成功
- [ ] 资源加载正常
- [ ] 基础路径配置正确
- [ ] SSL/HTTPS已启用
- [ ] （可选）自定义域名已配置
- [ ] （可选）已设置密码保护