In this tutorial, we’ll migrate a Wordpress site to Cloudflare Workers, making use of Workers Sites. Serving a static version of your Wordpress site has many advantages over directly exposing your Wordpress site. While Wordpress is extremely powerful and easy to use, the consistent discovery of new vulnerabilities make it an obvious target for hackers to attack. Because Wordpress is built on PHP, each incoming request to your site regenerates a new response on the server – for most websites this isn’t necessary, and leads to scaling issues when your site receives a lot of traffic.
We’ll use the free Wordpress plugin WP2Static, which generates a completely static (HTML, CSS, and JS) version of your Wordpress site. Using Wrangler, we’ll publish the site to Cloudflare Workers. The Workers Sites functionality built into Wrangler includes support for serving and caching your site directly in Cloudflare’s CDN, enabling users to view your site quickly and securely.
To start, we’ll install the WP2Static plugin to export your Wordpress site to a zip file. In your Wordpress admin, navigate to the “Add Plugins” page, by default at
/wp-admin/plugin-install.php. In the search bar, search WP2Static and confirm that the resulting plugin that you will be installing matches the plugin below.
Select “Install” on the plugin and once it’s finished installing, “Activate”.
When your application refreshes, you should see a new section of your sidebar called WP2Static. Navigate to that section and we’ll begin your first static Wordpress export.
From the “Where will you host..” dropdown on the page, select “ZIP archive (.zip)”. WP2Static supports a number of different export types, including manual and automated exports. To make deployment easier, we recommend you select “Allow offline usage” – this will make all the URLs in your Wordpress export relative:
https://mysite.com/logo.png, and will reduce the number of asset errors that could occur depending on your theme and Wordpress setup.
It’s time to do our first export! Select “Start static site export” (it might take a while), and when it completes, save the ZIP file somewhere you can easily find it later.
With an export ready of our site, it’s time to get to work deploying it. To do this, we’ll use Wrangler, the command-line tool for Cloudflare Workers. If you haven’t yet installed and configured Wrangler, check out our Quick Start guide.
Once Wrangler is installed and configured, we can create a new project for deploying our static Wordpress site to Workers. To generate a new project run:
wrangler generate --site wp-static
--site flag indicates that we want to deploy a static site, namely, our static Wordpress site.
The newly generated
wp-static directory will contain three things:
publicdirectory, representing the site you want to deploy to Workers. This will be the location of your Wordpress site.
workers-sitedirectory, which contains the Workers script that will serve your website content. In this tutorial, we won’t change anything in this folder.
wrangler.tomlfile, which contains the configuration details for our
wp-staticfile. We’ll populate this file with some information before the project is deployed.
public folder mentioned above.
Open the ZIP file downloaded from your Wordpress static export, and extract the contents of the ZIP into the
cp -R ~/Downloads/wp-static-html-output-<some-tag>/ ./public
Your directory structure should look something like this:
wp-static ├── public │ ├── 2018 │ ├── 2019 │ ├── 404.html │ └── # More exported Wordpress files ├── workers-site │ ├── index.js │ ├── node_modules │ └── # More Workers script files └── wrangler.toml
To preview and deploy our application, we 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, we can quickly upload a version of our site to the Cloudflare Workers preview service, and make sure that the static export looks like we’d expect. Running
wrangler preview will upload your static site and preview it in a browser window.
When your site looks correct in Wrangler’s preview, you can move onto publishing your project to a domain. For a guide on how to do this, check out the Quick Start.
Note that there are some features available in Wordpress sites that will not be supported in a static site environment:
/wp-adminor similar “internal” Wordpress routes
Deploying your Wordpress site to Workers has benefits for your site’s performance, security, and cost. With a static version of your site being served, you can do a number of things with your live Wordpress installation:
We’re super excited about the future of Workers and Wordpress, and we’d love to hear about what you’re building with them!