Cloudflare Cache Rules Configuration and Hit Verification

The blog domain is proxied through Cloudflare with GitHub Pages as the origin. To improve static asset delivery and reduce redundant origin fetches, a Cache Rule was configured in the Cloudflare Dashboard to cache build artifacts, images, icons, and fonts at the edge.

Configuration Location

Cloudflare Dashboard path:

Domain -> Caching -> Cache Rules

Design Strategy

The goal is not to cache the entire site HTML. Instead, prioritize caching long-lived static resources like CSS, JS, images, and favicon. VuePress build assets typically include content hashes, making them ideal for long Edge TTLs. HTML pages are left uncached to avoid stale content after updates.

Final Rule

Match expression:

(http.host eq "blog.example.com" and
 (starts_with(http.request.uri.path, "/assets/") or
  ends_with(http.request.uri.path, ".css") or
  ends_with(http.request.uri.path, ".js") or
  ends_with(http.request.uri.path, ".mjs") or
  ends_with(http.request.uri.path, ".png") or
  ends_with(http.request.uri.path, ".jpg") or
  ends_with(http.request.uri.path, ".jpeg") or
  ends_with(http.request.uri.path, ".gif") or
  ends_with(http.request.uri.path, ".webp") or
  ends_with(http.request.uri.path, ".svg") or
  ends_with(http.request.uri.path, ".ico") or
  ends_with(http.request.uri.path, ".woff") or
  ends_with(http.request.uri.path, ".woff2") or
  ends_with(http.request.uri.path, ".ttf") or
  ends_with(http.request.uri.path, ".otf")))

Rule action:

Eligible for cache
Edge TTL: Ignore cache-control header and use this TTL
TTL: 1 month

Browser TTL is not overridden separately to avoid prolonged browser caching that could complicate debugging after updates.

Issue: matches Regex Not Available

Initially used a regex expression:

http.request.uri.path matches "^/(assets/|.*\\.(css|js|mjs|png|jpg|jpeg|gif|webp|svg|ico|woff2?|ttf|otf)$)"

Deployment failed with:

not entitled: the use of operator Matches is not allowed,
a Business plan or a WAF Advanced plan is required

The Cloudflare Free plan doesn't support the matches regex operator. The fix was to decompose the regex into a combination of starts_with and ends_with functions, which are available on all plans.

Verification

Check cache hit via response headers:

curl -I https://blog.example.com/favicon.ico

First request:

cf-cache-status: REVALIDATED

Second request:

cf-cache-status: HIT
age: 9

HIT means the request was served from a Cloudflare edge cache. age is the number of seconds the cached object has lived on the edge node.

Monitoring Cache Hit Rate

View overall metrics in the Cloudflare Dashboard:

Domain -> Caching -> Overview

Key metrics:

• Cache Analytics
• Cache hit ratio
• Requests by cache status
• Bandwidth saved

Filter by hostname for blog-specific traffic:

Domain -> Analytics -> HTTP Traffic -> Filter by hostname

Future Considerations

The current rule can be kept long-term. If HTML caching is desired later, consider:

• Refresh delay after homepage/article updates
• Automatic Cloudflare Cache Purge after GitHub Actions deployment
• Shorter TTL for text/html responses
• Priority ordering between Cache Rules and Page Rules

For now, static-only caching is the safer approach.