Skip to main content

Deployment Guide

Complete guide to deploying the documentation site on a subdomain.

Prerequisites​

  • Node.js 18+ installed
  • Domain with DNS access
  • Web server (Nginx/Apache) or hosting platform

Build the Documentation​

1. Install Dependencies​

cd docs
npm install

2. Build Static Site​

npm run build

This creates a build/ directory with static HTML, CSS, and JavaScript files.

3. Test Locally​

npm run serve

Visit http://localhost:3000 to preview the built site.

Deployment Options​

Install Nginx​

# Ubuntu/Debian
sudo apt update
sudo apt install nginx

# CentOS/RHEL
sudo yum install nginx

Configure Nginx​

Create a new configuration file:

sudo nano /etc/nginx/sites-available/docs.yourdomain.com

Add this configuration:

server {
    listen 80;
    server_name docs.yourdomain.com;
    
    root /var/www/whatsapp-api-docs;
    index index.html;
    
    # Gzip compression
    gzip on;
    gzip_vary on;
    gzip_min_length 1024;
    gzip_types text/plain text/css text/xml text/javascript application/javascript application/xml+rss application/json;
    
    location / {
        try_files $uri $uri/ /index.html;
    }
    
    # Cache static assets
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
    
    # Security headers
    add_header X-Frame-Options "SAMEORIGIN" always;
    add_header X-Content-Type-Options "nosniff" always;
    add_header X-XSS-Protection "1; mode=block" always;
}

Enable Site​

# Create symlink
sudo ln -s /etc/nginx/sites-available/docs.yourdomain.com /etc/nginx/sites-enabled/

# Test configuration
sudo nginx -t

# Reload Nginx
sudo systemctl reload nginx

Deploy Files​

# Create directory
sudo mkdir -p /var/www/whatsapp-api-docs

