Static Hosting

Build Single Page Applications (SPA)

You can build the slides into a self-hostable SPA:

$ slidev build

The generated application will be available under dist/.

You can test the generated build using a web server (Apache, NGINX, Caddy...etc.) or in the project you can directly run: npx vite preview.

Then you can host it on GitHub Pages, Netlify, Vercel, or whatever other web server or service that you want. Now you can share your slides with the rest of the world with a single link.

Base Path

To deploy your slides under sub-routes, you will 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.

Provide a Downloadable PDF

You can provide a downloadable PDF to the viewers of your SPA with the following config:

---
download: true
---

Slidev will generate a PDF file along with the build, and a download button will be displayed in the SPA.

You can also provide a custom URL for the PDF. In that case, the rendering process will be skipped.

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

This can also be done with the CLI option --download (boolean only).

$ slidev build --download

When using the download option, you can also provide the export options:

• By using CLI export options
• Or frontmatter export options

Output directory

You can change the output directory using --out.

$ slidev build --out my-build-folder

Watch mode

By passing the --watch option the build will run in watch mode and will rebuild anytime the source changes.

$ slidev build --watch

Multiple entries

You can build multiple slide decks at once.

$ slidev build slides1.md slides2.md

Or

$ slidev build *.md

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

Examples

Here are a few examples of the exported SPA:

• Starter Template
• Composable Vue by Anthony Fu

For more, check out Showcases.

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.

Netlify

• Netlify

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

[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

• Vercel

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

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

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

GitHub Pages

• GitHub Pages

To deploy your slides on GitHub Pages:

• upload all the files of the project in your repo (i.e. named name_of_repo)
• create .github/workflows/deploy.yml with the following content to deploy your slides to GitHub Pages via GitHub Actions.

name: Deploy pages

on:
  workflow_dispatch: {}
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest

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

    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}

    steps:
      - uses: actions/checkout@v4

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

      - name: Install dependencies
        run: npm install

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

      - uses: actions/configure-pages@v4

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

      - name: Deploy
        id: deployment
        uses: actions/deploy-pages@v4

• In your repository, go to Settings>Pages. Under "Build and deployment", select "GitHub Actions".
• Finally, after all workflows are executed, a link to the slides should appear under Settings>Pages.