Cloudflare Workers & WP2Static: Deploy Static WordPress

Pros (+)

  • Under 5ms cold start.
  • Highly secure.
  • Inexpensive hosting/scaling.

Cons (-)

  • No dynamic content.
  • Limited functionality.
  • Updating content.

What’s in it for me? We’ve got you covered – regardless of ability.

  • Beginners – if Cloudflare Workers are too complex, you may prefer to concentrate on the WP2Static plugin aspects, as that is much easier.
  • Intermediates – should be find this useful to get started with Cloudflare Workers and static WordPress sites. It does take a bit of perseverance, however.
  • Power users – can skip over sections you already know, but it would be good to have your feedback, as to how this article can be improved.

Prerequisites: you will need to be familiar with Node modules and the command line interface for working with Wrangler – Cloudflare’s own CLI tool for Workers.

1. Cloudflare Workers Explained

What the heck are Cloudflare Workers? They are essentially mini JavaScript applications that enable developers to deploy apps or websites on the Cloudflare CDN.

This takes advantage of Edge computing, where copies of the application are distributed on edge nodes near to the end user. Cloud computing, on the other hand, is usually done from large data centers.

Every time an HTTP request is made, the Worker fetches a copy of the application and serves it to the user.

The main benefits of Cloudflare Workers and static applications in general are:

  • Supreme security compared to traditional origin servers.
  • Inexpensive to host – starting from free and paid from $5 per month.
  • Quickly scalable – 200 data centres around the world.
  • Fast start from cold – Serverless Benchmark.
  • Reduced complexity and increased reliability from serverless infrastructure.

How can Cloudflare Workers help a WordPress user?

The plan is to convert our WordPress test site into a static HTML website and compare it against a traditional WordPress installation running on regular Cloudflare.

It’s still the same CDN, but the static site will never have to drop off to an origin server to retrieve content.

Workers have been on my radar for a while and this seems like a perfect excuse to try them out. Not to mention TechRadar Pro rank Cloudlfare CDN 1st in 2020, another good reason to put your trust in them.

2. WP2Static WordPress Plugin

WP2Static WordPress Plugin
WP2Static WordPress Plugin

WP2Static is the WordPress plugin we’ll be using to convert our site from a dynamic WordPress site to a static HMTL website.

While WordPress itself is dynamic, most people use caching plugins which serve static pages. They also tend to use a CDN so you could say your average WordPress is more of a hybrid, as it’s both dynamic and static.

For a detailed explanation of WP2Static plugin, you can can have a look on the WP2Static website or WP2Static WordPress.org.

This is the first time I’ve used Workers or WP2Static and they were both easy to use, but like anything of this nature it will test your patience occasionally.

Options to consider:

  • Serve the static version from your primary domain – most likely scenario – https://mywebsite.com.
  • Hide WordPress behind a security screen, such as Cloudflare Access, or locally on your own computer – ideal for a single administrator.
  • You can also create a subdomain called private and host WordPress there – not the best option, but easy to do. Then just don’t tell anyone about it – https://private.mywebsite.com.
  • Can downgrade to cheap hosting and save big money on a busy site.

Downside of static sites:

  • WordPress comments won’t work – need to use Disqus or alternative solution.
  • Eccommerce is difficult, but Snipcart is one solution.
  • Forms won’t work, but can use alternatives such as Google Forms.

Ideal sites for static conversion:

  • Portfolio sites or any site that doesn’t change much.
  • High-traffic sites.
  • Client test sites.

3. Creating a Subdomain

Seen as though this is only a test and the changes are temporary, it’s pointless hiding or moving my main domain. Therefore, the easiest option is to create a subdomain called static for hosting the freshly minted static version of WordPress, while leaving our regular WordPress where it is.

As discussed, you will want to do this the other way round on a permanent static site.

I’m with Hostinger so after a bit of scouting around on Google, I found out how to make a subdomain and point it in the right direction.

Hostinger hPanel Subdomains
Hostinger hPanel Subdomains

Of course you will have to follow whatever instructions suit your own hosting provider, but I’m guessing it will be similar.

Create New Subdomain Hostinger
Create New Subdomain Hostinger

Once created, it was then a case of checking it’s all sorted on Hostinger’s end.

Hostinger List Current Subdomains
Hostinger List Current Subdomains

Creating a subdomain will add a new folder in your public_html file system, which we would normally use for our static assets. However, that is the option we would use for a normal WordPress website.

For the test site, we’ll be skipping Hostinger altogether and serving them directly from the edge.