# Copy build files
sudo cp -r build/* /var/www/whatsapp-api-docs/

# Set permissions
sudo chown -R www-data:www-data /var/www/whatsapp-api-docs

Setup SSL with Let's Encrypt​

# Install Certbot
sudo apt install certbot python3-certbot-nginx

# Get SSL certificate
sudo certbot --nginx -d docs.yourdomain.com

# Auto-renewal is configured automatically

Option 2: Apache​

Install Apache​

# Ubuntu/Debian
sudo apt install apache2

# CentOS/RHEL
sudo yum install httpd

Configure Apache​

Create virtual host:

sudo nano /etc/apache2/sites-available/docs.yourdomain.com.conf

Add configuration:

<VirtualHost *:80>
    ServerName docs.yourdomain.com
    DocumentRoot /var/www/whatsapp-api-docs
    
    <Directory /var/www/whatsapp-api-docs>
        Options -Indexes +FollowSymLinks
        AllowOverride All
        Require all granted
        
        # Rewrite for SPA
        RewriteEngine On
        RewriteBase /
        RewriteRule ^index\.html$ - [L]
        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteCond %{REQUEST_FILENAME} !-d
        RewriteRule . /index.html [L]
    </Directory>
    
    # Compression
    <IfModule mod_deflate.c>
        AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript
    </IfModule>
    
    # Caching
    <IfModule mod_expires.c>
        ExpiresActive On
        ExpiresByType image/jpg "access plus 1 year"
        ExpiresByType image/jpeg "access plus 1 year"
        ExpiresByType image/gif "access plus 1 year"
        ExpiresByType image/png "access plus 1 year"
        ExpiresByType text/css "access plus 1 month"
        ExpiresByType application/javascript "access plus 1 month"
    </IfModule>
</VirtualHost>

Enable Site​

# Enable modules
sudo a2enmod rewrite
sudo a2enmod deflate
sudo a2enmod expires

# Enable site
sudo a2ensite docs.yourdomain.com.conf

# Reload Apache
sudo systemctl reload apache2

Option 3: Netlify​

Using Netlify CLI​

# Install Netlify CLI
npm install -g netlify-cli

# Login
netlify login

# Deploy
cd docs
netlify deploy --prod

Using Git Integration​

  1. Push code to GitHub/GitLab
  2. Connect repository to Netlify
  3. Configure build settings:
    • Build command: npm run build
    • Publish directory: build
  4. Deploy automatically on push

netlify.toml Configuration​

Create netlify.toml in docs folder:

[build]
  command = "npm run build"
  publish = "build"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

[[headers]]
  for = "/*"
  [headers.values]
    X-Frame-Options = "SAMEORIGIN"
    X-Content-Type-Options = "nosniff"
    X-XSS-Protection = "1; mode=block"

[[headers]]
  for = "/static/*"
  [headers.values]
    Cache-Control = "public, max-age=31536000, immutable"

Option 4: Vercel​

# Install Vercel CLI
npm install -g vercel

# Deploy
cd docs
vercel --prod

vercel.json Configuration​

{
  "buildCommand": "npm run build",
  "outputDirectory": "build",
  "routes": [
    { "handle": "filesystem" },
    { "src": "/(.*)", "dest": "/index.html" }
  ]
}

Option 5: GitHub Pages​

Using GitHub Actions​

Create .github/workflows/deploy-docs.yml:

name: Deploy Documentation

on:
  push:
    branches: [main]
    paths:
      - 'docs/**'

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

DNS Configuration​

Subdomain Setup​

Add an A record or CNAME record:

A Record:

Type: A
Name: docs
Value: YOUR_SERVER_IP
TTL: 3600

CNAME Record:

Type: CNAME
Name: docs
Value: yourdomain.com
TTL: 3600

Verify DNS​

# Check DNS propagation
dig docs.yourdomain.com

# Or use online tools
# https://dnschecker.org

Continuous Deployment​

Automated Deployment Script​

Create deploy.sh:

#!/bin/bash

# Configuration
DOCS_DIR="/var/www/whatsapp-api-docs"
REPO_DIR="/home/user/whatsapp-api"

# Pull latest changes
cd $REPO_DIR
git pull origin main

# Build documentation
cd docs
npm install
npm run build

# Deploy
sudo rm -rf $DOCS_DIR/*
sudo cp -r build/* $DOCS_DIR/

# Set permissions
sudo chown -R www-data:www-data $DOCS_DIR

echo "Documentation deployed successfully!"

Make it executable:

chmod +x deploy.sh

Setup Git Hook​

Create post-receive hook on your server:

#!/bin/bash
cd /home/user/whatsapp-api
./deploy.sh

Monitoring​

Setup Uptime Monitoring​

Use services like:

  • UptimeRobot
  • Pingdom
  • StatusCake

Analytics​

Add Google Analytics to docusaurus.config.js:

module.exports = {
  // ...
  themeConfig: {
    // ...
    gtag: {
      trackingID: 'G-XXXXXXXXXX',
      anonymizeIP: true,
    },
  },
};

Performance Optimization​

Enable CDN​

Use Cloudflare for:

  • CDN caching
  • DDoS protection
  • SSL/TLS
  • Performance optimization

Optimize Images​

# Install image optimization tools
npm install -g imagemin-cli

# Optimize images
imagemin static/img/* --out-dir=static/img

Minification​

Already handled by Docusaurus build process.

Backup​

Automated Backup Script​

#!/bin/bash

BACKUP_DIR="/backups/docs"
DOCS_DIR="/var/www/whatsapp-api-docs"
DATE=$(date +%Y%m%d_%H%M%S)

# Create backup
tar -czf $BACKUP_DIR/docs_$DATE.tar.gz $DOCS_DIR

# Keep only last 7 days
find $BACKUP_DIR -name "docs_*.tar.gz" -mtime +7 -delete

echo "Backup completed: docs_$DATE.tar.gz"

Add to crontab:

# Run daily at 2 AM
0 2 * * * /path/to/backup.sh

Troubleshooting​

404 Errors on Refresh​

Nginx: Ensure try_files directive is correct Apache: Enable mod_rewrite and add .htaccess

Build Errors​

# Clear cache
npm run clear

# Reinstall dependencies
rm -rf node_modules package-lock.json
npm install

# Rebuild
npm run build

Permission Issues​

# Fix ownership
sudo chown -R www-data:www-data /var/www/whatsapp-api-docs

# Fix permissions
sudo find /var/www/whatsapp-api-docs -type d -exec chmod 755 {} \;
sudo find /var/www/whatsapp-api-docs -type f -exec chmod 644 {} \;

Security Checklist​

  • ✅ SSL/TLS certificate installed
  • ✅ Security headers configured
  • ✅ Directory listing disabled
  • ✅ Unnecessary files removed from build
  • ✅ Regular updates applied
  • ✅ Firewall configured
  • ✅ Access logs monitored
  • ✅ Backup system in place

Next Steps​

After deployment:

  1. Test all pages and links
  2. Verify mobile responsiveness
  3. Check page load speed
  4. Setup monitoring
  5. Configure analytics
  6. Create backup schedule
  7. Document deployment process