How to implement Webflow custom hosting

Add Webflow custom hosting to your sites.

WCH is a website deployment and management platform that acts as a bridge between design tools (like Webflow) and production hosting infrastructure.

WCH operates as a cloud-based service with several key components:

Frontend Interface –– a web-based dashboard where users manage projects, configure settings, and monitor deployments
Import Engine –– automatically downloads and processes content from source websites (Webflow, custom URLs)
Build System –– processes and optimizes website files for production deployment
Deployment Engine –– publishes websites to various hosting providers simultaneously
Monitoring System –– real-time tracking of builds, deployments, and website changes
Translation Hub –– integration with professional translation services

How to use WCH

Step 1: Create a project

You’ll first create a new project in WCH. This is where all website management activities (such as team member access and site naming) will take place.

Step 2: Source connection

Connect your data source –– typically a Webflow site, but could be any website URL. For Webflow sites, this involves OAuth authentication to securely access the site content. For other URLs, WCH can crawl and import publicly accessible content.

Step 3: Initial import

WCH automatically discovers all pages on the connected site by reading the sitemap or crawling from the homepage. It downloads every asset –– HTML files, CSS stylesheets, JavaScript files, images, fonts, and other resources.

Step 4: Review and configuration

You’ll review the imported content through WCH's file browser and configure build settings, hosting preferences, and any custom scripts or modifications needed. This is also when you’ll configure translation settings if multilingual sites are needed.

Step 5: Staging build

The first deployment creates a staging version on WCH's servers. Here you can test the website and ensure everything has been imported correctly. You can share the staging URL with team members or clients for review.

Step 6: Production deployment

Once you’re satisfied with staging, you can deploy to your chosen hosting provider(s). This might be AWS S3 for a corporate site, GitHub Pages for a developer portfolio, or multiple hosting providers for redundancy.

Step 7: Ongoing management

After initial deployment, you can trigger new imports when the source site changes, manage translations, monitor performance, and collaborate with team members on ongoing updates.

Further information

How to import and process content

WCH begins by analyzing the source website to understand its structure. For Webflow sites, it uses the API to get a complete list of pages and assets. For other sites, it reads the XML sitemap or crawls from the homepage to discover all linked pages.

Once all pages are identified, WCH downloads every associated resource:

HTML Pages: Complete page content including all markup and embedded content
CSS Files: All stylesheets including external and inline styles
JavaScript: Custom scripts, third-party libraries, and embedded code
Images: Photos, graphics, icons, and background images in all formats
Other Assets: Fonts, documents, videos, and any other linked resources

As files are downloaded, WCH processes them to prepare for deployment:

Link Resolution: Updates all internal links to work in the new hosting environment
Path Normalization: Ensures consistent file paths across different hosting providers
Dependency Mapping: Identifies relationships between files (which CSS files are used by which pages)
Change Detection: Compares new content with previous versions to identify what has changed

Before completing the import, WCH validates that all critical resources were successfully downloaded and that the site structure is intact. Missing assets or broken dependencies will be flagged.

How to build and deploy your site

Building your site

Before creating a deployable version, WCH performs several preparation steps:

Asset Validation: Confirms all required files are present and accessible
Configuration Check: Verifies hosting settings and deployment credentials
Dependency Resolution: Ensures all CSS imports and JavaScript dependencies are properly linked

The build system transforms the imported content into production-ready files:

Image Optimization: Automatically compresses images to reduce file sizes while maintaining quality. Creates multiple sizes for responsive design where needed.
Code Minification: Removes whitespace, comments, and unnecessary characters from CSS and JavaScript files to reduce loading times.
File Bundling: Combines multiple CSS or JavaScript files when beneficial for performance.
Cache Optimization: Sets appropriate cache headers and creates cache-friendly file names.
Cross-Platform Compatibility: Ensures files work correctly across different browsers and devices.

Staging deployment

The first deployment creates a staging version hosted on WCH servers:

