5

Static Hosting | Slidev

 2 years ago
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 }}

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK