Amazon Cloudfront
Connect CloudFront to exported Webflow sites for Lambda@Edge, AWS WAF, and custom caching. Not compatible with native hosting.
How to integrate Amazon CloudFront with Webflow
Webflow's native hosting already includes CloudFront and Fastly. This guide applies exclusively to exported Webflow sites hosted on AWS S3, EC2, or custom servers.
For exported sites, integration methods include: Prerequisites for exported sites, Build with CloudFront API, Configure custom domains and SSL certificates, Implement cache invalidation, and Implement Lambda@Edge. Export your site and configure CloudFront when you need Lambda@Edge functions, AWS WAF security rules, or unified AWS billing for compliance.
This guide applies to exported sites only
Webflow-hosted sites already have CloudFront acceleration — use Webflow's manual domain connection guide instead. External CloudFront distributions cause 525 handshake errors with Webflow's managed hosting due to SSL certificate validation requirements.
Standard approach for Webflow-hosted sites
Webflow's hosting automatically uses CloudFront and Fastly for global delivery. Custom domains configured through Webflow's interface benefit from:
- Automatic CloudFront and Fastly edge caching globally
- Managed SSL certificate provisioning and renewal
- Automatic cache invalidation on publish
- Global CDN acceleration without additional setup
Prerequisites for exported sites
Before configuring CloudFront, export your site and set up origin infrastructure.
To export your Webflow site:
- Navigate to Site settings > Export code
- Click Prepare ZIP and download the file containing HTML, CSS, JavaScript, images, and assets
Note: Exported sites exclude CMS content, forms, password protection, and e-commerce features.
Choose an origin platform:
- Amazon S3: Create a bucket following the S3 getting started guide. Enable static website hosting, upload files, and configure public read access.
- Amazon EC2: Launch an instance with nginx or Apache. Configure HTTPS and upload files to the web server directory.
- Custom server: Enable HTTPS, configure CORS headers if needed, and upload files.
Test that your site loads correctly at the origin URL with HTTPS before proceeding.
Build with CloudFront API
Follow the distribution creation process:
- Sign in to CloudFront console
- Go to Distributions > Create distribution
- Choose the Web delivery method
- Configure origin domain (S3 bucket URL, EC2 domain, or custom server)
Configure custom domains and SSL certificates
Certificates must be requested in us-east-1 regardless of content origin (requirements).
Request a certificate by using the following steps:
- Access AWS Certificate Manager in us-east-1
- Request a public certificate with DNS validation
- Include apex domain and subdomains (wildcard *.example.com doesn't cover apex)
- Add DNS validation records
Attach certificate:
- In CloudFront distribution settings, select Custom SSL certificate
- Set Security policy to TLS 1.2 or TLS 1.3
Configure CNAMEs:
- In distribution General > Edit, add alternate domain names
- Add CNAME records for subdomains; use ALIAS records for apex domains (Route 53 documentation)
Implement cache invalidation for content updates
Create invalidations using the invalidation process when updating exported sites.
- 1,000 free paths/month; additional paths cost $0.005 each
- Wildcard paths (/images/*) count as single paths
- Use versioned filenames (style.v2.css) to reduce invalidation needs
To create invalidations: Go to distribution > Invalidations > Create invalidation. Enter paths (/index.html, /css/, or / for complete invalidation).
Implement Lambda@Edge for request and response processing
Lambda@Edge runs code at edge locations for request/response processing (guide).
Trigger types:
- Viewer request: Before cache lookup. For authentication, header manipulation, URL rewrites.
- Origin request: On cache miss. For origin selection, header addition.
- Origin response: After origin response. For header modification, error pages.
- Viewer response: Before returning to viewer. For header injection.
What you can build
Integrating Amazon CloudFront with Webflow lets you add enterprise-grade caching, security, and geographic routing to exported sites.
- Global marketing sites: Edge caching with automatic compression for images, videos, and interactive content
- Enterprise sites with AWS WAF: Block malicious traffic, rate limiting, DDoS protection
- Multi-region landing pages: Geographic routing via Lambda@Edge with single Webflow design system
- Authenticated portals: Lambda@Edge viewer request triggers for authentication checks
Frequently asked questions
No. Webflow hosting already uses CloudFront and Fastly. External CloudFront distributions cause 525 SSL handshake errors. Use Webflow's manual domain connection guide instead.
Export when you need AWS‑native features like Lambda@Edge, AWS WAF, custom cache policies, or strict compliance/audit requirements, and can live without Webflow CMS, forms, memberships, and ecommerce.
Yes. You continue designing and publishing to “Export code,” then push the exported bundle to S3/EC2 and invalidate CloudFront whenever content changes.
Description
A CDN that caches content at global edge locations. Integrates with Lambda@Edge, AWS WAF, and AWS Certificate Manager. Supports custom origins including exported Webflow sites on S3 or EC2.
This integration page is provided for informational and convenience purposes only.
Vimeo
Connect Vimeo's professional video hosting platform with Webflow to create engaging websites with high-quality video content, custom players, and seamless CMS integration. Display portfolio reels, educational content, or background videos while maintaining complete control over playback and design.
Videezy Webflow Integration
Connect Videezy (HD stock video library) with Webflow to create engaging backgrounds, hero sections, and dynamic galleries using free and premium footage — no complex production required.
Unsplash
Seamlessly integrate Unsplash's library of over 5 million high-quality, royalty-free images directly into your Webflow Designer. Search, filter, and insert professional photography without leaving your design environment, accelerating content creation while maintaining visual excellence.
Uploadcare File Uploader
Connect Uploadcare's powerful file handling capabilities with Webflow to enable advanced file uploads, image optimization, and content delivery for your websites. This integration allows site visitors to upload files directly through your Webflow forms, automatically processes images for optimal delivery, and stores files securely in the cloud — all without complex backend infrastructure.
SVGator
Add SVGator animations to Webflow sites for scalable vector motion graphics with interactive triggers.
Pixabay
Connect Pixabay's library of 5.3+ million royalty-free images, videos, and audio files to your Webflow site. Build visually rich websites without licensing fees while maintaining complete design control and copyright compliance.
Pngtree
Connect Pngtree – a library of millions of royalty-free PNGs, vectors, and design templates – with Webflow to streamline your design workflow by accessing transparent graphics, infographics, and marketing assets without leaving the platform
Pexels
Add millions of free, high-quality stock photos and videos to your Webflow sites instantly. Search and embed professional media content without leaving Webflow, while maintaining proper attribution and optimizing for performance.
Lottieflow by Finsweet
Download unique Lottie icon animations to implement on your website, product, or app for free. Browse for Lottie files, change hex color, customize easing, and download the JSON file. It’s that simple!
Related integrations
Get started for free
Try Webflow for as long as you like with our free Starter plan. Purchase a paid Site plan to publish, host, and unlock additional features.
