VitePress Deployment with Docker & Nginx

🧩 1. About VitePress

• This website is built using VitePress.
• Setup is extremely simple: just configure a few options and Markdown becomes a nicely formatted article.
• Deployment can be done easily on Vercel for public access.
• For faster access in a local network, you can use Docker + Nginx, running on a Mac Mini or other local server.

---

🦈 2. VSCode Preview

🦈 3. WebStorm Preview

• To be honest, JetBrains' IDE is more user-friendly than VSCode. Although this might be related to my BG. I truly entered the IT development industry from Android development, and Android Studio is implemented based on IntelliJ IDEA. So this thing also has a natural stereotype.
• JetBrains' products always better align with my perception of ides. I'm really not used to any IDE other than the JetBrains series right now, including Microsoft's VSCode (though it's really quite useful and friendly to development computers with relatively low performance), as well as Apple's XCode. I always can't figure out how to use its shortcut keys.

🐳 4. Docker Deployment

• The deployment script below was generated with the help of ChatGPT, which makes tasks like writing repeatable deployment scripts extremely efficient.
• AI tools like ChatGPT are now integral in development workflows — don’t underestimate them.

---

Dockerfile

# Use official Nginx image
FROM nginx:alpine

# Remove default Nginx website
RUN rm -rf /usr/share/nginx/html/*

# Copy built VitePress static files
COPY docs/.vitepress/dist /usr/share/nginx/html

# Copy custom Nginx config (optional)
COPY nginx.conf /etc/nginx/conf.d/default.conf

# Expose port
EXPOSE 80

# Start Nginx
CMD ["nginx", "-g", "daemon off;"]

RUN chmod -R 755 /usr/share/nginx/html

---

deploy.sh

#!/bin/bash
# ==========================================================
# VitePress blog auto-deploy script
# Usage:
#    ./deploy.sh deploy   # Build + update container
#    ./deploy.sh clean    # Clean old containers and images
# ==========================================================

set -e

CONTAINER_NAME="vitepress-blog"
IMAGE_NAME="my-vitepress-blog"
PORT=9096

# -------------------------------
# Function: Clean old containers/images
# -------------------------------
clean_old() {
  echo "🧹 Cleaning old containers and unused resources..."

  EXISTING_CONTAINER=$(docker ps -aq -f name="^${CONTAINER_NAME}$")
  if [ -n "$EXISTING_CONTAINER" ]; then
    echo "⚠️  Stopping and removing old container $CONTAINER_NAME..."
    docker stop $CONTAINER_NAME >/dev/null 2>&1 || true
    docker rm -f $CONTAINER_NAME >/dev/null 2>&1 || true
  fi

  EXITED_CONTAINERS=$(docker ps -aq -f status=exited)
  if [ -n "$EXITED_CONTAINERS" ]; then
    echo "🧽 Removing exited containers..."
    docker rm -v $EXITED_CONTAINERS >/dev/null 2>&1 || true
  fi

  DANGLING_IMAGES=$(docker images -f "dangling=true" -q)
  if [ -n "$DANGLING_IMAGES" ]; then
    echo "🗑️  Removing dangling images..."
    docker rmi -f $DANGLING_IMAGES >/dev/null 2>&1 || true
  fi

  docker network prune -f >/dev/null 2>&1 || true

  echo "✅ Clean complete!"
}

# -------------------------------
# Function: Deploy VitePress
# -------------------------------
deploy_app() {
  echo "🚧 [1/4] Building VitePress static files..."
  npm run build

  echo "🛠️  [2/4] Building Docker image: $IMAGE_NAME"
  docker build -t $IMAGE_NAME .

  echo "🧹 [3/4] Cleaning old containers..."
  clean_old

  echo "🚀 [4/4] Starting new container..."
  docker run -d -p ${PORT}:80 --name $CONTAINER_NAME $IMAGE_NAME

  echo "✅ Deployment complete!"
  echo "🌐 Access at: http://localhost:${PORT}"
}

# -------------------------------
# Main logic
# -------------------------------
case "$1" in
  deploy)
    deploy_app
    ;;
  clean)
    clean_old
    ;;
  *)
    echo "Usage:"
    echo "  ./deploy.sh deploy   # Build and deploy VitePress"
    echo "  ./deploy.sh clean    # Clean old containers and images"
    ;;
esac

---

nginx.conf

server {
    listen 80;
    server_name localhost;

    root /usr/share/nginx/html;
    index index.html;

    location / {
        try_files $uri /index.html;
    }

    # Serve images from public folder
    location ~* \.(png|jpg|jpeg|gif|ico|svg|webp)$ {
        expires 30d;
        access_log off;
    }

    # Optional gzip compression
    gzip on;
    gzip_types text/plain text/css application/javascript application/json image/svg+xml;
}

---

✅ Key Points

• VitePress + Docker + Nginx allows fast, lightweight deployment
• Static site can be accessed publicly or locally with minimal setup
• Scripts handle cleaning, building, and container management automatically
• Can be combined with Vercel for public hosting or Docker for local network access