Static Hosting | Slidev
source link: https://sli.dev/guide/hosting.html#github-pages
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
# Static Hosting
# Build Single Page Applications (SPA)
You can also build the slides into a self-hostable SPA:
$ slidev build
The generated application will be available under dist/
and then you can host it on GitHub Pages, Netlify, Vercel, or whatever 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. For example:
$ slidev build --base /talks/my-cool-talk/
Refer to Vite's documentation for more details.
# Provide 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 to the PDF. In that case, the rendering process will be skipped.
---
download: 'https://myside.com/my-talk.pdf'
---
# Examples
Here are a few examples of the exported SPA:
For more, check out Showcases.
# Hosting
We recommend to use npm init slidev@lastest
to scaffolding your project, which contains the necessary configuration files for hosting services out-of-box.
# Netlify
Create netlify.toml
in your project root with the following content.
[build.environment]
NODE_VERSION = "14"
[build]
publish = "dist"
command = "npm run build"
[[redirects]]
from = "/*"
to = "/index.html"
status = 200
Then go to your Netlify dashboard, create new site with the repository.
# Vercel
Create vercel.json
in your project root with the following content.
{
"rewrites": [
{ "source": "/(.*)", "destination": "/index.html" }
]
}
Then go to your Vercel dashboard, create new site with the repository.
# GitHub Pages
Create .github/workflows/deploy.yml
with following content to deploy your slides to GitHub Pages via GitHub Actions.
name: Deploy pages
on: push
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v2
with:
node-version: '14'
- name: Install dependencies
run: npm install
- name: Build
run: npm run build
- name: Deploy pages
uses: crazy-max/ghaction-github-pages@v2
with:
build_dir: dist
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK