|
| 1 | +VitePress |
| 2 | +========= |
| 3 | + |
| 4 | +.. meta:: |
| 5 | + :description lang=en: Learn how to host VitePress documentation on Read the Docs. |
| 6 | + |
| 7 | +`VitePress`_ is a static site generator with a focus on performance and simplicity. |
| 8 | + |
| 9 | +Minimal configuration is required to build an existing VitePress project on Read the Docs. |
| 10 | + |
| 11 | +.. code-block:: yaml |
| 12 | + :caption: .readthedocs.yaml |
| 13 | +
|
| 14 | + version: 2 |
| 15 | +
|
| 16 | + build: |
| 17 | + os: ubuntu-lts-latest |
| 18 | + tools: |
| 19 | + nodejs: "latest" |
| 20 | + jobs: |
| 21 | + install: |
| 22 | + - npm install vitepress |
| 23 | + build: |
| 24 | + html: |
| 25 | + # The site was created by running `vitepress init` |
| 26 | + # and following the official guide |
| 27 | + # https://vitepress.dev/guide/getting-started |
| 28 | + - vitepress build docs |
| 29 | + - mkdir -p $READTHEDOCS_OUTPUT/ |
| 30 | + - mv docs/.vitepress/dist $READTHEDOCS_OUTPUT/html |
| 31 | +
|
| 32 | +.. _VitePress: https://vitepress.dev/ |
| 33 | + |
| 34 | +Getting started |
| 35 | +--------------- |
| 36 | + |
| 37 | +- If you have an existing VitePress project you want to host on Read the Docs, check out our :doc:`/intro/add-project` guide. |
| 38 | +- If you're new to VitePress, check out the official `Getting started with VitePress`_ guide. |
| 39 | + |
| 40 | +.. _Getting started with VitePress: https://vitepress.vuejs.org/guide/getting-started.html |
| 41 | + |
| 42 | +Using the proper base path |
| 43 | +-------------------------- |
| 44 | + |
| 45 | +To ensure that your VitePress site works correctly on Read the Docs, |
| 46 | +you need to set the ``base`` option in your VitePress configuration to the correct base path: |
| 47 | + |
| 48 | +.. code-block:: js |
| 49 | + :caption: .vitepress/config.js |
| 50 | +
|
| 51 | + import { defineConfig } from 'vitepress' |
| 52 | +
|
| 53 | + // https://vitepress.dev/reference/site-config |
| 54 | + export default defineConfig({ |
| 55 | + // Use Canonical URL, but only the path and with no trailing / |
| 56 | + // End result is like: `/en/latest` |
| 57 | + base: process.env.READTHEDOCS_CANONICAL_URL |
| 58 | + ? new URL(process.env.READTHEDOCS_CANONICAL_URL).pathname.replace(/\/$/, "") |
| 59 | + : "", |
| 60 | +
|
| 61 | + title: "My Awesome Project", |
| 62 | + description: "A VitePress Site", |
| 63 | + }) |
| 64 | +
|
| 65 | +Example repository and demo |
| 66 | +--------------------------- |
| 67 | + |
| 68 | +Production example from DbToolsBundle |
| 69 | + https://dbtoolsbundle.readthedocs.io/en/stable/ |
| 70 | + |
| 71 | +Example repository |
| 72 | + https://github.com/readthedocs/test-builds/tree/vitepress |
| 73 | + |
| 74 | +Demo |
| 75 | + https://test-builds.readthedocs.io/en/vitepress/ |
| 76 | + |
| 77 | +Further reading |
| 78 | +--------------- |
| 79 | + |
| 80 | +* `VitePress documentation`_ |
| 81 | + |
| 82 | +.. _VitePress documentation: https://vitepress.dev/ |
0 commit comments