编译和部署

Slidev 被设计为在编辑或展示幻灯片时作为 Web 服务器运行。然而，在展示之后，你可能希望与他人分享你的交互式幻灯片。本指南将向你展示如何构建和部署你的幻灯片。

编译为静态网页

你可以通过以下命令将幻灯片构建为静态的单页应用 (SPA)：

bash

$ slidev build

默认情况下，生成的文件会被放在 dist 文件夹中。你可以通过运行 npx vite preview 或任何其他静态服务器来测试你的幻灯片的构建版本。

基础路径

若要将你的幻灯片部署在子目录下，你需要传递 --base 选项。--base 路径必须以斜杠 / 开头和结尾。例如：

bash

$ slidev build --base /talks/my-cool-talk/

参阅 Vite 文档了解更多细节。

输出目录

你可以通过 --out 选项更改输出目录：

bash

$ slidev build --out my-build-folder

多个幻灯片

你可以通过传递多个 Markdown 文件作为参数一次性构建多个幻灯片：

bash

$ slidev build slides1.md slides2.md

或者，如果你的 shell 支持，你可以使用通配符：

bash

$ slidev build *.md

在上例中，每个输入文件将在输出目录中生成一个包含构建的文件夹。

例子

以下是一些导出的 SPA 的例子：

选项

静态部署

我们推荐使用 npm init slidev@latest 来初始化你的项目，它包含了一些常用的部署配置文件。

GitHub Pages

要通过 GitHub Actions 在 GitHub Pages 上部署你的幻灯片，请按照以下步骤操作：

在你的仓库中上传所有项目文件（例如命名为 name_of_repo）。
创建 .github/workflows/deploy.yml 文件，内容如下，以通过 GitHub Actions 将你的幻灯片部署到 GitHub Pages。

deploy.yml

yaml

name: Deploy pages

on:
  workflow_dispatch:
  push:
    branches: [main]

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: pages
  cancel-in-progress: false

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v4

      - uses: actions/setup-node@v4
        with:
          node-version: 'lts/*'

      - name: Setup @antfu/ni
        run: npm i -g @antfu/ni

      - name: Install dependencies
        run: nci

      - name: Build
        run: nr build --base /${{github.event.repository.name}}/

      - name: Setup Pages
        uses: actions/configure-pages@v4

      - uses: actions/upload-pages-artifact@v3
        with:
          path: dist

  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    needs: build
    runs-on: ubuntu-latest
    name: Deploy
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

在你的仓库中，转到 Settings > Pages。在 Build and deployment 下，选择 GitHub Actions。
最后，在工作流执行后，幻灯片的链接应该会出现在 Settings > Pages 下。

Netlify

创建项目根目录下的 netlify.toml 文件，内容如下：

netlify.toml

toml

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

[build.environment]
NODE_VERSION = '20'

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

然后，你可以在 Netlify dashboard 中创建一个新站点，并将仓库与之关联。

Vercel

创建项目根目录下的 vercel.json 文件，内容如下：

vercel.json

json

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

然后，你可以在 Vercel dashboard 中创建一个新站点，并将仓库与之关联。

在 Docker 上部署

如果你需要一个快速的容器运行幻灯片的方式，你可以使用由 tangramor 维护的预构建 Docker Image，或者自己构建一个。

使用 Docker Image

只需在你的工作目录中运行以下命令：

bash

docker run --name slidev --rm -it \
    --user node \
    -v ${PWD}:/slidev \
    -p 3030:3030 \
    -e NPM_MIRROR="https://registry.npmmirror.com" \
    tangramor/slidev:latest

Note: 你可以使用 NPM_MIRROR 来指定一个 npm 镜像以加快安装过程。

如果你的工作目录为空，它将在你的工作目录下生成一个模板 slides.md 和其他相关文件，并在端口 3030 上启动服务器。然后，你可以从 http://localhost:3030/ 访问你的幻灯片。

若要用你的幻灯片创建一个 Docker Image，你可以使用以下 Dockerfile：

Dockerfile

FROM tangramor/slidev:latest

ADD . /slidev

创建 Docker Image：docker build -t myslides .

运行容器：docker run --name myslides --rm --user node -p 3030:3030 myslides

然后，你可以从 http://localhost:3030/ 访问你的幻灯片。

编译和部署 ​

编译为静态网页 ​

基础路径 ​

输出目录 ​

多个幻灯片 ​

例子 ​

选项 ​

静态部署 ​

GitHub Pages ​

Netlify ​

Vercel ​

在 Docker 上部署 ​

编译和部署

编译为静态网页

基础路径

输出目录

多个幻灯片

例子

选项

静态部署

GitHub Pages

Netlify

Vercel

在 Docker 上部署