静态部署
构建单页应用(SPA)
你还可以将幻灯片构建成可部署的单页应用(SPA):
$ slidev build
生成的应用程序会保存在 dist/
目录下,然后你可以将该目录部署在 GitHub Pages,Netlify,Vercel,等你想部署的任何地方。接着,就可以将你幻灯片的链接分享给任何人。
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
.
配置基础路径
如果你需要将幻灯片部署在网站的子路由下,你可以使用 --base
选项来进行修改。The --base
path must begin and end with a slash /
; for example:
$ slidev build --base /talks/my-cool-talk/
欲了解更多,请参阅 Vite 的文档。
提供可下载的 PDF
你可以向浏览幻灯片单页应用的观众提供一个可下载的 PDF。你可以通过如下配置来启用它:
---
download: true
---
配置好后,Slidev 将生成一个 PDF 文件,并在单页应用中展示下载按钮。
你也可以为 PDF 提供一个自定义的 URL。在这种情况下,PDF 的渲染过程将被忽略。
---
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 also build multiple slides at once.
$ slidev build slides1.md slides1.md
Or
$ slidev build *.md
In this case, each input file will generate a folder containing the build in the output directory.
示例
下面是几个导出为单页应用的示例:
欲了解更多,请参阅 Showcases。
部署
我们建议使用 npm init slidev@latest
来为你初始化你的项目,它包含了部署服务开箱即用的配置文件。
Netlify
在你项目的根目录创建 netlify.toml
文件,其内容如下:
[build]
publish = 'dist'
command = 'npm run build'
[build.environment]
NODE_VERSION = '20'
[[redirects]]
from = '/*'
to = '/index.html'
status = 200
接着,去 Netlify 的仪表盘,选择对应仓库并创建新的站点。
Vercel
在你项目的根目录创建 vercel.json
文件,其内容如下:
{
"rewrites": [
{ "source": "/(.*)", "destination": "/index.html" }
]
}
接着,去 Vercel 的仪表盘,选择对应仓库并创建新的站点。
GitHub Pages
将你的幻灯片部署到 GitHub Pages:
- 上传你的仓库里该项目的全部文件(例如,名字为
name_of_repo
) - 创建
.github/workflows/deploy.yml
文件,并包含如下内容。然后通过 Github Action 将你的幻灯片部署到 Github Pages。在该文件中,用name_of_repo
替换<name_of_repo>
。
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 /<name_of_repo>/
- uses: actions/configure-pages@v4
- uses: actions/upload-pages-artifact@v3
with:
path: dist
- name: Deploy
id: deployment
uses: actions/deploy-pages@v4
- 在你的仓库里,选择 “Settings > Pages”。在 “Build and deployment” 下,选择 “Deploy from a branch”,选择 “gh-pages” 和 “root”,点击保存。
- 最终,在全部工作流执行之后,在 “Settings > Pages” 下会出现幻灯片的链接。