Hostinger Domain Management
Hostinger Domain Management

The last step with the subdomain is to point it in the right direction, which is at our primary domain. You can see from the image above that it’s simple enough. Just copy the IP address from the boxes above.

4. Preparing for Static Conversion

Most WordPress sites will need a few things removing so the links work correctly. 

  1. Turn off caching plugins – as you won’t need any CDN links, etc.
  2. Autoptimize or Fast Velocity Minify can be left on, but remove any CDN links.
  3. If you have any links to icons or service workers in your header you may need to adjust them or move icons to your media folder and alter the links to suit.
  4. Don’t be too concerned, though. You can quickly run your static site through WebPageTest to see if everything is okay… otherwise you’ll get a few red bars like I did. It only takes minutes to alter them and download an updated copy of your site.

5. Installing WP2Static Plugin

From your WordPress dashboard, click plugins, add new and then find WP2Static. Check it matches the image below then install the plugin.

Add Plugin - WordPress
Add Plugin – WordPress

You can also have a quick look at the review for the plugin, plus all the other things it offers like support and a discussion forum.

WP2Static Plugin Installation
Wp2Static Plugin Installation

Once you’ve downloaded the plugin, activate it and it should do an automatic scan. However, mine got stuck so I had to refresh the page.

Crawling Initial File List
Crawling Initial File List

This isn’t meant to be a deep dive into everything this plugin is capable of, but rather enough to get you going with a static site and specifically a WordPress derived static site.

You’ll notice there are plenty of options, but I followed the initial guidance of Cloudflare’s own tutorial, which worked out well.

The only tricky bit was with the Wrangler CLI stuff. However, it should be easier once you know the pitfalls, which I’ll explain shortly.

Once the plugin says the static site export is completed, you can click the bright green button that says Download ZIP.

Process Complete Download Zipp
Process Complete Download ZIP

That’s all there is to it, we’re ready to install Wrangler CLI.

Cloudflare Workers Wrangler CLI Github
Cloudflare Workers Wrangler CLI Github

If you want to do a bit of reseach on Wrangler before you start, there’s some documentation on Github for Wrangler CLI.

6. Installing Wrangler CLI

The first thing you’ll need to do is install Wrangler CLI on your computer via Node modules. Unfortunately, that is something outside of this tutorial, if you’re unfamiliar with the process.

To get cracking you need to open the Node.js command prompt on your local machine and type the following: npm i @cloudflare/wrangler -g

Cloudflare Wrangler NPM Installation
Cloudflare Wrangler NPM Installation

Next you should get a report stating how many packages have been installed.

Cloudflare Wrangler Installation Window
Cloudflare Wrangler Installation Window

Now that Wrangler is correctly installed, we can tell it to create a static site directory by typing: wrangler generate –site wp-static

Wrangler Generate Static Site
Wrangler Generate Static Site

This should give you some more feedback… to change into the new directory type: cd wp-static

Wrangler Generate Static Site Done
Wrangler Generate Static Site Done

Now we can drop back to the zip file we downloaded and extract it to the public folder of wp-static.

WP-Static Directory Structure
WP-Static Directory Structure

Next step is to go to Cloudflare and, I’m presuming you’re already on Cloudflare here, but if not create a free account and set it up for your website, as you’ll need a Zone ID, which the Worker on its own doesn’t have.

You will also need to add your subdomain to Cloudflare to ensure that it is pointing correctly to the Workers CDN.

Cloudflare Subdomain Records
Cloudflare Subdomain Records

Then it says in the documentation you can use the free workers account, but when I tried Wrangler kept on saying that for sites you need to sign up for the paid option, which is only $5 per month.

I tried using my own domain name and also the free Cloudflare Workers.dev subdomain and it still insisted that I’d have to upgrade. Obviously not a big deal, but it’s only for a test site so I didn’t want to sign up unless it was necessary.

From what I can gather, the free version is for simple apps not websites and why they’re using the Zone ID to differentiate between them.

Cloudflare Worker Plans
Cloudflare Worker Plans

An added bonus for the paid version is that it’s slightly faster, but from what my tests confirm I’m not certain if that is entierly true. Again, it’s no big deal.

Go to the Worker section of your Cloudflare account and click Get your API token from the menu. Then select Create Token as below.

Cloudflare will present you with several options, but it’s important to select the correct template, which in our case is the template for Workers API. Failing to do so will cause you problems authorising the Worker from Wrangler, as you will be trying all night if the authorization levels don’t match.

Cloudflare Worker API Token Correct Permissions
Cloudflare Worker API Token Correct Permissions

