Cloudflare CDN, Caching, and Edge Rules — Birdor Cloudflare Tutorial Series (Part 4)

Leeting Yan

Cloudflare’s CDN and caching layer is one of the platform’s greatest strengths. For static sites like Hugo, it delivers global performance with almost no configuration. Yet understanding how Cloudflare caches, when it bypasses the cache, and how to fine-tune caching behavior will help you create a site that stays consistently fast for users across the world.

This chapter provides a calm, practical explanation of Cloudflare’s CDN architecture and the tools available for controlling cache behavior: Cache Rules, Page Rules, Transform Rules, and more.

1. How Cloudflare’s CDN Works (A Clear Mental Model)

Cloudflare sits between your visitors and your origin (or Pages deployment).
When someone visits your site:

  1. The request reaches the nearest Cloudflare edge node
  2. Cloudflare checks its cache for the asset
  3. If cached, the request ends right there (“edge hit”)
  4. If not cached, Cloudflare retrieves it from your origin (or Pages)
  5. Cloudflare stores it for future visitors

This edge-first model reduces latency and cuts server load close to zero.

2. What Cloudflare Caches by Default

Cloudflare automatically caches:

  • images (PNG, JPG, GIF, WebP, AVIF)
  • CSS
  • JavaScript
  • font files
  • static assets with file extensions
  • Hugo-generated static content served from /public/

Cloudflare does not cache HTML aggressively by default.

This is intentional:

  • HTML often contains dynamic elements
  • some sites use cookies or sessions
  • certain CMS platforms modify HTML frequently

But for Hugo sites, HTML is static — so enabling HTML caching usually improves performance dramatically.

3. Caching HTML for Hugo Sites

3.1 Why you should cache HTML

Because Hugo outputs prebuilt HTML, caching it:

  • lowers TTFB
  • improves LCP performance
  • reduces origin calls
  • makes your site behave like a CDN-native static site

3.2 How to enable HTML caching safely

Navigate to:

Rules → Cache Rules → Create Rule

Example rule:

If: URL Path matches *.html
Then: Cache Level = Cache Everything
Edge TTL = 1 hour (or longer)

This means:

  • Cloudflare caches every HTML file
  • No origin call unless cache expires
  • Every visitor gets fast edge hits

For blogs, documentation, and static content, HTML caching is highly recommended.

4. Understanding Cache-Control Headers

Your Hugo site may set headers through:

  • Cloudflare Pages
  • Transform Rules
  • A custom _headers file (if using certain frameworks)
  • Custom Workers

Key directives:

4.1 max-age

Browser cache duration.

Cache-Control: max-age=31536000

4.2 s-maxage

CDN cache duration (overrides max-age).

Cache-Control: s-maxage=3600

4.3 immutable

Means the file never changes (ideal for versioned assets).

Cache-Control: max-age=31536000, immutable

4.4 no-cache

Means Cloudflare must revalidate before serving.

Extend or remove this if serving static content.

5. Practical Caching Strategy for Hugo

A reliable, balanced approach:

5.1 For hashed assets (CSS/JS with fingerprints)

Cache-Control: public, max-age=31536000, immutable

These files never change once deployed.

5.2 For images

Cache-Control: public, max-age=2592000

A reasonable 30-day TTL.

5.3 For HTML

Cache-Control: public, max-age=300

or rely on Cloudflare’s Edge TTL from a Cache Rule.

This ensures pages update predictably but still get strong CDN performance.

6. Page Rules vs Cache Rules vs Transform Rules

Cloudflare has multiple rule systems. Here’s how to understand them.

These control:

  • Edge TTL
  • Cache level (“Cache Everything”)
  • Bypass cache
  • Custom caching behavior

Cache Rules are the modern, preferred system.

6.2 Page Rules (Legacy)

Older but still useful for:

  • redirects
  • forwarding URLs
  • forcing HTTPS
  • setting basic caching

Cloudflare is gradually moving functionality toward Cache Rules and Transform Rules.

6.3 Transform Rules

Modifies requests/responses:

  • add/remove headers
  • rewrite URLs
  • normalize paths
  • set Cache-Control headers

Transform Rules integrate well with Hugo sites that need clean, structured caching behavior.

7. Bypassing Cache for Dynamic Endpoints

If you use:

  • Pages Functions
  • Workers
  • dynamic API routes
  • contact forms
  • webhooks

you will need to bypass caching for these paths.

Create a Cache Rule:

If: URL Path matches /api/*
Then: Cache = Bypass

Similarly for admin dashboards:

If: URL Path contains "admin"
Then: Cache = Bypass

This ensures dynamic logic works correctly.

8. Tiered Caching: Faster and Cheaper Origin Retrieval

Cloudflare’s Tiered Caching reduces origin load by routing cache misses through upper-tier nodes instead of hitting your origin directly.

Benefits:

  • fewer origin requests
  • faster fetch times
  • predictable CDN behavior

Enable it:

Caching → Tiered Cache → Enable

This is particularly beneficial for larger Hugo sites with heavy images.

9. Origin Shielding for Cloudflare Pages

For Cloudflare Pages deployments, the “origin” is Cloudflare itself, so origin protection is built-in.

If you host elsewhere (e.g., S3, DigitalOcean, VPS), Cloudflare protects your server:

  • only Cloudflare hits your origin
  • origin IP stays hidden
  • shielded requests reduce load

Whenever possible, consider Cloudflare Pages for zero-origin deployments.

10. Smart Routing and Performance Features

Recommended optimizations:

10.1 Argo Smart Routing (paid, optional)

Accelerates cache misses by routing through optimized network paths.

10.2 Brotli Compression

Automatic for proxied requests.
Much smaller than gzip.

10.3 Image optimization

Under Speed → Images:

  • WebP/AVIF conversion
  • resizing
  • compression

Hugo + Cloudflare Image Resizing creates efficient media pipelines.

11. Recommended Best Practices for Hugo + Cloudflare CDN

  • Enable HTML caching
  • Use hashed filenames for JS/CSS
  • Enable Brotli
  • Cache images and static assets long-term
  • Use Tiered Caching
  • Avoid wildcard bypass rules
  • Keep origin hidden (proxy “orange cloud”)
  • Test performance with WebPageTest or Lighthouse
  • Avoid unnecessary Workers/Functions unless needed

This ensures your site remains fast across all regions.

12. Troubleshooting Common Caching Issues

12.1 HTML not caching

Check:

  • Cache Rule conditions
  • “Cache Everything” enabled
  • Cookies not included in matching

12.2 Updates not showing

Solutions:

  • purge cache
  • reduce Edge TTL
  • rely on versioned assets
  • avoid overly aggressive caching for HTML

12.3 API requests cached by accident

Add a bypass rule for /api/*.

12.4 Mixed content warnings?

Force HTTPS + rewrite rules.

13. Conclusion and What’s Next

In this chapter, we explored:

  • how Cloudflare caches your site
  • how to enable HTML caching
  • Cache-Control headers
  • Cache Rules, Page Rules, and Transform Rules
  • bypassing cache for dynamic logic
  • Tiered Caching and performance optimizations

With these ideas, your Hugo site will load quickly, globally, and consistently.

Next chapter:
Cloudflare Tutorial Series — Part 5: Workers and Pages Functions (A Gentle Introduction)