Slidev Docker image

Work with Slidev. Just run following command in your work folder:

docker run --name slidev --rm -it \
    --user node \
    -v ${PWD}:/slidev \
    -p 3030:3030 \
    -e NPM_MIRROR="https://registry.npmmirror.com" \
    tangramor/slidev:latest

Note: You can use NPM_MIRROR to specify a npm mirror to speed up the installation process.

If your work folder is empty, it will generate a template slides.md and other related files under your work folder, and launch the server on port 3030.

You can access your slides from http://localhost:3030/

Exportable docker image

To support the export feature, there is a bigger docker image with tag playwright. Just run following command in your work folder:

docker run --name slidev --rm -it \
    -v ${PWD}:/slidev \
    -p 3030:3030 \
    -e NPM_MIRROR="https://registry.npmmirror.com" \
    tangramor/slidev:playwright

Then you can use the export feature of Slidev like following under your work folder:

docker exec -i slidev npx slidev export --timeout 2m --output slides.pdf

Build deployable image

Or you can create your own slidev project to a docker image with Dockerfile:

FROM tangramor/slidev:latest

ADD . /slidev

Create the docker image: docker build -t myppt .

And run the container: docker run --name myslides --rm --user node -p 3030:3030 myppt

You can visit your slides from http://localhost:3030/

Build hostable SPA (Single Page Application)

Run command docker exec -i slidev npx slidev build on the running container slidev. It will generate static HTML files under dist folder.

Host on Github Pages

You can host dist in a static web site such as Github Pages or Gitlab Pages.

Because in Github pages the url may contain subfolder, so you need to modify the generated index.html to change href="/assets/xxx to href="./assets/xxx. Or you may use --base=/<subfolder>/ option during the build process, such as: docker exec -i slidev npx slidev build --base=/slidev_docker/.

And to avoid Jekyll build process, you need to add an empty file .nojekyll.

Host by docker

You can also host it by yourself with docker:

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

Or create a static image with following Dockerfile:

FROM nginx:alpine

COPY dist /usr/share/nginx/html

Create the docker image: docker build -t mystaticppt .

And run the container: docker run --name myslides --rm -p 80:80 mystaticppt

You can visit your slides from http://localhost/

中文说明

如果你需要快速的在容器上部署你的演示文稿，你可以使用由 tangramor 维护的预构建 docker 镜像，或者自行构建。

在你的工作目录下运行下面的命令：

docker run --name slidev --rm -it \
    --user node \
    -v ${PWD}:/slidev \
    -p 3030:3030 \
    -e NPM_MIRROR="https://registry.npmmirror.com" \
    tangramor/slidev:latest

注意：你可以用 NPM_MIRROR 环境变量来指定一个 npm 镜像以加速安装过程。

如果你的工作目录为空，容器会在目录下自动创建 slides.md 文件和其它相关文件，并基于 3030 端口启动 slidev 服务。

你可以通过 http://localhost:3030/ 访问你的幻灯片。

支持导出功能的镜像

为了支持 Slidev 的导出功能，我还提供了另一个更大的镜像，带有 playwright 标签。在你的工作目录下运行下面的命令：

docker run --name slidev --rm -it \
    -v ${PWD}:/slidev \
    -p 3030:3030 \
    -e NPM_MIRROR="https://registry.npmmirror.com" \
    tangramor/slidev:playwright

然后你可以你的工作目录下像这样使用 Slidev 的导出功能：

docker exec -i slidev npx slidev export --timeout 2m --output slides.pdf

构建可部署镜像

你也可以把你的 slidev 幻灯片构建到一个 docker 镜像里来进行部署，Dockerfile 如下：

FROM tangramor/slidev:latest

ADD . /slidev

使用命令 docker build -t myppt . 来构建镜像。

执行 docker run --name myslides --rm --user node -p 3030:3030 myppt 命令来运行镜像。

这时你就可用通过 http://localhost:3030/ 来打开你的幻灯片了。

构建单网页应用

在前面启动的 slidev 容器上运行命令 docker exec -i slidev npx slidev build 就可以在 dist 目录下将你的幻灯片生成静态 HTML 文件。

使用 Github Pages 托管

你可以在静态 Web 站点上托管生成的静态文件，比如 Github pages 或 Gitlab pages。

由于 Github pages 的 URL 可能包含二级目录，所以你需要修改生成的 index.html，把 href="/assets/xxx 改为 href="./assets/xxx （即使用相对路径）。或者你可以用 vite 的 --base=/<subfolder>/ 选项来指定二级目录，例如： docker exec -i slidev npx slidev build --base=/slidev_docker/。

为了防止触发 Jekyll 构建流程，你需要在静态站根目录下添加一个名为 .nojekyll 的空文件

使用 docker 托管

你当然也可以使用 docker 容器来托管生成的静态文件：

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

或者使用下面的 Dockerfile 来构建一个静态站点的容器镜像：

FROM nginx:alpine

COPY dist /usr/share/nginx/html

运行 docker build -t mystaticppt . 来构建镜像

执行 docker run --name myslides --rm -p 80:80 mystaticppt 命令来启动容器。

此时你就可以通过 http://localhost/ 来访问你的幻灯片了。