Building and Hosting

Slidev is designed to run as a web server when you are editing or presenting your slides. However, after the presentation, you may still want to share your interactive slides with others. This guide will show you how to build and host your slides.

Build as a SPA {#spa}

You can build the slides into a static Single-page application (SPA) via the following command:

$ slidev build

By default, the generated files are placed in the dist folder. You can test the built version of you slides by running: npx vite preview or any other static server.

Base Path {#base}

To deploy your slides under sub-routes, you need to pass the --base option. The --base path must begin and end with a slash /. For example:

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

Refer to Vite's documentation for more details.

Output directory {#output-directory}

You can change the output directory using --out.

$ slidev build --out my-build-folder

Remove speaker notes {#without-notes}

If you are sharing the built slides publicly and don't want to include your speaker notes, run the build with --without-notes:

$ slidev build --without-notes

Multiple Builds {#multiple-builds}

You can build multiple slide decks in one go by passing multiple markdown files as arguments:

$ slidev build slides1.md slides2.md

Or if your shell supports it, you can use a glob pattern:

$ slidev build *.md

In this case, each input file will generate a folder containing the build in the output directory.

Examples {#examples}

Here are a few examples of the exported SPA:

• Demo Slides
• Composable Vue by Anthony Fu
• More in Showcases

Options {#options}

Hosting {#hosting}

We recommend using npm init slidev@latest to scaffold your project, which contains the necessary configuration files for hosting services out-of-the-box.

GitHub Pages {#github-pages}

To deploy your slides on GitHub Pages via GitHub Actions, follow these steps:

1. In your repository, go to Settings > Pages. Under Build and deployment, select GitHub Actions. (Do not choose Deploy from a branch and upload the dist directory, which is not recommended.)
2. Create .github/workflows/deploy.yml with the following content to deploy your slides to GitHub Pages via GitHub Actions.

::: details deploy.yml

name: Deploy pages

on:
  workflow_dispatch:
  push:
    branches: [main, master]

permissions:
  contents: read

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:
    permissions:
      pages: write
      id-token: write
    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

:::

3. Commit and push the changes to your repository. The GitHub Actions workflow will automatically deploy your slides to GitHub Pages every time you push to the main branch.
4. You can access your slides at https://<username>.github.io/<repository-name>/.

Netlify

Create netlify.toml in your project root with the following content:

::: details netlify.toml

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

[build.environment]
NODE_VERSION = '20'

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

:::

Then go to your Netlify dashboard and create a new site with the repository.

Vercel

Create vercel.json in your project root with the following content:

::: details vercel.json

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

:::

Then go to your Vercel dashboard and create a new site with the repository.

Zephyr Cloud {#zephyr-cloud}

To deploy your Slidev deck on Zephyr Cloud, you can add Zephyr support to an existing Slidev project with:

npx with-zephyr@latest

This codemod detects your bundler (Slidev uses Vite) and updates your config for Zephyr Cloud.

After setup, run your normal build command, for example:

npm run build

When the build runs with Zephyr enabled, your app is deployed and Zephyr Cloud returns a preview URL.

::: info Zephyr Cloud is a bit different from most hosting providers: every build run triggers a deployment. :::

Host on Docker {#docker}

If you need a rapid way to run a presentation with containers, you can use the prebuilt docker image maintained by tangramor, or build your own.

::: details Use the Docker Image

Just run the following command in your work folder:

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: You can use NPM_MIRROR to specify a npm mirror to speed up the installation process.

If your work folder is empty, it will generate a template slides.md and other related files under your work folder, and launch the server on port 3030.

You can access your slides from http://localhost:3030/

To create an Docker Image for your slides, you can use the following Dockerfile:

FROM tangramor/slidev:latest

ADD . /slidev

Create the docker image: docker build -t myslides .

And run the container: docker run --name myslides --rm --user node -p 3030:3030 myslides

You can visit your slides at http://localhost:3030/

:::