The API token is only presented to you once, so either leave the window open for a while so you can copy it again or save it temporarily in a text document.

If you mess up, all you need to do is select the three dots and roll the token, which resets it.

Cloudflare Workers API Token Summary
Cloudflare Workers API Token Summary

We also need to edit the .toml file with the correct information. Cloudflare do provide a few variations in their own tutorial, but it was a bit misleading, as it gives the impression you can use all three options at once.

From my trial and error, it seems like you can only have one per file so use the hash key to comment any out for later use or simply delete them. Thankfully Wrangler does provide helpful messages to point you in the right direction.

Here’s my wrangler.toml file for reference.

Wrangler Toml File
Wrangler Toml File

To edit the .toml file you can use any code editing suite like Sublime Text, Visual Studio Code or an ordinary text editor on your laptop.

  • You can put workers_dev = false or just comment it out with a hash symbol.
  • Swap my account_id with yours.
  • Swap my zone_id with yours.
  • Alter the route to your own domain name.

Back to Wrangler…

Once everything is setup correctly with the wrangler.toml file, it’s just a case of authorizing our development environment with Cloudflare, as they don’t like baddies!

This is the only part of the process that caused me a bit of pain, but it wasn’t significant and hopefully my suffering will make your life easier.

Wrangler Config API Token
Wrangler Config API Token

Don’t get mixed up with your API Token and your Global API Key. They’re two entirely different things.

You’re almost there, let’s try and run the wrangler preview command to tell Wrangler to upload our site into a browser window for pre-publishing checks.

Wrangler Preview Worker Site Success Message
Wrangler Preview Worker Site Success Message

If you’re happy with the results in the pop-up browswer window, you know the next step. Let’s publish our static site.

To do that you type: wrangler publish

Wrangler Publish Worker Site Success Message
Wrangler Publish Worker Site Success Message

That’s it – we’re done. 🙂

Wrangler Commands

  • wrangler publish (publishes your static site to Cloudflare CDN).
  • wrangler preview (opens a browswer window for evaluation).
  • wrangler preview–watch (watches your local folder and updates the browser with changes).
  • wrangler publish–env production (if you have an [env.production] in your .toml file)

The full list of Wrangler commands are available on Cloudflare.

7. Benchmarking Static Vs Regular WordPress

Sometimes in life we get caught up in the hype. That’s life in general, but it’s even more likely when you are into performance. People who tune fast cars are always after more power and speed. Computer nerds, like me, always want faster chips and higher scores. You know how it is!

The question is then: are Cloudflare full of you know what or are Workers all they’re cracked up to be?

Well there’s only one way to find out: let’s test them out.

To give you a bit of a clue, I was a bit disappointed when the advert says cold starts up to 50 x faster than competitors, then when I clicked the link they weren’t even the fastest one – Amazon was.

50 x seems like a bit of an exaggeration and in truth it probably really is.

Blame that on the marketers.

After doing more digging, I’ve found an older article on Medium from Bernd Strehl so it seems that the times vary from day to day and week to week. That’s obvious, but I didn’t expect the results to be so varied.

Serverless Benchmark Results
Serverless Benchmark Results

Setting the ground rules:

For simplicity I used Key CDN’s performance test initially, as it checks TTFB from 14 locations. You can probably guess it was a Saturday night when I did because even India was fast.

To make the results as relevant as possible, I turned off Stackpath on the dynamic site. This should speed it up slightly. Something that I’ve explained before is 200 Cloudflare edge nodes plus Stackpath’s 45 doesn’t equal 245. 

I can hear you now saying of course it does. 200 + 45 is 245. Yes in mathematics. Not in website speed.

This is because using Cloudflare’s cache everything page rule ensures your full site is cached on the edge at 200 locations.

Benefits of using 1 CDN over 2

“More CDN’s the better” is a cliche that is spread by people who don’t think things through.

Using 2 CDNs adds an extra hop from one to the other.

Also the second CDN is effectivey a bottleneck so that 200 becomes more like 45 than 245. 

Imagine 200 McDonalds, but everytime you go to one for a late, they have to nip to one of 45 coffee shops to get the ingredients.

It would be much better if the boss at McDonalds kept the ingredients in his own stores. Likewise the best alternative would be for the coffee shop boss to sell lates also. You could go directly to him then.

  1. 200 servers only – this is the best option – Cloudflare CDN.
  2. 45 servers only – this is the second best option – Stackpath CDN.
  3. 200 + 45 server together – sounds the best but is actually the worst option, as you’re always restriced by the smaller number and the extra latency.

