VSCode SFTP Configuration

Configure VSCode SFTP for deploying static websites to production servers. Provides complete workflow including production-ready Nginx configuration templates with security headers, caching strategies, and performance optimizations.

Core Workflow

Step 1: Analyze Project Structure

Identify the static files to deploy:

• Pure static projects: HTML, CSS, JS in root directory
• Build-based projects: Look for

  dist/

  ,

  build/

  , or

  public/

  output directories
• Static generators: Check for build commands in

  package.json

  or documentation

Ask the user for deployment details:

1. Remote server address (IP or hostname)
2. Remote path (e.g.,

   /var/www/sitename

   )
3. SSH authentication method (password or SSH key path)
4. Domain name(s) for Nginx configuration
5. Whether this is a main domain or subdomain

Step 2: Generate SFTP Configuration

VSCode Extension: This skill uses the code-sftp extension by Satiro Marra.

Step 2A: Configure SSH Config (Recommended Best Practice)

Before creating

sftp.json

, set up SSH host alias in

~/.ssh/config

for better management:

Host project-prod
    HostName 82.157.29.215
    User root
    Port 22
    IdentityFile ~/.ssh/id_rsa
    IdentitiesOnly yes
    ServerAliveInterval 60
    ServerAliveCountMax 3

Benefits of SSH config:

• ✅ Eliminates SFTP extension warnings (

  Section for 'IP' not found

  )
• ✅ Use host alias in terminal:

  ssh project-prod

• ✅ Centralized SSH settings (connection keep-alive, compression, etc.)
• ✅ Easier to manage multiple environments (dev, staging, prod)

Check if

~/.ssh/config

already has the server:

cat ~/.ssh/config | grep -A 5 "82.157.29.215"

If found, use that existing host alias. If not, add a new entry.

Step 2B: Create SFTP Configuration

Create

.vscode/sftp.json

using the template from

assets/sftp.json.template

.

Essential configuration fields:

• name

  : Profile name for easy identification

• host

  : SSH host alias (e.g.,

  "Tencent_Pro"

  ) or IP address

• protocol

  : "sftp" for SFTP (secure) or "ftp" for FTP

• port

  : 22 for SFTP, 21 for FTP

• username

  : SSH/FTP username

• privateKeyPath

  : Path to SSH private key (e.g.,

  /Users/username/.ssh/id_rsa

  )

• remotePath

  : Remote directory path (e.g.,

  /var/www/sitename

  )

• uploadOnSave

  :

  false

  recommended (manual sync is safer)

Optional advanced fields:

• ignore

  : Array of files/folders to exclude from upload

• watcher

  : File watching configuration for auto-upload

• syncOption

  : Sync behavior (delete, update, skip existing files)

• useTempFile

  : Use temporary files during upload

• downloadOnOpen

  : Auto-download files when opened

Customize for the project:

• Replace

  {{HOST_ALIAS}}

  with SSH config alias (recommended) or IP address
• Replace other

  {{PLACEHOLDERS}}

  with actual values
• Add project-specific files to

  ignore

  array (

  .claude

  ,

  nginx.conf

  , build artifacts, etc.)
• For build-based projects: Keep

  uploadOnSave: false

  , sync manually after build
• For pure static projects: Optionally enable

  uploadOnSave: true

  for instant deployment

Step 3: Generate Nginx Configuration

Choose the appropriate template:

• Main domain: Use

  assets/nginx-static.conf.template

  for primary website
• Subdomain: Use

  assets/nginx-subdomain.conf.template

  for subdomains like

  slides.example.com

Customize the configuration:

1. Replace

   {{DOMAIN}}

   with actual domain name
2. Replace

   {{DOCUMENT_ROOT}}

   with remote path (e.g.,

   /var/www/aiseed

   )
3. Adjust SSL certificate paths if using custom certificates
4. Configure subdomain-specific settings if needed

Include essential features from

references/nginx-best-practices.md

:

• HTTP → HTTPS redirect
• HTTP/2 support
• Gzip compression
• Static resource caching (1 year for JS/CSS/images, 1 hour for HTML)
• Security headers (HSTS, X-Frame-Options, CSP, etc.)
• Access and error logs

Step 4: Provide Deployment Instructions

Generate a deployment checklist based on

assets/deploy-checklist.md

:

1. Initial setup (one-time):

   • Install VSCode extension: code-sftp by Satiro Marra
   • Open Command Palette (Cmd/Ctrl+Shift+P) →

     SFTP: Config

     to create

     .vscode/sftp.json

   • Verify SSH access to server:

     ssh user@host

   • Ensure remote directory exists:

     ssh user@host "mkdir -p /var/www/sitename"

   • Set proper permissions:

     ssh user@host "chmod 755 /var/www/sitename"

2. File deployment:

   • For build projects: Run build command first (e.g.,

     npm run build

     )
   • Open VSCode Command Palette →

     SFTP: Sync Local → Remote

     to upload all files
   • Or right-click folder in Explorer → "Upload Folder"
   • Monitor upload progress in VSCode Output panel (View → Output → SFTP)
   • Verify files uploaded:

     ssh user@host "ls -la /var/www/sitename"

3. Nginx configuration:

   • Upload generated config to

     /etc/nginx/sites-available/

   • Create symlink:

     ln -s /etc/nginx/sites-available/site.conf /etc/nginx/sites-enabled/

   • Test config:

     sudo nginx -t

   • Reload:

     sudo systemctl reload nginx

4. SSL/TLS setup (if not configured):

   • Refer to

     references/ssl-security.md

     for certificate setup
   • Use Let's Encrypt for free certificates:

     certbot --nginx -d example.com

5. Verification:

   • Test HTTPS:

     curl -I https://example.com

   • Check security headers: Use securityheaders.com
   • Test performance: Use PageSpeed Insights

Step 5: Document the Setup

Update project documentation (README.md or CLAUDE.md) with:

• Deployment method (SFTP to

  /var/www/path

  )
• SFTP configuration location (

  .vscode/sftp.json

  )
• Nginx configuration reference
• Build commands (if applicable)
• Deployment workflow for future updates

Benefits of This Architecture

Explain to users why static + SFTP deployment is advantageous:

1. Simplicity: Edit → Upload → Live (no build pipelines, no containers)
2. Performance: Nginx serves static files faster than Node.js/Python backends
3. Reliability: No backend processes to crash or hang
4. Resource efficiency: Lower server memory and CPU usage
5. Cost effective: Can host on minimal VPS or shared hosting
6. Easy rollback: Copy previous version from backup directory

When NOT to Use This Architecture

Static + SFTP deployment is not appropriate when:

• Backend API endpoints are required
• Server-side form processing is needed (unless using external services like n8n, FormSpree)
• User authentication/sessions are required
• Database interactions are needed
• Server-side rendering (SSR) is required

Resources

references/

• ssh-config.md

  - SSH config file setup and best practices (host aliases, jump hosts, security)

• nginx-best-practices.md

  - Comprehensive Nginx optimization guide for static sites

• ssl-security.md

  - SSL/TLS certificate setup and security configuration

assets/

• sftp.json.template

  - VSCode SFTP configuration template (array format, uses SSH host alias)

• nginx-static.conf.template

  - Main domain Nginx configuration template

• nginx-subdomain.conf.template

  - Subdomain Nginx configuration template

• deploy-checklist.md

  - Step-by-step deployment verification checklist