Deployment Guide

Learn how to deploy LeafMove Smart Documentation Center to various platforms.

🚀 GitHub Pages Deployment

Automatic Deployment with GitHub Actions

The project includes a pre-configured GitHub Actions workflow for automatic deployment.

Setup Steps

  1. Enable GitHub Pages

    • Go to your repository settings
    • Navigate to "Pages" section
    • Select "GitHub Actions" as the source

  2. Configure the Workflow The workflow file is located at .github/workflows/docs-deploy.yml:

    name: 📚 Documentation Deployment

on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  docs:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: '18'
          cache: npm
      - name: Install dependencies
        run: npm ci
      - name: Build documentation
        run: npm run docs:build
      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: docs/.vuepress/dist

  3. Push Changes

    git add .
git commit -m "docs: update documentation"
git push origin main

Manual Deployment

For manual deployment to GitHub Pages:

# Build the documentation
npm run docs:build

# Deploy using gh-pages
npm run deploy

🌐 Other Deployment Options

Netlify

  1. Connect Repository

  2. Configure Build Settings

    • Build command: npm run docs:build
    • Publish directory: docs/.vuepress/dist

  3. Deploy

    • Netlify will automatically deploy on every push

Vercel

  1. Import Project

    • Sign up at vercel.com
    • Import your GitHub repository

  2. Configure Settings

    • Framework Preset: Other
    • Build Command: npm run docs:build
    • Output Directory: docs/.vuepress/dist

Custom Server

Using Nginx

  1. Build the Site

    npm run docs:build

  2. Configure Nginx

    server {
    listen 80;
    server_name your-domain.com;
    root /path/to/docs/.vuepress/dist;
    index index.html;
    
    location / {
        try_files $uri $uri/ /index.html;
    }
}

Using Apache

  1. Build the Site

    npm run docs:build

  2. Configure Apache

    <VirtualHost *:80>
    ServerName your-domain.com
    DocumentRoot /path/to/docs/.vuepress/dist
    
    <Directory /path/to/docs/.vuepress/dist>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>

🔧 Build Configuration

Environment Variables

Set environment variables for different deployments:

# Production build
NODE_ENV=production npm run docs:build

# Development build
NODE_ENV=development npm run docs:build

Base URL Configuration

For deployment to subdirectories:

export default defineUserConfig({
  base: '/your-subdirectory/',
  // other config...
})

📊 Performance Optimization

Build Optimization

bundler: viteBundler({
  viteOptions: {
    build: {
      rollupOptions: {
        output: {
          manualChunks: {
            vendor: ['vue', 'vue-router']
          }
        }
      }
    }
  }
})

CDN Configuration

Use CDN for static assets:

export default defineUserConfig({
  head: [
    ['link', { rel: 'preconnect', href: 'https://cdn.jsdelivr.net' }]
  ]
})

🔍 Monitoring and Analytics

Google Analytics

Add Google Analytics tracking:

plugins: [
  googleAnalyticsPlugin({
    id: 'GA_MEASUREMENT_ID'
  })
]

Performance Monitoring

Monitor site performance with tools like:

  • Google PageSpeed Insights
  • GTmetrix
  • WebPageTest

🛠️ Troubleshooting

Common Issues

Build Failures

# Clear cache and rebuild
rm -rf node_modules docs/.vuepress/.cache
npm install
npm run docs:build

404 Errors

  • Check base URL configuration
  • Verify file paths and links
  • Ensure proper routing setup

Slow Loading

  • Optimize images
  • Enable compression
  • Use CDN for assets