So why do I bother using Cloudflare + Stackpath? Just for passing cookie rules in GT Metrix, plus it’s good for experimenting with various setups and it’s only $10 per month.

First up was regular WordPress which I’m running on Cloudflare CDN with my special Cloudflare setup that I configure for every site that I build, as it really helps turn an ordinary website into digital lightning.

Key CDN Performance Test Parallaxsite
Key CDN Performance Test Parallaxsite

Now with the big man talk coming from Cloudflare’s own website, understandably I was expecting something special. Turns out while it was good, it wasn’t anywhere near what I dreamed of. 

Perhaps my disappointment stems from the fact my sites are rapid anyway so it’s hard to improve on them, even with Cloudflare Workers as it turns out…

Static WP Site Key CDN Performance Test
Static WP Site Key CDN Performance Test

Hard to believe that they’re almost identical, which is a good thing in many ways. That tells us that Cloudlare’s free tier really does use the same CDN as the paid option.

Now we’ve got something to go off, let’s drill down a bit more and see what we can find. I’m feeling like Gil Grissom after saying that. CSI Page Speed Tweaks.

WebPage Test gave us another set of results that you could split with a hair’s hair.

Standard WordPress WebPage Test
Standard WordPress WebPage Test

You can see from the TTFB of > 200 ms that Cloudflare’s CDN is superb for free. What an amazing company, can’t fault them for what they offer the Internet community.

Here’s the same test for our static test site.

Static HTML Website WebPage Test
Static HTML Website WebPage Test

These are probably the closest tests that I’ve done, which is understandable in many ways as they’re all served from the edge on Cloudflare’s CDN.

Yes the first site is dynamic, but like I first explained modern WordPress sites are more like hybrids. This is good because you can have the best of both worlds.

However, speed isn’t everything. While this might not be a problem for the small guy, if you get a massive uptick in visitors and Cloudflare has to drop back to your origin server occasionally, it might put your basic hosting installation under pressure. 

The good news is that is a problem everyone would like to have. If you’re getting lots of traffic the chances are you can then afford to pay for it with either better hosting, a VPN or dedicated server.

Alternatively you can embrace the static route fully, as long as your to-do list allows. It’s easily overcome for simple forms and the like, but a busy shop front is probably better off on Shopify or Woocommerce rather than a purely static site.

Lastly, let’s have a quick look at PageSpeed Insights to see how they perform.

PageSpeed Insights Mobile Test WordPress
PageSpeed Insights Mobile Test WordPress

As if you needed me to tell you they’re exactly the same again. You really do need a magnifying glass to tell them apart.

The tests were identical on mobile and desktop, but the mobile one is included because it’s usually the harder test to pass and also most relevant. Plus mobile views are increasing every year compared to desktop.

PageSpeed Insights Mobile Test Static
PageSpeed Insights Mobile Test Static

8. What We’ve Learned

If this article has proven one thing, it’s that dynamic sites are definitely on the same plane as their static cousins, presuming your CDN is set up correctly.

Like most things in life, marketing and gossip has a lot to do with perception. However, you can’t beat a good old speed test to sort reality from fiction.

  1. Cloudflare Workers are very fast.
  2. WordPress is also very fast served via Cloudflare.
  3. WP2Static is a solid app for static site conversion.
  4. Wrangler CLI is Cloudflare’s very own Swiss Army knife.
  5. You can’t go wrong splashing $5 on Cloudflare Workers.

There isn’t a perfect website solution – yet. Most choices are a compromise, but with clever deployment of dynamic websites like WordPress, there’s no real need to jump ship to the Jamstack just yet.

Forget static versus dynamic: hybrid is where it’s at.

Until next time, folks. Keep on getting faster – it’s still as important as ever.

8. *Update* Cloudflare Page Cache

Patrick Meenan Cloudflare Caching Plugin
Patrick Meenan Cloudflare Caching Plugin

I’ve since found an easier method of hosting your WordPress on Cloudflare Workers, but you can still keep all the benefits of a regular setup.

Though it’s not truly static like WP2Static is, it’s still served from the edge using Workers and Pat Meenan’s Caching Plugin or you can just use the script in functions.php.

You literally get the best of both worlds, your standard WordPress admin dashboard with content cached on the edge. Instead of packaging your site up for publishing, this method is automatic. Surprisingly the plugin isn’t that popular, but it’s a shame because it’s really useful. I think it just needs more people to find out about it then it could do really well.

Share This Post

LinkedIn

Leave a Comment