Logo

Cloudflare

Cloudflare is the free layer you add in front of your site after deploying to Vercel. It handles CDN caching, DDoS protection, DNS, bot filtering, rate limiting on your API routes, and free email forwarding.

Last updated: 2026-03-29

Benefits Specific to the Template

Flux ships with Astro's server output mode, multiple API routes, Clerk auth, Stripe webhooks, and static assets like the Nord font and icoonia SVGs. Cloudflare adds a protection and performance layer over every one of these without any code changes.

Flux FeatureWhat Cloudflare doesPlan
Nord font + icoonia SVGs in /public/Cached at 300+ edge locations — served in <5ms globallyFree
Gallery images (/e-commerce-1/, /e-commerce-2/)CDN cache reduces Vercel bandwidth — keeps you on free tier longerFree
/api/stripe-webhookRate limiting + WAF blocks fake webhook spam hitting your endpointFree
/api/* routes (Resend, Supabase)Bot filtering stops scrapers from hammering your serverless functionsFree
Clerk /sign-in, /sign-upDDoS protection keeps auth pages available during traffic spikesFree
Vercel origin IPHidden behind Cloudflare IPs — attackers can't target Vercel directlyFree
yourdomain.com SSLFull end-to-end TLS (visitor → Cloudflare → Vercel) at no costFree
hello@yourdomain.comEmail routing forwards to your inbox — pairs with Resend for sendingFree
PageSpeed scoresCompression (Brotli), HTTP/3, and edge caching push scores higherFree

Setup. Point Your Domain to Cloudflare

Add your domain to Cloudflare and swap nameservers in Hostinger. Cloudflare scans your existing DNS records automatically so nothing breaks.

Terminal
# Step 1 — cloudflare.com → Add a Site → Free plan
# Enter: yourdomain.com
# Cloudflare imports your existing DNS records from Hostinger

# Step 2 — Hostinger hPanel → Domains → Nameservers → Custom
# Replace default nameservers with the two Cloudflare assigns you:
#   e.g. ns1.cloudflare.com  /  ns2.cloudflare.com

# Step 3 — In Cloudflare DNS, confirm your Vercel records are Proxied
# Type   Name   Value                  Proxy status
# A      @      76.76.21.21            Proxied  ← orange cloud ON
# CNAME  www    cname.vercel-dns.com   Proxied  ← orange cloud ON

# Step 4 — Cloudflare SSL/TLS → Overview → set mode to:
# Full (Strict)  ← required because Vercel has a valid TLS cert on origin

Cache Rules for Flux Assets

Cloudflare auto-caches static files but you need explicit bypass rules to stop it from caching Clerk sessions, Stripe responses, and API data. Set these before going live.

Terminal
# Cloudflare Dashboard → Caching → Cache Rules

# Rule 1 — Cache Flux static assets aggressively
# Match:  File extension is one of: jpg jpeg png webp svg woff2 otf js css
# Action: Cache eligibility → Eligible for cache
#         Edge TTL            → Override → 1 month
#         Browser TTL         → Override → 1 day
# Covers: /font/OTF/Nord-*.otf, /icoonia/*.svg, /e-commerce-*/gallery-*.jpg

# Rule 2 — Bypass cache for Flux API routes
# Match:  URI path starts with /api/
# Action: Cache eligibility → Bypass cache
# Covers: /api/stripe-webhook, /api/send-email, /api/checkout

# Rule 3 — Bypass cache for Clerk auth & dashboard pages
# Match:  URI path contains /sign-in OR /sign-up OR /dashboard OR /account
# Action: Cache eligibility → Bypass cache
# Covers: All Clerk-protected routes in Flux

Protect Flux API Routes with Rate Limiting

Flux has several serverless API endpoints that could be abused. The Stripe webhook, Resend email sender, and any Supabase write routes. Cloudflare rate limiting blocks abusive traffic before it reaches Vercel.

Terminal
# Cloudflare Dashboard → Security → WAF → Rate Limiting Rules

# Rule: Protect Stripe webhook endpoint
# Match:  URI path equals /api/stripe-webhook
# Rate:   More than 20 requests per minute from same IP
# Action: Block for 1 hour
# Why:    Fake webhook floods can trigger your fulfillment logic repeatedly

# Rule: Protect email send endpoint
# Match:  URI path equals /api/send-email
# Rate:   More than 5 requests per minute from same IP
# Action: Block for 10 minutes
# Why:    Prevents your Resend quota being burned by a single bad actor

# Rule: Protect auth pages from brute force
# Match:  URI path starts with /sign-in
# Rate:   More than 10 requests per minute from same IP
# Action: Managed Challenge (CAPTCHA)
# Why:    Slows credential stuffing attacks on Clerk sign-in

# Cloudflare Dashboard → Security → Bots → Bot Fight Mode → ON
# Blocks known automated scrapers from hitting your gallery and API pages

Email Routing. Receive at hello@yourdomain.com

Cloudflare Email Routing gives you a professional receive address at your domain and forwards it to any inbox. It pairs with Resend, which handles outbound sending from the same domain.

Terminal
# Cloudflare Dashboard → Email → Email Routing → Enable

# Add a routing rule:
#   Catch-all address → forward to → your@gmail.com
# OR specific addresses:
#   hello@yourdomain.com    → your@gmail.com
#   support@yourdomain.com  → your@gmail.com

# Cloudflare adds MX and SPF records automatically.
# Keep your Resend DKIM record (resend._domainkey) — it coexists fine.

# Full email flow for Flux:
# Visitor fills /support contact form
#   → POST /api/send-email  (Resend sends FROM hello@yourdomain.com)
#   → reply arrives in visitor inbox
# Visitor replies TO hello@yourdomain.com
#   → Cloudflare routing forwards TO your personal inbox

# Update these in your Flux files after routing is live:
# src/components/data/tutorial.json  → "mailto:hello@yourdomain.com"
# src/pages/support.astro            → contact email display
# footer data / Footer.astro         → footer email link
HostingerSupabase