In part one I discussed the benefits of using Cloudflare to cache our generated HTML in it’s network of 194+ edge nodes, in order to get maximum speed and reduce load on our origin server.  So let’s go ahead and do it now.

I’m assuming that you’ve already got a Cloudflare account and it’s in use for your website.  If not, please go ahead and setup Cloudflare, it doesn’t take long at all.

Firstly we need to activate Workers on your Cloudflare account (if you haven’t already).  When you go to the Workers tab you’ll see a button that says “Enable Workers” which you’ll need to click on.  Then depending on your account level, you’ll need to setup billing, as there is a cost to using Workers, but it’s really minimal for the benefit that you get, especially as the cost is shared across all domains under the same account.

Now that Workers are activated, the button now should say “Launch Editor”. This is a useful shortcut into the editor for a particular domain, but we need to backup slightly before we proceed.

If you go up to the Cloudflare dashboard home, you should see a list of your domains on the screen.  On the right of this is the button to access the Workers dashboard, which looks like this…

On the submenu, the second tab is “KV” – this stands for “key-value” and these are stores of application data in the Cloudflare network that Workers can use, in our case to store the HTML of each page.  So here you will need to enter a name (eg. “WordPress Edge Cache”) and click the “Add” button, to create a new store.

If you want to create a standalone Worker then you can do that from the dashboard here, but to create one for your domain, you now need to go back to your domain and the Workers tab where we started – now click the “Launch editor” button there.  On the left side there should be an “Add script” button which you need to click next.

You need to name the script now.  Personally I base this on the domain, so my one for this site (yes, I am dogfooding) is called “riklewis-com”, but go with whatever you want.  Then click the “Edit” button next to your new Worker.

At this point you need to go to Cloudflare’s edge-cache-html.js example file on Github and copy the contents of that javascript file and paste it into the Code editor, replacing all of the default contents.

There are some global variables at the top, but we’re going to ignore this…

const CLOUDFLARE_API = {
  email: "", // From https://dash.cloudflare.com/profile
  key: "",   // Global API Key from https://dash.cloudflare.com/profile
  zone: ""   // "Zone ID" from the API section of the dashboard overview page https://dash.cloudflare.com/
};

If we weren’t using the Worker KV then you could alternatively use these values.  However, the whole cache then has to be cleared each time, instead of a single page, which really reduces the benefit.  This is especially true for a site with a blog where content changes or is added to on a pretty regular basis, but a lot of the other pages will remain unchanged.

Because we are using the Worker KV option, you need to find the “Resources” option on the left side and click that.  In the “KV Namespaces” section you’ll need to click the “Add Binding” button.  You need to set the Variable Name to be “EDGE_CACHE” (unless you want to edit the script to use a different variable) and then select the KV that you created earlier, and click “Store”.

You can now go back to the “Code” option and click the “Save” button, as we have finished creating the Worker itself.  You’ll get a prompt like this one below…

This is expected when creating a new Worker, so you can click “Save”.  Now if you go back to the Workers tab (or click the “Dashboard” link in the breadcrumbs navigation) then below the “Launch Editor” button is an “Add Route” button, which is what you need to do next.  When you click this you’ll be asked to enter a route, which for this website is “www.riklewis.com/*”.  It’s really the URL that you want to cache everything under, using a wildcard to match any path within that domain.  You may wish to be more specific, but for me, I want the whole site to be covered by the cache.  You then need to select the Worker that you’ve just created (eg. “riklewis-com”) and then click “Save”…

This route should now be listed on the Workers page, and you’re all done, on the Cloudflare side.

The final step is to install and activate the Cloudflare Page Cache WordPress plugin.  There are no settings for this plugin, it simply integrates with the Worker that we’ve just created, setting headers that control the cache and clear out pages when they have been edited within the WordPress admin pages.

If you access the Network tab in the Developer console, refresh your website and click on your initial page request, you can see the page cache working…

As you can see, the X-HTML-Edge-Cache-Status header says “Hit”.  This is set by the code that we copied into the Worker above, and proves that it is working as expected.

Please remember when testing this that you need to be logged out, as content is only cached for anonymous visitors, not those who are logged in.  You can avoid logging out by opening an Incognito window to view your website as an anonymous user would.

If you want more details, I’ve covered this fully in my Setting up Cloudflare and WordPress course, available on Skillshare and Udemy – the course needs updating now that the Workers dashboard has been added though, which changes the workflow slightly.