| 1 | --- |
| 2 | outline: deep |
| 3 | --- |
| 4 | |
| 5 | # Building and Hosting |
| 6 | |
| 7 | 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. |
| 8 | |
| 9 | ## Build as a SPA {#spa} |
| 10 | |
| 11 | You can build the slides into a static [Single-page application (SPA)](https://developer.mozilla.org/en-US/docs/Glossary/SPA) via the following command: |
| 12 | |
| 13 | ```bash |
| 14 | $ slidev build |
| 15 | ``` |
| 16 | |
| 17 | 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. |
| 18 | |
| 19 | ### Base Path {#base} |
| 20 | |
| 21 | 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: |
| 22 | |
| 23 | ```bash |
| 24 | $ slidev build --base /talks/my-cool-talk/ |
| 25 | ``` |
| 26 | |
| 27 | Refer to [Vite's documentation](https://vitejs.dev/guide/build.html#public-base-path) for more details. |
| 28 | |
| 29 | ### Output directory {#output-directory} |
| 30 | |
| 31 | You can change the output directory using `--out`. |
| 32 | |
| 33 | ```bash |
| 34 | $ slidev build --out my-build-folder |
| 35 | ``` |
| 36 | |
| 37 | ### Remove speaker notes {#without-notes} |
| 38 | |
| 39 | If you are sharing the built slides publicly and don't want to include your speaker notes, run the build with `--without-notes`: |
| 40 | |
| 41 | ```bash |
| 42 | $ slidev build --without-notes |
| 43 | ``` |
| 44 | |
| 45 | ### Multiple Builds {#multiple-builds} |
| 46 | |
| 47 | You can build multiple slide decks in one go by passing multiple markdown files as arguments: |
| 48 | |
| 49 | ```bash |
| 50 | $ slidev build slides1.md slides2.md |
| 51 | ``` |
| 52 | |
| 53 | Or if your shell supports it, you can use a glob pattern: |
| 54 | |
| 55 | ```bash |
| 56 | $ slidev build *.md |
| 57 | ``` |
| 58 | |
| 59 | In this case, each input file will generate a folder containing the build in the output directory. |
| 60 | |
| 61 | ### Examples {#examples} |
| 62 | |
| 63 | Here are a few examples of the exported SPA: |
| 64 | |
| 65 | - [Demo Slides](https://sli.dev/demo/starter) |
| 66 | - [Composable Vue](https://talks.antfu.me/2021/composable-vue) by [Anthony Fu](https://github.com/antfu) |
| 67 | - More in [Showcases](../resources/showcases) |
| 68 | |
| 69 | ### Options {#options} |
| 70 | |
| 71 | <LinkCard link="features/build-with-pdf" /> |
| 72 | <LinkCard link="features/bundle-remote-assets" /> |
| 73 | |
| 74 | ## Hosting {#hosting} |
| 75 | |
| 76 | We recommend using `npm init slidev@latest` to scaffold your project, which contains the necessary configuration files for hosting services out-of-the-box. |
| 77 | |
| 78 | ### GitHub Pages {#github-pages} |
| 79 | |
| 80 | To deploy your slides on [GitHub Pages](https://pages.github.com/) via GitHub Actions, follow these steps: |
| 81 | |
| 82 | 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.) Alternatively, the `enablement: true` option in `configure-pages` can auto-enable Pages for you. |
| 83 | 2. Create `.github/workflows/deploy.yml` with the following content to deploy your slides to GitHub Pages via GitHub Actions. |
| 84 | |
| 85 | ::: details deploy.yml |
| 86 | |
| 87 | ```yaml |
| 88 | name: Deploy pages |
| 89 | |
| 90 | on: |
| 91 | workflow_dispatch: |
| 92 | push: |
| 93 | branches: [main, master] |
| 94 | |
| 95 | permissions: |
| 96 | contents: read |
| 97 | pages: write |
| 98 | id-token: write |
| 99 | |
| 100 | concurrency: |
| 101 | group: pages |
| 102 | cancel-in-progress: false |
| 103 | |
| 104 | jobs: |
| 105 | build: |
| 106 | runs-on: ubuntu-latest |
| 107 | |
| 108 | steps: |
| 109 | - uses: actions/checkout@v7 |
| 110 | |
| 111 | - uses: actions/setup-node@v6 |
| 112 | with: |
| 113 | node-version: 'lts/*' |
| 114 | |
| 115 | - name: Setup @antfu/ni |
| 116 | run: npm i -g @antfu/ni |
| 117 | |
| 118 | - name: Install dependencies |
| 119 | run: nci |
| 120 | |
| 121 | - name: Build |
| 122 | run: nr build --base /${{github.event.repository.name}}/ |
| 123 | |
| 124 | - name: Setup Pages |
| 125 | uses: actions/configure-pages@v6 |
| 126 | with: |
| 127 | enablement: true |
| 128 | |
| 129 | - uses: actions/upload-pages-artifact@v5 |
| 130 | with: |
| 131 | path: dist |
| 132 | |
| 133 | deploy: |
| 134 | environment: |
| 135 | name: github-pages |
| 136 | url: ${{ steps.deployment.outputs.page_url }} |
| 137 | needs: build |
| 138 | runs-on: ubuntu-latest |
| 139 | name: Deploy |
| 140 | steps: |
| 141 | - name: Deploy to GitHub Pages |
| 142 | id: deployment |
| 143 | uses: actions/deploy-pages@v5 |
| 144 | ``` |
| 145 | |
| 146 | ::: |
| 147 | |
| 148 | 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. |
| 149 | 4. You can access your slides at `https://<username>.github.io/<repository-name>/`. |
| 150 | |
| 151 | ### Netlify |
| 152 | |
| 153 | Create `netlify.toml` in your project root with the following content: |
| 154 | |
| 155 | ::: details netlify.toml |
| 156 | |
| 157 | ```toml |
| 158 | [build] |
| 159 | publish = 'dist' |
| 160 | command = 'npm run build' |
| 161 | |
| 162 | [build.environment] |
| 163 | NODE_VERSION = '24' |
| 164 | |
| 165 | [[redirects]] |
| 166 | from = '/*' |
| 167 | to = '/index.html' |
| 168 | status = 200 |
| 169 | ``` |
| 170 | |
| 171 | ::: |
| 172 | |
| 173 | Then go to your [Netlify dashboard](https://netlify.com/) and create a new site with the repository. |
| 174 | |
| 175 | ### Vercel |
| 176 | |
| 177 | Create `vercel.json` in your project root with the following content: |
| 178 | |
| 179 | ::: details vercel.json |
| 180 | |
| 181 | ```json |
| 182 | { |
| 183 | "rewrites": [ |
| 184 | { "source": "/(.*)", "destination": "/index.html" } |
| 185 | ] |
| 186 | } |
| 187 | ``` |
| 188 | |
| 189 | ::: |
| 190 | |
| 191 | Then go to your [Vercel dashboard](https://vercel.com/) and create a new site with the repository. |
| 192 | |
| 193 | ### Zephyr Cloud {#zephyr-cloud} |
| 194 | |
| 195 | To deploy your Slidev deck on [Zephyr Cloud](https://zephyr-cloud.io/), you can add Zephyr support to an existing Slidev project with: |
| 196 | |
| 197 | ```bash |
| 198 | npx with-zephyr@latest |
| 199 | ``` |
| 200 | |
| 201 | This codemod detects your bundler (Slidev uses Vite) and updates your config for Zephyr Cloud. |
| 202 | |
| 203 | After setup, run your normal build command, for example: |
| 204 | |
| 205 | ```bash |
| 206 | npm run build |
| 207 | ``` |
| 208 | |
| 209 | When the build runs with Zephyr enabled, your app is deployed and Zephyr Cloud returns a preview URL. |
| 210 | |
| 211 | ::: info |
| 212 | Zephyr Cloud is a bit different from most hosting providers: every `build` run triggers a deployment. |
| 213 | ::: |
| 214 | |
| 215 | ### Host on Docker {#docker} |
| 216 | |
| 217 | If you need a rapid way to run a presentation with containers, you can use the prebuilt [docker image](https://hub.docker.com/r/tangramor/slidev) maintained by [tangramor](https://github.com/tangramor), or build your own. |
| 218 | |
| 219 | ::: details Use the Docker Image |
| 220 | |
| 221 | Just run the following command in your work folder: |
| 222 | |
| 223 | ```bash |
| 224 | docker run --name slidev --rm -it \ |
| 225 | --user node \ |
| 226 | -v ${PWD}:/slidev \ |
| 227 | -p 3030:3030 \ |
| 228 | -e NPM_MIRROR="https://registry.npmmirror.com" \ |
| 229 | tangramor/slidev:latest |
| 230 | ``` |
| 231 | |
| 232 | **_Note_**: You can use `NPM_MIRROR` to specify a npm mirror to speed up the installation process. |
| 233 | |
| 234 | 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`. |
| 235 | |
| 236 | You can access your slides from `http://localhost:3030/` |
| 237 | |
| 238 | To create an Docker Image for your slides, you can use the following Dockerfile: |
| 239 | |
| 240 | ```Dockerfile |
| 241 | FROM tangramor/slidev:latest |
| 242 | |
| 243 | ADD . /slidev |
| 244 | ``` |
| 245 | |
| 246 | Create the docker image: `docker build -t myslides .` |
| 247 | |
| 248 | And run the container: `docker run --name myslides --rm --user node -p 3030:3030 myslides` |
| 249 | |
| 250 | You can visit your slides at `http://localhost:3030/` |
| 251 | |
| 252 | ::: |
| 253 |