VitePress

VitePress is a Vue-powered static site generator built for documentation. This guide shows how to deploy your VitePress site on Runway.

Setup

Scaffold a new project:

mkdir my-docs && cd my-docs
npm add -D vitepress
npx vitepress init

Create an application on Runway (this also initializes a git repository, if none exists yet):

runway app create

Configuration

VitePress outputs its build (npm run docs:build) to e.g. docs/.vitepress/dist. To serve it, Runway uses a combination of buildpacks: Node.js, npm, and nginx.

Configure via the Runway CLI or a project.toml in your repository root.

runway app config set \
    BP_NODE_RUN_SCRIPTS=docs:build \
    BP_KEEP_FILES=docs/.vitepress/dist \
    BP_WEB_SERVER_ROOT=docs/.vitepress/dist \
    BP_WEB_SERVER=nginx

[build]
  [[build.env]]
    name = "BP_NODE_RUN_SCRIPTS"
    value = "docs:build"
  [[build.env]]
    name = "BP_KEEP_FILES"
    value = "docs/.vitepress/dist"
  [[build.env]]
    name = "BP_WEB_SERVER_ROOT"
    value = "docs/.vitepress/dist"
  [[build.env]]
    name = "BP_WEB_SERVER"
    value = "nginx"

Commit your changes:

git add -A && git commit -m 'Build configuration'

Deploy to Runway

runway app deploy

Run runway app open to see it live, or check the Runway UI. Check runway app logs if something’s off.