静态部署 {#static-hosting}

构建单页应用（SPA） {#build-single-page-application-spa}

你还可以将幻灯片构建成可部署的单页应用（SPA）：

  1. $ slidev build

生成的应用程序会保存在 dist/ 目录下，然后你可以将该目录部署在 GitHub Pages，Netlify，Vercel，等你想部署的任何地方。接着，就可以将你幻灯片的链接分享给任何人。

配置基础路径 {#base-path}

如果你需要将幻灯片部署在网站的子路由下，你可以使用 --base 选项来进行修改。例如：

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

欲了解更多，请参阅 Vite 的文档。

提供可下载的 PDF {#provide-downloadable-pdf}

你可以向浏览幻灯片单页应用的观众提供一个可下载的 PDF。你可以通过如下配置来启用它：

  1. ---
  2. download: true
  3. ---

配置好后，Slidev 将生成一个 PDF 文件，并在单页应用中展示下载按钮。

你也可以为 PDF 提供一个自定义的 URL。在这种情况下，PDF 的渲染过程将被忽略。

  1. ---
  2. download: 'https://myside.com/my-talk.pdf'
  3. ---

示例 {#examples}

下面是几个导出为单页应用的示例：

欲了解更多，请参阅 Showcases。

部署

我们建议使用 npm init slidev@lastest 来为你初始化你的项目，它包含了部署服务开箱即用的配置文件。

Netlify

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

  1. [build.environment]
  2.   NODE_VERSION = "14"
  4. [build]
  5.   publish = "dist"
  6.   command = "npm run build"
  8. [[redirects]]
  9.   from = "/*"
  10.   to = "/index.html"
  11.   status = 200

接着，去 Netlify 的仪表盘，选择对应仓库并创建新的站点。

Vercel

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

  1. {
  2.   "rewrites": [
  3.     { "source": "/(.*)", "destination": "/index.html" }
  4.   ]
  5. }

接着，去 Vercel 的仪表盘，选择对应仓库并创建新的站点。

GitHub Pages

创建 .github/workflows/deploy.yml 文件，并包含如下内容。然后通过 Github Action 将你的幻灯片部署到 Github Pages。

  1. name: Deploy pages
  2. on: push
  3. jobs:
  4.   deploy:
  5.     runs-on: ubuntu-latest
  6.     steps:
  7.       - uses: actions/checkout@v2
  8.       - uses: actions/setup-node@v2
  9.         with:
  10.           node-version: '14'
  11.       - name: Install dependencies
  12.         run: npm install
  13.       - name: Build
  14.         run: npm run build
  15.       - name: Deploy pages
  16.         uses: crazy-max/ghaction-github-pages@v2
  17.         with:
  18.           build_dir: dist
  19.         env:
  20.           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}