Installation

Starter Vorlage

Slidev erfordert Node.js >=14.0

Der beste Weg, um loszulegen, ist mit unserer offiziellen Starter Vorlage.

Mit NPM:

$ npm init slidev@latest

Mit Yarn:

$ yarn create slidev

Folge den Anweisungen und die Präsentation öffnet sich auf http://localhost:3030/ automatisch.

Die Vorlage beinhaltet eine grundlegende Einrichtung und eine kleine Demo mit einer Anleitung für die ersten Schritte mit Slidev.

Manuell installieren

Wenn man Slidev trotzdem lieber manuell installieren oder mit bereits existierenden Projekten integrieren möchte, kann man auch folgendes tun:

$ npm install @slidev/cli @slidev/theme-default
$ touch slides.md
$ npx slidev

Bitte beachte, dass wir pnpm nutzen. Shamefully-hoist muss aktiviert sein, damit alles problemfrei funktioniert:

echo 'shamefully-hoist=true' >> .npmrc

Global installieren

Verfügbar seit v0.14

Slidev kann mit folgendem Befehl auch global installiert werden:

$ npm i -g @slidev/cli

Danach kann slidev überall genutzt werden ohne, dass jedes mal erst ein Projekt erstellt werden muss.

$ slidev

Dieser Befehl versucht auch die lokale Version @slidev/cli zu nutzen, wenn sie im node_modules Ordner gefunden werden kann.

Auf Docker installieren

Wenn ein schneller Weg benötigt wird, um Präsentationen auch auf Containern zu nutzen, kann das bereits fertige Docker Image verwendet werden, welches von tangramor gemaintained wird. Oder man baut sich sein eigenes Image.

Man muss nur folgenden Befehl im Projektordner ausführen:

docker run --name slidev --rm -it \
    --user node \
    -v ${PWD}:/slidev \
    -p 3030:3030 \
    tangramor/slidev:latest

Wenn dein Projektordner leer ist, wird eine slides.md Vorlage und andere benötigte Dateien generiert und ein Server auf dem Port 3030 gestartet.

Jetzt kannst du deine Präsentation hier finden: http://localhost:3030/

Baue ein deploy-bares Image

Oder du kreierst dein eigenes Projekt in einem Docker Image mit einer Dockerfile:

FROM tangramor/slidev:latest

ADD . /slidev

Baue das Image: docker build -t meinePraesentation .

Und Starte den Container: docker run --name praesentation --rm --user node -p 3030:3030 meinePraesentation

Nun findest du deine Präsentation unter http://localhost:3030/

Baue eine hostbare SPA (Single Page Application)

Führe den Befehl docker exec -i slidev npx slidev build an einem Container aus, in dem slidev läuft. Er wird die statischen HTML Dateien und den distOrdner generieren,

Hosten auf Github Pages

Du kannst den dist Ordner als eine statische Webseite mit Github Pages or Gitlab Pages hosten.

Weil der Github Pages URL eventuell einen Unterordner enthält, muss die generierte index.html angepasst werden. Entweder änderst du href="/assets/xxx zu href="./assets/xxx oder du übergibst eine --base=/<subfolder>/ Option dem Build-Befehl, zum Beispiel: docker exec -i slidev npx slidev build --base=/slidev_docker/.

Damit der Jekyll Bauprozess übersprungen wird, musst du eine leere .nojekyll Datei erstellen.

Mit Docker Hosten

Man kann die Webseite auch selber über Docker hosten:

docker run --name myslides --rm -p 80:80 -v ${PWD}/dist:/usr/share/nginx/html nginx:alpine

Oder baue ein statische Image mit der folgenden Dockerfile:

FROM nginx:alpine

COPY dist /usr/share/nginx/html

Baue das Docker Image: docker build -t mystaticppt .

Und starte de Container: docker run --name myslides --rm -p 80:80 mystaticppt

Deine Webseite findes du hier: http://localhost/

Bei tangramor/slidev_docker findest du mehr Informationen.