Drupal is a Content Management System, when used in conjunction with Cloudflare it is possible to cache HTML of non-logged in users alongside other static content likes images, scripts and stylesheets.
In order to do this, you can only cache pages of Anonymous Page Views (visits by users before they log-in). To implement this we can use the "Cache Everything" Page Rule in conjunction with "Bypass Cache on Cookie".
Note that the Bypass Cache on Cookie Page Rule option is only available on the Business and Enterprise plans.
Step 1: Respect Existing Headers
Be sure to set Cloudflare to respect Cache-Control headers from your origin web server, otherwise you may find Cache-Control headers are overridden with by Cloudflare with the value set in the Browser Cache Expiration option, meaning browser cache collisions become problematic. In order to set the "Respect Existing Headers" option, visit the Caching tab in the Cloudflare Dashboard:
Scroll down the page to find the "Browser Cache Expiration" option, and select the "Respect Existing Headers" value:
Step 2: Set Bypass Cache on Cookie
We can then set-up the rules that we want to apply. "Cache Everything" will instruct Cloudflare to cache static HTML. When the "Bypass Cache on Cookie" rule matches the criteria we set, Cloudflare won't cache HTML (whilst static images and other files will still be cached). We can do this in our Page Rules settings:
We will set Cloudflare to bypass on the default Drupal session cookies, if you use additional cookies in your Drupal site you must ensure these are in the Regex statement: SESS.*|phpsessid=.*
You can set the Page Rule clicking "Create Page Rule" and setting the necessary variables:
The Page Rule is set to match the entire domain using the * wildcard operator on the Drupal installation path, we set the Cache Level to Cache Everything and set a Bypass Cache on Cookie rule for the Drupal variables. The Bypass Cache on Cookie Rule will override the Cache Everything rule when a user is logged into Drupal.
The Edge Cache TTL setting sets how long a Cloudflare cache server should keep cached files in it's cache.
Step 3: Done!
We are now done; when Cloudflare is serving cached files, a CF-Cache-Status: HIT header will be sent back to the browser.