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:

• Remote server address (IP or hostname)

• Remote path (e.g., /var/www/sitename )

• SSH authentication method (password or SSH key path)

• Domain name(s) for Nginx configuration

• 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:

• Replace {{DOMAIN}} with actual domain name

• Replace {{DOCUMENT_ROOT}} with remote path (e.g., /var/www/aiseed )

• Adjust SSL certificate paths if using custom certificates

• 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 :

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"

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"

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

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

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:

• Simplicity: Edit → Upload → Live (no build pipelines, no containers)

• Performance: Nginx serves static files faster than Node.js/Python backends

• Reliability: No backend processes to crash or hang

• Resource efficiency: Lower server memory and CPU usage

• Cost effective: Can host on minimal VPS or shared hosting

• 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