Full Instructions on how to transfer a Wordpress site to Workers or how to host a new website on Workers

Developers Workers
1

I was searching online for clear instructions on how to transfer an existing Wordpress site to Cloudflare Workers and publish to a domain, however Cloudflare’s documentation on this is outdated because it says you need to install the “WP2Static” plugin on the wordpress site, however this plugin is no longer available…

So I decided to make my own guide for people to use that is clear, step-by-step and up to date.

  1. On the Wordpress site you want to change over to Workers, install the Simply Static plugin (this works exactly the same as the old WP2Static plugin they previously recommended but is no longer available).
  2. In the Wordpress site, go to Simply Static>Generate and click “Generate Static Files”
  3. This will take some time, depending on your server’s speed and how big your site is.
  4. Note: Simply Static will by default export all the pages that are linked together; if you have “hidden” pages or pages to which there is no link from elsewhere, those won’t be included by default, so you have to go to Simply Static>Settings>Include/Exclude and add the links to those pages to manually add them.
  5. If you want to purposely exclude some pages from the transfer, you can also exclude them in that settings page.
  6. Once the zip file is generated (you must keep the default setting of Delivery method as a ZIP archive), download to your computer and unzip it.
  7. Install the CLI (Wrangler) *Note: something that isn’t mentioned in the Wrangler installation instructions is that you need to have Node.js installed (otherwise the Wrangler install will fail), and also if you are on a Mac, it will make you install Apple Developer tools during the installation process of Wrangler
  8. You will need to create the Workers project:
    $ wrangler generate --site wp-static
    Note that wp-static should be the name of your site, e.g. $ wrangler generate --site mysitename

This will create a directory in your user’s home folder;
The newly generated wp-static directory will contain three things:

  • A public directory, representing the site you want to deploy to Workers. This will be the location of your WordPress site.
  • A workers-site directory, which contains the Workers script that will serve your website content. In this tutorial, we won’t change anything in this folder.
  • A wrangler.toml file, which contains the configuration details for our wp-static file. We’ll populate this file with some information before the project is deployed.
  • When deploying a website using Workers Sites, your static code – your HTML, CSS, and JavaScript – will be uploaded to Workers KV. The location of these files is by default the public folder mentioned above.
  1. Copy the files from your unzipped Wordpress static export folder into this new directory (either by CLI method e.g. cp -R ~/Downloads/wp-static-html-output-<some-tag>/ ./public or just by manually copying and pasting - I prefer to manually copy-paste because then I can see that all the files are there)
  2. Deploying:
    To preview and deploy our application, you need to fill out wrangler.toml — the configuration file for this project. Most of the file has been pre-filled, but you need to specify your account_id and where you want to deploy your application. Fill out the account_id field in wrangler.toml with your Cloudflare account ID.

Using Wrangler’s preview feature, you can quickly upload a version of your site to the Cloudflare Workers preview service and check that the static export looks as expected. Running wrangler dev will upload your static site and preview it in a browser window (the CLI will show which local IP you can access to preview the site).

Limitations of hosting the static Wordpress site on Workers:
There are some features available in WordPress sites that will not be supported in a static site environment:

  • WordPress Forms
  • WordPress Comments
  • Any links to /wp-admin or similar “internal” WordPress routes

If you are looking for instructions on publishing your own DIY HTML site that you created from scratch or using a website builder such as Mobirise, you can follow the below steps from here on (when I say “Wordpress” you can translate that to “my new/existing custom HTML site”)

  1. Deploying to a domain:
    By default when you run wrangler publish, it will publish your site to a *.workers.dev subdomain. However if you are transferring over your Wordpress site to Workers, you probably want to host it on a domain you own.

  • To publish your application on a zone you own, and not a *.workers.dev subdomain, you can add a route key to your wrangler.toml file.

  • You can get your zone_id with the following steps:

  1. Log in to your Cloudflare accountOpen external link and select the desired zone.
  2. If not already there, navigate to Overview in the dashboard.
  3. Scroll down until you see Zone ID on the right.
  4. Click Click to copy below the input.

To add a production environment, pass in a zone_id and route :

wrangler.toml

name = "my-worker"account_id = "$yourAccountId"
type = "webpack"
workers_dev = true
[env.production]# The ID of the domain to deploying to
zone_id = "$yourZoneId"
# The route pattern your Workers application will be served at
route = "example.com/*"

NOTE: this is something very important that isn’t detailed in Cloudflare’s instructions:

# The route pattern your Workers application will be served at
route = "example.com/*"

