How to Deploy Your VitePress Site

VitePress is a fast, lightweight static site generator powered by Vite. It’s often used for documentation websites but can be customized for many other use cases.

In this guide, we’ll walk through deploying a VitePress site to an Ubuntu server using CloudRay, a platform for managing infrastructure and running automation Bash scripts at scale. This guide assumes you already have a VitePress project created. If not, check out the VitePress Getting Started Guide to create one.

Contents

• Adding Servers to CloudRay
• Create a Deployment Script
• Define the Variable Group
• Run the Deployment Script
• Next Step
• Summary

Adding Servers to CloudRay

Before getting started, make sure your machine is added to a CloudRay project and connected using the CloudRay Agent.

Create a Deployment Script

Now that your machine is connected to CloudRay, let’s create a reusable Bash script to automate the deployment process. You need to follow these steps to create the script in CloudRay.

1. Go to Scripts in your CloudRay project
2. Click New Script
3. Name: Deploy VitePress Site. You can give it any name of your choice
4. Copy this code:

#!/bin/bash

# Exit on error
set -e

echo "📦 Updating system and installing dependencies..."
sudo apt update && sudo apt install -y \
    curl git nginx

echo "🧰 Installing Node.js LTS..."
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt install -y nodejs

echo "🚀 Installing global packages..."
sudo npm install -g pm2 serve

echo "📁 Cloning or updating VitePress repo..."
sudo mkdir -p /var/www
sudo chown -R "$USER":"$USER" /var/www
cd /var/www
if [ -d "{{app_name}}/.git" ]; then
  echo "🔁 Existing repo detected — fetching latest changes..."
  cd "$app_name"
  git fetch --all --prune
  git reset --hard origin/main
else
  git clone -b main "{{repo_url}}" "{{app_name}}"
  cd "{{app_name}}"
fi

echo "📦 Installing project dependencies..."
npm install

echo "🏗️ Building the VitePress site..."
npm run build

echo "📡 Serving with PM2 on port $port..."
cd .vitepress
pm2 delete "{{app_name}}" >/dev/null 2>&1 || true
pm2 start "serve -s dist -l {{port}}" --name "{{app_name}}"

# Configure PM2 to start on boot for the current user and persist the process list
sudo env PATH=$PATH pm2 startup systemd -u "$USER" --hp "$HOME" >/dev/null
pm2 save

echo "🌐 Configuring Nginx reverse proxy..."
NGINX_CONF="/etc/nginx/sites-available/{{app_name}}"
sudo tee "$NGINX_CONF" > /dev/null <<EOF
server {
    listen 80;
    server_name {{domain}};

    location / {
        proxy_pass http://localhost:{{port}};
        proxy_http_version 1.1;
        proxy_set_header Upgrade \$http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host \$host;
        proxy_cache_bypass \$http_upgrade;
    }
}
EOF

echo "🔗 Enabling Nginx config and restarting..."
sudo ln -sf "$NGINX_CONF" /etc/nginx/sites-enabled/
sudo rm -f /etc/nginx/sites-enabled/default
sudo nginx -t && sudo systemctl reload nginx

echo "✅ Deployment complete! Access your site at http://{{domain}}"

Here is what the Deploy VitePress Site does:

• Install Node.js and dependencies
• Clone your VitePress repo (or update if it exists)
• Install dependencies and build the VitePress project
• Serve the built files using PM2 and serve
• Configure Nginx as a reverse proxy

Define the Variable Group

Now, before running the deployment script, you need to define values for the placeholders {{repo_url}}, {{port}}, {{app_name}} and {{domain}} used in the scrips. CloudRay processes all scripts as Liquid templates. This allows you to use variables dynamically across different servers.

To ensure that these values are automatically substituted when the script runs, follow these steps to create a variable group:

1. Navigate to Variable Groups: In your CloudRay project, go to “Scripts” in the top menu and click on “Variable Groups”.
2. Create a new Variable Group: Click on “Variable Group”.
3. Add the following variables:

• repo_url: The URL of your GitHub repository
• app_name: Name of your VitePress app (used as directory + PM2 process name)
• port: Internal port to serve your app (e.g., 3000)

Since the variables is setup, proceed with running the scripts with CloudRay

Run the Deployment Script

CloudRay uses Runlogs to execute scripts on your servers while providing real-time logs of the execution process.

Once the script is saved, you can deploy your VitePress site by creating a Runlog:

1. Navigate to Runlogs: In your CloudRay project, go to the Runlogs section in the top menu.
2. Create a New Runlog: Click on New Runlog.
3. Configure the Runlog: Fill in the required details:

• Server: Select the server you added earlier.
• Script: Choose the “Deploy VitePress Site”
• Variable Group (optional): Select the variable group you created earlier.

4. Execute the Script: Click on Run Now to start the execution.

CloudRay will automatically connect to your server, run the Deploy Vite Site, and provide live logs to track the process. If any errors occur, you can review the logs to troubleshoot the issue.

Once the deployment is complete, you can visit http://<your-server-ip>. You should see your VitePress site up and running

Next Step

To improve your deployment and security:

• You can use Let’s Encrypt to add HTTPS support
• Set up automatic redeployment with webhooks or CI/cd

Summary

With CloudRay, deploying your VitePress site to Ubuntu becomes a structured and repeatable process. Scripts remain organised, server access is centralised, and you can easily tweak configurations with variable groups.

For more deployment guides and use cases, check out our CloudRay Guides or explore the CloudRay Docs.