CloudFlare Page Rules

Page Rules are conditions that your site will use. Page Rules let you control which Cloudflare settings trigger on a given URL. Only one Page Rule will trigger per URL, so it is helpful if you sort Page Rules in priority order, and make your URL patterns as specific as possible.

Remember that a Free Account can only get 3 page rules. 


Here is an explanation of page rules on the cloudflare site.

Here are the 3 best page rules to use with a free account.

HTTPS / SSL

CloudFlare allows a shared SSL cert and can force your page to operate via https.

Make sure this is the first rule if you add other rules.

  1. Go to the Crypto section of your dashboard
    1. Select Full under SSL (Digital Ocean use Flexible)
      1. It can take a couple hours for the SSL cert to be active.
  2. Go to Page Rule
    1. Click Create Page Rule
    2. Enter your domain like this: 


      http://*yourdomain.com/*
    3. Select Always use https://
  3. Instead of using a Page Rule to force HTTPS, CloudFlare now exposes that option directly, under the "Crypto" section.
  4. Pantheon Hosted Sites
    1. Easier to follow their document after you complete the above steps.
  5. Digital Ocean Hosted Sites
    1. Wordpress: just use this plugin Really Simple SSL , since we can only use Flexible SSL, this will take place of configuring Apache or Nginx


Cache Files Directory

Since the files themselves in the cache directory will most likely not change that often, we can cache them for speedier page loads

  1. Go to Page Rule
    1. Click Create Page Rule
    2. Enter your files directory like:

      *yourdomain.com/sites/default/files*
    3. Enter the Following Settings.
      1. Browser cache expire TTL → 5 days (or whatever you want, make sure it is less then edge cache below)
      2. Cache Level → Cache Everything
      3. Edge Cache TTL → a month (or whatever you want)
    4. You can test to see if this is working by running this command in your terminal

      curl -svo /dev/null https://yoursite.com/sites/default/files/filename.jpg
    5. If you see CF-Cache-Status: HIT in the header, then you are caching files.


If you are using core aggregation on D8 or Advanced Agg in D7, you don't need to do the next rule: Cache Theme Directory as all css and js are stored in sites/default/files.

Cache Theme Directory

The theme directory on live doesn't get changed too often.  Only CSS changes usually happen, in the case you can purge the cache via the cloudflare dashboard.

  1. Go to Page Rule
    1. Click Create Page Rule
    2. Enter your files directory like:
      1. D7

        *yourdomain.com/sites/all/themes*
      2. D8

        *yourdomain.com/themes*
    3. Enter the Following Settings.
      1. Browser cache expire TTL → 5 days (or whatever you want, make sure it is less then edge cache below)
      2. Cache Level → Cache Everything
      3. Edge Cache TTL → a month (or whatever you want)
    4. You can test to see if this is working by running this command in your terminal

      curl -svo /dev/null https://yoursite.com/sites/themes/themename/stuff.css
    5. If you see CF-Cache-Status: HIT in the header, then you are caching files.


Advanced Page Rules on the Pro plan and Up

If you have paid plan you would like to follow this document to setup advanced caching page rules

Make sure you are forcing https as described above. If your site is on Pantheon - make sure you setup all of the redirects to additional domains through CloudFlare and redirects are removed from settings.php otherwise you may run into infinite cache loop.

If your site is on Apache hosting (e. g. Acquia) then make sure you don't have httaccess redirects from additional domains and into https. And all of them are powered through CloudFlare UI.


Additionally it is also a good idea to exclude admin pages from caching.

Setup no caching on these ones.

Read more in this documentation

The result you are aiming for is  cf-cache-status: HIT in the headers of your network tab in browser inspector after you load the page a couple times.

If the result says DYNAMIC - your page cache isn't working.

If the result says BYPASS - cookie is in place - check that your cookie exception is correct and you are not logged in.

Troubleshooting

It is essential to troubleshoot your cache. Go through multiple browsers like Safari and IE 11 and check that images are still loading, JS and CSS are still working as expected.

Tip: if your JS is not working turn off / on (switch to the opposite state) aggregation in Drupal performance menu. Save and clear the cache.

Go to CloudFlare and purge.

Turn on aggregation back and clear the cache again - it may take it some time to propagate.

Check these elements on every deployment.

Check search and time sensitive views - make sure they still update as expected.