Slidev

Statisches Hosting

Erstellen von Single Page Applications (SPA)

Man kann Slidev Präsentation als selbst-hostbare SPA exportieren:

$ slidev build

Die erstellte SPA ist im dist/ Ordner verfügbar und kann mit GitHub Pages, Netlify, Vercel oder mit was auch immer man will gehostet werden. Nun kann man seine Präsentation mit nur einem link mit der ganzen Welt teilen.

Basispfad

Wenn Präsentationen auf sub-Routen bereit gestellt werden soll, kann eine --base Option übergeben werden. Zum Beispiel:

$ slidev build --base /slides/mein-toller-vortrag/

Weitere Einzelheiten sind in Vite's Dokumentation zu finden.

Herunterladbare PDF

Man kann herunterladbare PDFs für Zuschauer der SPA mit der folgenden Konfiguration bereitstellen:

---
download: true
---

Slidev generiert automatisch mit der SPA eine PDF und in der SPA wird ein 'Download' Button angezeigt.

Man kann auch eine eigene PDF zum herunterladen anbieten, in diesem Fall wird das generieren der PDF übersprungen.

---
download: "https://meine-seite.de/vortrag.pdf"
---

Beispiele

Hier sind einige Beispiele für die exportierte SPA:

Mehr ist in den Beispielprojekten zu finden.

Hosting

Wir empfehlen die Verwendung von npm init slidev@lastest, um das Projekt zu erstellen, somit werden die notwendigen Konfigurationsdateien für die Hosting-Dienste direkt mitgeliefert.

Netlify

Erstelle eine netlify.toml im Projektstamm mit folgendem Inhalt:

[build.environment];
NODE_VERSION = "14"

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

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

Gehe dann zu deinem Netlify Dashboard und erstelle eine neue Website mit dem Repository.

Vercel

Erstelle eine vercel.json im Projektstamm mit folgendem Inhalt:

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

Gehe dann zu deinem Vercel Dashboard und erstelle eine neue Seite mit dem Repository.

GitHub Pages

Erstelle eine .github/workflows/deploy.yml im Projektstamm mit folgendem Inhalt um deine Präsentation via Github Actions auf Github Pages bereitzustellen:

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