Provides a temporary URL for testing and review
Allows team members to preview changes before production
Serves as a backup version for rollback if needed
Enables testing of hosting-specific features

Production deployment

When you are satisfied with staging, you’ll begin production deployment:

Upload files to the chosen hosting provider(s)
Configure DNS settings if using custom domains
Populate CDN caches for global content delivery
Configure SSL certificates for secure access
Activate monitoring to track site performance

Multi-cloud hosting

WCH supports deployment to multiple hosting platforms, each optimized for different use cases:

Amazon Web Services (AWS S3)

Best for: High-traffic corporate websites, enterprise applications
Benefits: Unlimited scalability, global CDN integration, enterprise security
Configuration: Requires AWS credentials, bucket settings, and optional CloudFront setup

Microsoft Azure Blob Storage

Best for: Organizations already using Microsoft infrastructure
Benefits: Integration with Azure services, enterprise compliance, global distribution
Configuration: Azure account credentials, storage container setup, CDN configuration

GitHub Pages

Best for: Developer portfolios, open-source projects, documentation sites
Benefits: Free hosting, automatic deployment from Git, built-in version control
Configuration: GitHub repository connection, custom domain setup

SFTP Deployment

Best for: Traditional web hosting, shared hosting providers, legacy systems
Benefits: Works with any hosting provider, simple file-based deployment
Configuration: Server credentials, directory paths, file permissions

Multi-Hosting Strategy

You can also deploy the same website to multiple hosting providers simultaneously:

Primary + Backup: Deploy to main hosting provider with automatic backup to secondary
Geographic Distribution: Use different providers for different geographic regions
Environment Separation: Staging on one provider, production on another
A/B Testing: Deploy different versions to different hosting providers

Automated failover

WCH can monitor hosting providers and automatically switch traffic if a provider experiences issues, ensuring maximum uptime for critical websites.

Translation and localization

WCH streamlines the complex process of creating multilingual websites by integrating directly with professional translation services.

Lokalise integration

Lokalise is a professional translation platform that WCH integrates with for high-quality translations. WCH automatically identifies translatable content (text within HTML pages) and uploads it to Lokalise in a format translators can work with. Then, human translators work on the content through Lokalise's interface, with support for translation memory, terminology management, and quality assurance. Once translations are complete, WCH downloads the translated content and integrates it back into the website files.

Lokalise creates separate versions of the website for each language, with appropriate language codes and URL structures.

Weglot Integration

Weglot provides automatic translation with a JavaScript overlay approach. It automatically detects and translates content on web pages using machine translation and site visitors can view translated content immediately without separate page versions. Weglot will create language-specific URLs and handle technical SEO requirements for multilingual sites.

Localization Features

Beyond translation, WCH handles other localization requirements:

Date and Number Formats: Adjusts formatting for different regions
Currency Display: Shows appropriate currency symbols and formatting
Image Localization: Swaps region-specific images when needed
URL Structure: Creates appropriate URL patterns for different languages
Meta Data Translation: Translates page titles, descriptions, and other SEO elements

Team collaboration

WCH supports multiple users working on the same site:

Project owner: Full control over project settings, team management, and billing

Admin: Can manage content, trigger deployments, and invite team members
Editor: Can import content, review changes, but cannot deploy to production

Viewer: Read-only access to project status and staging versions

Collaborative Workflows

Teams can work together efficiently through WCH's collaboration features:

Parallel Work: Multiple team members can work on different aspects simultaneously

Review Process: Staging deployments allow team review before production

Change Notifications: Team members receive alerts about imports, deployments, and issues Activity Tracking: Complete audit trail of who made what changes when

Comments: Team members can leave notes and feedback on specific deployments

Status Updates: Automatic notifications about project milestones and issues

Shared Access: All team members can access the same project dashboard and files

Version control and change management

Automatic version tracking

WCH automatically creates versions every time content is imported or changed:

