Learn how to cache static HTML using Cloudflare Page Rules.
To cache static HTML,
1. Log in to your Cloudflare account.
2. Choose the appropriate domain.
3. Click Page Rules.
4. Create a pattern and then apply a rule to that pattern. You'll need to find or create a way to differentiate static versus dynamic content by the URL. Some possibilities could include
- creating a directory for static content,
- appending a unique file extension to static pages, or
- adding a query parameter to mark content as static.
Here are three examples of patterns you could create for each of those options:
*example.com/static/* [/static/ subdirectory for static HTML pages] *example.com/*.shtml [.shtml file extension to signify HTML that is static] *example.com/*?*static=true* [adding static=true query parameter]
5. Next, design a pattern to describe pages you know are static, by choosing Cache everything in the Custom caching dropdown menu.
6. Click Add rule.
Troubleshooting the Page Rules cache settings
If you notice that the HTML is not being cached, despite the cache everything rule, you must override the origin cache directive with an Edge Cache TTL setting.
If the Cache-Control header is set to private, no-store, no-cache, or max-age=0, or if there is a cookie in the response, Cloudflare will not cache the resource unless a Page Rule is set to Cache Everything with an Edge Cache TTL setting.
Bypass Cache on Cookie (Business and Enterprise plans)
When using Bypass Cache on Cookie (a Business and Enterprise plan feature) in conjunction with "Cache Everything" it is possible to bypass the cache when a certain cookie is set. Additionally, the Edge Cache TTL allows you to specify the max time Cloudflare should cache a given resource for.
In the Bypass Cache on Cookie option, you are able to use a .* (dot-star) operator for wildcards and a | (pipe) operator for OR statements.
By default, Cloudflare overrides the Cache-Control headers on cached content. However, you can set Cloudflare to "Respect Existing Headers" on cached content. When this setting is used, Cloudflare will not override Cache-Control headers from your origin.
Users on all plans can access this feature in the Caching tab in the dashboard by scrolling down to Browser Cache Expiration.