VitePress Deployment

Deploying your VitePress site online is very simple because VitePress builds a completely static website. This means you can host it on any service that supports static files.

Build Your Site

Before deployment, you need to build the files required for the production environment. Run the following command in your project root directory:

npm run docs:build

This command will execute vitepress build docs (where docs is your source file directory). After a successful build, all static files (HTML, CSS, JavaScript, and other resources) will be output to the docs/.vitepress/dist directory.

What you need to deploy is all the content in this dist directory.

Common Deployment Platforms

You can deploy the built dist directory to various popular platforms.

Deploying to GitHub Pages

1. Modify config.js

   If your GitHub Pages URL is https://<USERNAME>.github.io/<REPO>/, you need to set the base option.

   // .vitepress/config.js
   export default {
     base: '/<REPO>/', // Replace <REPO> with your repository name
     // ...other configuration
   }

2. Create deployment script

   You can create a script file, such as deploy.sh, to automate the deployment process.

   #!/usr/bin/env sh
   
   # Abort on error
   set -e
   
   # Build
   npm run docs:build
   
   # Enter the build output directory
   cd docs/.vitepress/dist
   
   # If publishing to a custom domain
   # echo 'www.example.com' > CNAME
   
   git init
   git add -A
   git commit -m 'deploy'
   
   # If publishing to https://<USERNAME>.github.io/<REPO>
   git push -f git@github.com:<USERNAME>/<REPO>.git main:gh-pages
   
   cd -

3. Run the script

   sh deploy.sh

   Finally, in your GitHub repository settings, set the Pages source to the gh-pages branch.

Deploying to Netlify / Vercel

For modern hosting platforms like Netlify, Vercel, and Cloudflare Pages, the deployment process is even simpler.

1. Push your code to a GitHub/GitLab/Bitbucket repository.
2. On the corresponding platform (such as Netlify), import your Git repository.
3. Configure build settings:
   • Build Command: npm run docs:build
   • Publish Directory: docs/.vitepress/dist

The platform will automatically pull the code, execute the build command, and deploy the publish directory online every time you push to the main branch. You don't need to manually build and upload files.