Setup CloudFlare CDN for StaticPages
About 961 wordsAbout 3 min
2025-11-13
Learn how to configure CloudFlare as a CDN in front of your storage backend to improve performance and reduce bandwidth costs.
Why Use CloudFlare CDN
Using CloudFlare as a CDN between StaticPages and your storage backend provides:
- Caching: Static assets are cached at CloudFlare's edge locations
- Bandwidth savings: Reduces requests to your storage backend
- DDoS protection: CloudFlare protects your origin from attacks
- Global performance: Content served from locations near your users
- SSL/TLS: Free SSL certificates for your CDN domain
Prerequisites
- A domain managed in CloudFlare DNS
- Access to CloudFlare DNS settings
- Your storage backend hostname (e.g.,
f003.backblazeb2.com) - StaticPages deployed and configured
Steps
1. Create a CNAME Record in CloudFlare
Log in to your CloudFlare dashboard
Select your domain
Go to DNS > Records
Click Add record
Configure the CNAME:
- Type: CNAME
- Name: Your subdomain (e.g.,
cdnforcdn.example.com) - Target: Your storage backend hostname (e.g.,
f003.backblazeb2.com) - Proxy status: Enable (orange cloud icon)
- TTL: Auto
Click Save
2. Enable CloudFlare Proxy
The proxy must be enabled (orange cloud icon) for CDN functionality:
- Enabled (Proxied): Orange cloud icon - Traffic goes through CloudFlare
- DNS only: Gray cloud icon - Direct connection, no caching
Make sure the orange cloud is active.
3. Configure Cache Settings (Optional)
For better performance, adjust CloudFlare cache settings:
Go to Caching > Configuration
Set Browser Cache TTL: 4 hours or higher
Go to Rules > Page Rules
Create a page rule for your CDN subdomain:
- URL pattern:
cdn.example.com/* - Settings:
- Cache Level: Cache Everything
- Edge Cache TTL: 1 month
- Browser Cache TTL: 4 hours
- URL pattern:
Click Save and Deploy
4. Update StaticPages Configuration
Update your StaticPages configuration to use the CloudFlare CDN:
pages:
- domain: your-site.com
bucket:
region: eu-central-003
url: https://s3.eu-central-003.backblazeb2.com
name: my-bucket
applicationId: ENV(APPLICATION_ID)
secret: ENV(S3_SECRET)
proxy:
url: https://cdn.example.com # Your CloudFlare CNAME
path: file/my-bucket # Include file/ for Backblaze B2
notFound: 404.html
searchPath:
- /index.html
- /index.htm5. Apply the Configuration
Deploy the updated configuration:
# For Helm deployments
helm upgrade staticpages spechtlabs/staticpages -f values.yaml -n static-pages
# For direct deployments
kubectl apply -f staticpages-config.yaml
kubectl rollout restart deployment/staticpages -n static-pages6. Verify the Setup
Test that CloudFlare is caching your content:
# Make a request and check headers
curl -I https://your-site.com/
# Look for CloudFlare headers
# cf-cache-status: HIT (cached) or MISS (not cached yet)
# cf-ray: CloudFlare ray ID
# server: cloudflareOn the first request, you'll see cf-cache-status: MISS. On subsequent requests, it should show HIT.
Configuration Examples
Backblaze B2 with CloudFlare CDN
proxy:
url: https://cdn.example.com
path: file/my-bucketCNAME setup:
- Name:
cdn - Target:
f003.backblazeb2.com - Proxy: Enabled (orange cloud)
Amazon S3 with CloudFlare CDN
proxy:
url: https://cdn.example.com
path: my-bucketCNAME setup:
- Name:
cdn - Target:
my-bucket.s3.amazonaws.com - Proxy: Enabled (orange cloud)
MinIO with CloudFlare CDN
proxy:
url: https://cdn.example.com
path: my-bucketCNAME setup:
- Name:
cdn - Target:
minio.your-domain.com - Proxy: Enabled (orange cloud)
Troubleshooting
CloudFlare Error 1000 (DNS Resolution Loop)
If you see "Error 1000: DNS points to prohibited IP", don't worry! StaticPages automatically handles this using external DNS resolution.
See: Understanding Proxy Origin Bypass
Files Not Caching
If cf-cache-status always shows MISS:
Check Cache Level: Set to "Cache Everything" in page rules
Verify Proxy Status: Orange cloud must be enabled
Check Cache-Control Headers: Your storage backend might be sending no-cache headers
To override backend headers, add a page rule:
- Setting: Cache Level = Cache Everything
- This caches regardless of origin headers
SSL/TLS Certificate Errors
If you get SSL certificate errors:
- Go to SSL/TLS > Overview
- Set encryption mode to Full or Full (strict)
- Wait a few minutes for propagation
Redirects to Storage Provider
If you're redirected to your storage provider's website:
- For Backblaze B2: Ensure
proxy.pathincludesfile/prefix - See: Fix Backblaze B2 Redirect Issues
Cache Purging
To clear CloudFlare cache after deploying new content:
Purge Everything
# Using CloudFlare API
curl -X POST "https://api.cloudflare.com/client/v4/zones/{zone_id}/purge_cache" \
-H "Authorization: Bearer {api_token}" \
-H "Content-Type: application/json" \
--data '{"purge_everything":true}'Purge Specific Files
curl -X POST "https://api.cloudflare.com/client/v4/zones/{zone_id}/purge_cache" \
-H "Authorization: Bearer {api_token}" \
-H "Content-Type: application/json" \
--data '{"files":["https://cdn.example.com/file/bucket/path/file.html"]}'Via Dashboard
- Go to Caching > Configuration
- Click Purge Everything or Custom Purge
- Enter specific URLs if needed
- Click Purge
Performance Optimization
Recommended CloudFlare Settings
Caching:
- Browser Cache TTL: 4 hours
- Crawlers: Enabled
- Cache Level: Standard (or Cache Everything with page rule)
Speed:
Auto Minify: Enable CSS, JavaScript, HTML
Brotli: Enabled
Early Hints: Enabled
HTTP/2: Enabled
HTTP/3 (with QUIC): Enabled
Network:
- WebSockets: Enabled (if needed)
- gRPC: Disabled (not needed for static sites)
Cache Everything Page Rule
For maximum performance:
- URL pattern:
cdn.example.com/* - Settings:
- Cache Level: Cache Everything
- Edge Cache TTL: 1 month
- Browser Cache TTL: 4 hours
- Origin Cache Control: On
Cost Considerations
CloudFlare Free tier includes:
- Unlimited bandwidth
- Unlimited caching
- 3 page rules
- Basic DDoS protection
This is typically sufficient for StaticPages deployments.
Security Considerations
Enable Additional CloudFlare Security
- Bot Fight Mode: Go to Security > Bots
- Challenge Passage: Go to Security > Settings
- Rate Limiting: Create rules to prevent abuse
SSL/TLS Settings
Recommended settings:
- Encryption mode: Full (strict)
- Minimum TLS Version: TLS 1.2
- Opportunistic Encryption: Enabled
- TLS 1.3: Enabled
- Automatic HTTPS Rewrites: Enabled
Related Documentation
- Understanding Proxy Origin Bypass - How StaticPages avoids CloudFlare loops
- Backblaze B2 Configuration Reference - Complete B2 configuration
- Fix Backblaze B2 Redirect Issues - Troubleshoot redirect problems
