Instalación

Plantilla de inicio

Slidev requiere Node.js >=14.0

La mejor manera de empezar es utilizando nuestra plantilla oficial de inicio.

Con NPM:

$ npm init slidev@latest

Con Yarn:

$ yarn create slidev

Sigue las indicaciones y se abrirá la presentación en http://localhost:3030/ automáticamente para ti.

También contiene la configuración básica y una breve demostración con instrucciones sobre cómo empezar a utilizar Slidev.

Instalación manual

Si todavía prefieres instalar Slidev manualmente o quieres integrarlo en tus proyectos existentes, puedes hacer lo siguiente:

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

Por favor, nótese que si usas pnpm, necesitarás activar la opción de 'shamefully-hoist' para que Slidev funcione correctamente:

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

Instalación global

Available since v0.14

Puedes instalar Slidev globalmente con el siguiente comando:

$ npm i -g @slidev/cli

Y luego usar slidev donde desees sin que tengas que crear un proyecto cada vez.

$ slidev

Este comando también intentará utilizar el @slidev/cli local si se ha encontrado en node_modules.

Instalación en Docker

Si necesitas una forma rápida de ejecutar una presentación con contenedores, puedes utilizar la imagen de Docker preconstruida y mantenida por tangramor, o construir la tuya propia.

Simplemente ejecuta el siguiente comando en tu carpeta de trabajo:

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

Si tu carpeta de trabajo está vacía, generará una plantilla de slides.md y otros archivos relacionados en tu carpeta de trabajo, y lanzará el servidor en el puerto 3030.

Puedes acceder a tus diapositivas desde http://localhost:3030/

Construir una imagen desplegable

O puedes crear tu propio proyecto de Slidev en Docker con Dockerfile:

FROM tangramor/slidev:latest

ADD . /slidev

Crea la imagen de Docker: docker build -t mippt .

Y ejecuta el contenedor: docker run --name misdiapos --rm --user node -p 3030:3030 mippt

Puedes visitar tus diapositivas desde http://localhost:3030/

Constuir una SPA alojable (Single Page Application)

Ejecuta el comando docker exec -i slidev npx slidev build en el contenedor de slidev en ejcución. Generará archivos HTML estáticos en la carpeta dist.

Alojar en Github Pages

Puedes alojar dist en un sitio web estático como Github Pages o Gitlab Pages.

Debido a que en las páginas de Github la URL puede contener subcarpetas, tienes que modificar el index.html generado y cambiar href="/assets/xxx por href="./assets/xxx. O puedes utilizar la opción --base=/<subcarpeta>/ durante el proceso de construcción, como por ejemplo docker exec -i slidev npx slidev build --base=/slidev_docker/.

Y para evitar el proceso de construcción de Jekyll, es necesario añadir un archivo vacío denominado .nojekyll.

Alojamiento con Docker

También puedes alojarlo por tu cuenta con Docker:

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

O crea una imagen estática con el siguiente Dockerfile:

FROM nginx:alpine

COPY dist /usr/share/nginx/html

Crea la imagen de Docker: docker build -t mystaticppt .

Y ejecuta el contendor: docker run --name myslides --rm -p 80:80 mystaticppt

Puedes acceder a tus diapositivas desde http://localhost/

Echa un vistazo a tangramor/slidev_docker para más detalles.