Complete Snapshots: Every import creates a complete backup of all website files
Change Detection: Identifies exactly what changed between versions
Version Comparison: Visual comparison of different versions to see differences
Rollback Capability: Can restore any previous version with one click

Change detection system

WCH continuously monitors source websites for changes:

Webhook Integration: Webflow sites can push notifications when content changes
Scheduled Monitoring: Regular checks for changes on sites without webhook support
Smart Alerts: Only notifies users when meaningful changes are detected
Granular Tracking: Identifies changes at the individual file level

Deployment history

Every deployment is tracked with complete information:

Deployment Timestamps: When each version was deployed where
User Attribution: Who triggered each deployment
Success/Failure Status: Complete logs of deployment outcomes
Performance Metrics: How each deployment affected site performance

Rollback and recovery

If issues arise, WCH provides multiple recovery options:

Version Rollback: Restore to any previous version of content
Hosting Rollback: Revert to previous deployment on hosting provider
Selective Restore: Restore individual files without affecting entire site
Emergency Procedures: Rapid rollback processes for critical issues

Real-time monitoring

WCH provides live updates during lengthy build and deployment processes:

Progress Indicators: Real-time percentage completion for all operations
Step-by-Step Status: Shows current operation (importing, optimizing, uploading)
Time Estimates: Predicted completion times based on historical data
Error Alerts: Immediate notification if any step fails

Deployment monitoring

During deployment to hosting providers:

Upload Progress: Shows file-by-file upload progress for large deployments
Validation Status: Confirms files are correctly deployed and accessible
Performance Testing: Basic performance checks after deployment completes
DNS Propagation: Monitors custom domain setup and DNS changes

Ongoing site monitoring

After deployment, WCH continues monitoring:

Uptime Tracking: Regular checks to ensure the website is accessible
Performance Metrics: Basic speed and availability monitoring
Change Alerts: Notifications when source content is updated
Usage Analytics: Basic traffic and performance insights

Cache management

CDN Cache Control

WCH manages content delivery network caches to ensure optimal performance:

Automatic Purging: Clears outdated content from CDN caches after deployments
Selective Invalidation: Only clears caches for changed files, not entire sites
Cache Warming: Pre-populates CDN caches with new content for faster initial loads
Global Distribution: Ensures content is cached at edge locations worldwide

Browser Cache Optimization

WCH optimizes how visitor browsers cache website content:

Cache Headers: Sets appropriate expiration times for different file types
Version Fingerprinting: Adds unique identifiers to files so browsers get updates immediately
Conditional Loading: Browsers only download files that have actually changed
Compression Settings: Configures GZIP compression for faster downloads

Performance impact

Proper cache management dramatically improves website performance:

Faster Load Times: Visitors get content from nearby cache servers
Reduced Bandwidth: Less data transfer needed for repeat visits
Server Protection: Reduces load on hosting servers during traffic spikes
Global Consistency: Same fast experience for visitors worldwide

Security and Access Control

Authentication and authorization

WCH implements multiple layers of security for user access:

Secure Login: Industry-standard authentication with password requirements
JWT Tokens: Secure session management with automatic expiration
Role-Based Access: Different permission levels for different team members
API Security: All communication between components is encrypted and authenticated

Hosting security

WCH ensures deployed websites are secure:

HTTPS Enforcement: Automatic SSL certificate provisioning for secure connections
Security Headers: Configures appropriate security headers for deployed sites
Access Controls: Manages who can access staging vs. production versions
Credential Management: Securely stores hosting provider credentials

Data protection

WCH protects sensitive information throughout the platform:

Encrypted Storage: All user data and website content encrypted at rest
Secure Transmission: All data transfers use TLS encryption
Access Logging: Complete audit trails of who accessed what content when
Privacy Controls: Users control who can access their projects and content

Compliance and Standards

WCH follows industry best practices:

GDPR Compliance: Appropriate data handling for European users
SOC 2: Security standards for service organizations
Regular Updates: Security patches and updates applied automatically
Backup Systems: Multiple redundant backups to prevent data loss