diff --git a/docs/guide/hosting.md b/docs/guide/hosting.md index 4f842e1333..3b0735e7f6 100644 --- a/docs/guide/hosting.md +++ b/docs/guide/hosting.md @@ -195,3 +195,55 @@ jobs: - In your repository, go to Settings>Pages. Under "Build and deployment", select "GitHub Actions". - Finally, after all workflows are executed, a link to the slides should appear under Settings>Pages. + +### Docker + +To build and deploy your slides in a Docker container: + +- Create a `.dockerignore` file in your project root with the following content. + +```dockerignore +node_modules +dist +``` + +- Create a `.htaccess` file in your project root with the following content. + +```apache +RewriteEngine On +RewriteBase / +RewriteRule ^index.html$ - [L] +RewriteCond %{REQUEST_FILENAME} !-f +RewriteCond %{REQUEST_FILENAME} !-d +RewriteRule . /index.html [L] +``` + +- Create a `Dockerfile` in your project root with the following content. + +```Dockerfile +FROM node:20 AS build +WORKDIR /app +COPY package*.json ./ +RUN npm ci +# Uncomment the following line if you are using `download: true` or `--download` +# RUN npx playwright install-deps +COPY . . +RUN npm build +FROM httpd:2.4-alpine +RUN sed -i '/LoadModule rewrite_module/s/^#//g' /usr/local/apache2/conf/httpd.conf && \ + sed -i 's#AllowOverride [Nn]one#AllowOverride All#' /usr/local/apache2/conf/httpd.conf +COPY --from=build /app/dist/ /usr/local/apache2/htdocs/ +COPY .htaccess /usr/local/apache2/htdocs/.htaccess +``` + +- Build the Docker image. + +```bash +$ docker build -t my-slidev . +``` + +- Run the Docker container (replace `8080` with the port you want to use). + +```bash +$ docker run -p 8080:80 my-slidev +``` diff --git a/docs/guide/install.md b/docs/guide/install.md index 0643ebcc3d..a4e1edda08 100644 --- a/docs/guide/install.md +++ b/docs/guide/install.md @@ -97,40 +97,6 @@ And run the container: `docker run --name myslides --rm --user node -p 3030:3030 You can visit your slides at `http://localhost:3030/` -### Build hostable SPA (Single Page Application) - -Run `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` as a static website via services such as [GitHub Pages](https://tangramor.github.io/slidev_docker/) or GitLab Pages. - -Since in GitHub Pages the URL may contain subfolders, you may use `--base=//` option during the build process, such as `docker exec -i slidev npx slidev build --base=/slidev_docker/`. - -To avoid the Jekyll build process, you'll need to add an empty file `.nojekyll`. - -#### Host via docker - -You can also host Slidev yourself via docker: - -```bash -docker run --name myslides --rm -p 80:80 -v ${PWD}/dist:/usr/share/nginx/html nginx:alpine -``` - -Or create a static image with the following Dockerfile: - -```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 at http://localhost/ - Refer to [tangramor/slidev_docker](https://github.com/tangramor/slidev_docker) for more details. ## Command Line Interface (CLI)