IF your current wordpress site is published at www.example.com, then you need to change the route to route = "www.example.com/*
For clarity, let’s say your current wordpress site is sitting at www.example.com and all your pages start with www - in this case you have to make sure the route is www.example.com/* to keep the site the same (because it’s technically sitting on www subdomain).

However, if your site is at the naked domain e.g. example.com then you can just keep the default route as example.com/*

NEXT we have to add the DNS records to be able to access the site from the domain name:
Obviously, the domain you are publishing to needs to already be in your Cloudflare account (you are using Cloudflare’s nameservers therefore you manage DNS through Cloudflare)

  1. Delete the current DNS records for your current Wordpress site (understand that this will make the old site inaccessible to the public)
  2. Add an A record for value @ pointing to 192.0.2.1
  3. To make the site accessible at both www and just the naked domain name, add an A record for value www pointing to 192.0.2.1
  4. Publish your Workers site to the domain:
    ~/my-worker $ wrangler publish --env production
  5. IMPORTANT!! This is the most confusing part of this whole setup:
  • Go to your Cloudflare dashboard>the domain of the site you just published to
  • Click Rules to go to the Page Rules page
    DON’T MIX THIS UP:
    There are two settings you have to choose from here:

IF your site is published at www, then you also want people who go to just your naked domain name to be able to access your site and so they don’t experience any differences when going to www.yoursite.com and yoursite.com
So, IF your site is at www.yoursite.com, then add a page rule to forward visitors who visit just yoursite.com to point them to www.yoursite.com (or else they will get the DNS_PROBE_FINISHED_NXDOMAIN error):
Create Page Rule>
If the URL matches: yoursite.com/*
Then the settings are:
Forwarding URL: 301 - Permanent Redirect
https://www.yoursite.com/$1

IF your site is just published at the naked domain e.g. yoursite.com, you want people who visit www.yoursite.com to be also able to access your site without seeing a difference.
Create a Page Rule>
If the URL matches: www.yoursite.com/*
Then the settings are:
Forwarding URL: 301 - Permanent Redirect
https://yoursite.com/$1

  1. Accessing your site for the first time: it will take a few hours for all the DNS changes to properly “sink in” and for the site to be fully “pointed” to Workers. During this few hours time frame, you may occasionally get a DNS_PROBE_FINISHED_NXDOMAIN error but as long as you followed these steps and added your DNS records and page rules correctly and there is no issue with your files in the public directory of the workers site, you should be good (be patient).

  2. Updating your site:
    Each time you make changes to the website files in the public directory, you want those changes to be made visible to the public. So, run ~/my-worker $ wrangler publish --env production and your changes should be made public on the production published domain in a few minutes.

For some ADVANCED/complicated reasons, you may want to have only the naked domain or only www work but this article is meant to describe how to transfer a Wordpress site to be hosted on Workers as static HTML pages. You can also create your own site in a website creator program and just copy the site files from it into the Workers project folder and follow the steps after “#11 Deploying to a domain” to publish your own website to be hosted on Workers.
The benefits of hosting on Workers include a free automatic SSL certificate, extremely fast load times (avg 25ms load speed!) since it’s hosted on Cloudflare’s global server network, you have complete control of your files, and no more Wordpress login/maintenance (all the pages can only be edited with a text/HTML editor from the file directory).
There are a few disadvantages:
Most dynamic content plugins may not work e.g. I had a payment plugin called WP Easy Pay installed on my original WP site, then when I migrated it to Workers, the plugin wouldn’t function anymore because it was meant to work with WP’s system of files etc.
However some simpler plugins such as Contactform7 still work by default once the site is transferred to Workers; you should test each of your plugins by previewing your site how it will look on Workers by running wrangler dev
You can however create your own “plugins” on Workers, since the pages are all in a directory and can be edited as HTML. This gives you 100% control of everything on the site with no limitations; you can custom develop a backend and everything if you know how and make it work because you basically control the entire file structure and HTML of each page.
Note that adding pages may be a hassle once transferred to Workers, because the pages are as plain HTML and can only be edited with a text/HTML editor.
However, you can create a site in a website builder such as Mobirise and easily maintain/update it on Workers because you can just set put the website files into the Workers’ public directory and it will work. Basically, workers will serve anything in the public folder of your site (it doesn’t have to be Wordpress! I have hosted simple 1-page HTML sites etc. which is why I like it).
Transferring your WP site to Workers, or just hosting a new HTML site / offline-website-builder-type-site on Workers is great for someone who has a simple site that doesn’t really change much (e.g. a small business with directory etc.) or you can create a site on e.g. Mobirise and just publish it to Workers and keep editing it that way - easy to use as well.

The goal of this was for me to make it easier for those who are getting started trying to transfer to Cloudflare Workers or setup a new site there, because for me it was a challenge getting information from several articles for something like this. Hopefully Cloudflare copies this or parts of it into their docs so that it’s easy for someone to get started hosting a website on Workers.
P.S. I recommend you go with the Paid Workers plan starting at $5/mo because you will have peace of mind not having to worry about exceeding your 100K requests/per day on the free plan AND it’s faster.

6 Likes
2

Hi, thank you for the full guide! It seems like there are new changes that the guide here might not be the most updated. Can I get some help here below?

I’m stuck at Step 8 here. Doesn’t seem like I get the 3 folders as you mentioned after running “wrangler generate --site” command. There’s only the wrangler.toml file. I can’t find more info on the command in Cloudflare documentation too. Do I manually create a “public” folder in this case? How about the “workers-site” directory, Do I just ignore it?