I have been reading more and more about Cloudflare Workers and it looking really cool but I couldn’t think of how I might make use of them. Then I came across a post showing how to use the WP2Static plugin to take an existing WordPress site and migrate it into Cloudflare workers. That was the kick that I needed to migrate my site over. What I like about this solution is I get to keep the ease of content creation that goes with WordPress but the speed and security associated with a serverless site.
Therefore what I will do is maintain a WordPress Instance locally. It doesn’t need to be publically accessible & therefore no security risk. The Instance doesn’t need to be online either except if I want to edit content.
The WP2Static plugin supports a number of automated deployments to some hosting platforms. At the moment Cloudflare isn’t one of them so it does require a bit more manual work. Hopefully, they will support this in the future. I think this trade-off is worth it. Cloudflare has an extensive global network in more than 200 cities I’m going to leverage these to run this site.
The process itself is pretty straightforward
Add the WP2Static plugin to your WordPress site like any other WordPress plugin.
Make sure to set the export as a zip file and select offline usage. Click start static site export and then download the generated file, you will need this later.
On your machine, you need to have Wrangler installed. I have installed this with NPM
npm i @cloudflare/wrangler -gThen navigate to your working folder and generate the config I have called my site wp-static
wrangler generate --site wp-staticThis will then generate three things
- Public Directory
- Workers-site Directory
- Wrangler.toml file
Then take the zip file generated earlier and drop the contents of it into the public folder.
The next step is to add the relevant config to your Wrangler.toml file You need to get the Zone Id and Account Id from within the Cloudflare portal. Below is an example of what my site looks like.
name = "wp-static"
type = "webpack"
account_id = "c9xxxxxxxxxxxxxxxxxxd"
workers_dev = true
route = ""
zone_id = ""
[site]
bucket = "./public"
[env.production]
# The ID of your domain you're deploying to
zone_id = "9881xxxxxxxxxxx4"
# The route pattern your Workers application will be served at
route = "jameskilby.co.uk/*"Executing “Wrangler Preview” will build and deploy the site and launch a preview of it in your browser to check the site.
If it all looks good
wrangler publish will deploy it to a workers.dev based domain in my case I have registered kilby.workers.dev with Cloudflare so the site becomes:
https://wp-static.kilby.workers.devThe final step is to publish calling the –env production parameter in my .toml file.
wrangler publish --env productionThis is the final step and automatically deploys to Cloudflare under the jameskilby.co.uk domain.
Issues:
I have had to change a few things with the move to workers. I am now having to inject Google Analytics statically into the website. Previously I was dynamically injecting this on runtime however that didn’t appear to work with the new setup.
The way I have deployed the site means none of the dynamic elements of WordPress will work, however, I wasn’t using comments etc so this isn’t a big thing.
Performance:
The Cloudflare workers site Is much snappier than the native WordPress site even when it was using the Cloudflare CDN. It will also perform consistently globally whereas the old site would perform worse the further away from the UK the visitor was. This was due to only having a single origin server (running from my lab in the UK)
Testing with gtmetrix.com before and after the fully loaded page time has reduced to 1.6s from 5.5s
Cloudflare reports on the CPU consumed as part of running the side.
Costs
Due to the way this is using Cloudflare Workers it uses an element called Workers KV this is the global low latency Key-Value store. This is unfortunately not available in the free tier. Therefore I have upgraded to the Workers Unlimited plan for $5 a month something that I think is good value for money.
