Hébergement statique

Créer des applications monopage (SPA)

Vous pouvez également intégrer les diapositives dans une SPA auto-hébergée :

$ slidev build

L'application générée sera disponible sous dist/ et vous pourrez ensuite l'héberger sur Pages GitHub, Netlify, Vercel, ou ce que vous voulez. Vous pouvez maintenant partager vos diapositives avec le reste du monde avec un seul lien.

Chemin de base

Pour déployer vos slides sous des sous-routes, vous devrez passer l'option --base. Par exemple :

$ slidev build --base /talks/my-cool-talk/

Reportez-vous à la documentation de Vite pour plus de détails.

Fournir un PDF téléchargeable

Vous pouvez fournir un PDF téléchargeable aux spectateurs de votre SPA avec la configuration suivante :

---
download: true
---

Slidev générera un fichier pdf avec la construction et un bouton de téléchargement sera affiché dans le SPA.

Vous pouvez également fournir une URL personnalisée au PDF. Dans ce cas, le processus de rendu sera ignoré.

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

Exemples

Voici quelques exemples de SPA exportées :

Pour en savoir plus, consultez Showcases.

Hébergement

Nous vous recommandons d'utiliser npm init slidev@lastest pour échafauder votre projet, qui contient les fichiers de configuration nécessaires pour héberger les services prêts à l'emploi.

Netlify

Créez netlify.toml dans la racine de votre projet avec le contenu suivant.

[build.environment]
  NODE_VERSION = "14"

[build]
  publish = "dist"
  command = "npm run build"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Ensuite, accédez à votre tableau de bord Netlify, créez un nouveau site avec le repositorie.

Vercel

Créez vercel.json dans la racine de votre projet avec le contenu suivant.

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

Accédez ensuite à votre tableau de bord Vercel, créez un nouveau site avec le repositorie.

GitHub Pages

Créez .github/workflows/deploy.yml avec le contenu suivant pour déployer vos diapositives sur les pages GitHub via les actions GitHub.

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 }}