How do I cache static HTML?

  1. Log into your Cloudflare account.
  2. From the dropdown menu on the top left, select your domain.
  3. Click the Page Rules app in the top menu.
  4. The first step is creating a pattern and then applying 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 be 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:
    [/static/ subdirectory for static HTML pages]
    [.shtml file extension to signify HTML that is static]
    [adding static=true query parameter]

    You'll want to design the pattern to only describe pages you know are static.
  5. Click Cache everything in the Custom caching dropdown menu.
  6. Click Add rule

If you notice that the HTML is not being cached, despite the cache everything rule, you need to override the origin cache directive with an "Edge Cache TTL" setting. Please note that you still need to set the cache everything setting in Cloudflare even if the origin is sending the correct cache TTL headers because we don't cache HTML by default.

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, then Cloudflare will not cache the resource, unless a Page Rule is set to cache everything and an Edge Cache TTL is set.

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. 

Additional Page Rule options such as "Cache on Cookie", "Cache By Device Type" and Custom Cache Keys are available to our Enterprise customers.

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".


Not finding what you need?

95% of questions can be answered using the search tool. This is the quickest way to get a response.

Powered by Zendesk