I have been using Cloudflare to protect my web assets for a really long time. Throughout that time Cloudflare has been improving there capabilities and approximately 2 years ago I decided to move this blog into their worker’s product. This meant that the site was 100% served from their datacentre’s rather than just cached assets as done in the previous config. This had several distinct benefits. It improved the site’s performance significantly, especially for anyone outside of the UK. It effectively became unhackable (as the content is all static) and it meant that if my home connection was offline it would not impact the site. They have made deployment easier so I thought I would document how I am doing this.

The Tooling

• Admin access to your WordPress Site
• Simply Static WordPress Plugin
• GitHub account (Optional)
• Cloudflare Account

The Process

WordPress Plugin Install

The first step is to install and activate the plugin on your WordPress site that generates the static files. I am using the free version of Simply Static by the excellent Patrick Posner.

When the plugin is activated go to the diagnostic page and ensure everything is looking green. In the unlikely event that it’s not then this is likely to be a WordPress version or permissions issue.

Then navigate to the settings section ensure that the settings are set to Zip file delivery and use relative URL’s and then click “generate static files”. The plugin will effectively scrape your site to build up a zip file which is available for download when this is complete.

The activity log shows you the status. My scrape took just over 90s

[2023-05-13 08:32:47] Setting up
[2023-05-13 08:32:48] Fetched 875 of 875 pages/files
[2023-05-13 08:34:23] ZIP archive created: Click here to download
[2023-05-13 08:34:23] Wrapping up
[2023-05-13 08:34:23] Done! Finished in 00:01:36

When this is finished download the zip file to your computer.

GitHub setup

The GitHub setup is optional but I like to use it. It effectively means that I have a backup of my site if needed.

Log in to GitHub and create a new repository. This can be either Public or Private. I have chosen to use a private repo called WordPress

Once this has been done you need to extract the Zip file created earlier and add all of the contents to this Repo.

Cloudflare setup

Log into your Cloudflare account and navigate to the pages section. Then you want to select “Create a Project” As I am using Github I then select the “Connect to Git” Option.

I have previously connected my Cloudflare account to Github for the WordPress repo so I did not need to do anything here. If you have not done this ( Or installed the Cloudflare Pages App in Github you can do this by following this link

Once everything is linked you can give your Project a name and set the production branch to be “Main” You can then leave all the other settings as default

When you hit Save and Deploy Cloudflare will initialize the build environment clone the Git repository and publish your site to a pages.dev based domain. In my case https://wordpress-cpy.pages.dev/

You can check this is working correctly by clicking the visit site link at the top right

The final step is to add my custom domain of jameskilby.co.uk to this site. The DNS for the domain is also managed by Cloudflare so this is a trivial step

If you click the name of the project, In my case WordPress you can then scroll to the Custom Domain section. Click Set up a Custom domain and enter the domain you want to use. When I enter jameskilby.co.uk here Cloudflare automatically changed the DNS entry required but it will list the correct values if you don’t have Cloudflare DNS management.