如何在Cloudflare上禁用HTML缓存，仅缓存静态资源

Absolutely, you can tweak Cloudflare's settings to avoid caching HTML pages while keeping your CSS, JS, images, and other static assets cached—this way your personalized features won't break. Here are the most reliable methods to set this up:

Method 1: Use Page Rules (Legacy but Widely Used) #

• Head to your Cloudflare dashboard, select your domain, and go to Rules > Page Rules.
• Click Create Page Rule.
• In the If the URL matches field, enter the pattern for your HTML pages. For example:
  • If you use .html extensions: *yourdomain.com/*.html (replace yourdomain.com with your actual domain)
  • If you use clean URLs (like yourdomain.com/about without .html): Use *yourdomain.com/* and add an additional condition where Response Content-Type equals text/html
• Under the Settings section, find Cache Level and set it to Bypass. This tells Cloudflare to never cache these pages.
• Save the rule and ensure it's toggled on.

Method 2: Use Cache Rules (Modern, More Flexible) #

• Go to Rules > Cache Rules in your Cloudflare dashboard.
• Click Create Cache Rule and give it a descriptive name (e.g., "Skip HTML Caching").
• Under When incoming requests match, set up your condition:
  • For .html files: Set Field to Request Path, Operator to matches regex, and Value to .*\.html$
  • For clean URLs targeting dynamic HTML: Set Field to Response Content-Type, Operator to equals, and Value to text/html
• Under Then, set Cache Status to Bypass cache.
• Save the rule.

Bonus: Verify Static Asset Caching #

Cloudflare caches most static assets (CSS, JS, images) by default, but you can double-check or adjust this in Caching > Configuration:

• Ensure the Default Cache Behavior is set to Standard (this caches static assets automatically)
• If you need more control, you can create additional Cache Rules to explicitly cache specific asset types (e.g., *.css, *.js, *.png) with longer TTLs.

Quick Tip #

If your HTML pages already send Cache-Control headers like no-cache, no-store, or private, Cloudflare will respect these by default. But setting up the rules above adds an extra layer of protection to ensure caching doesn't accidentally break your personalized features.

内容的提问来源于stack exchange，提问作者Ayman Barhoum