Migrating W3Things from Vercel to Cloudflare Pages

Published:

For a long time, I've been meaning to move W3Things, along with several other open-source projects, from Vercel to Cloudflare Pages. As of today, W3Things now runs on Cloudflare Pages.

In addition, this post covers some of the latest website improvements, a free new product launch, Cloudflare-related news, and a bit more.

Migrating W3Things from Vercel to Cloudflare Pages

Why Not Vercel?

You may wonder why I switched over to Cloudflare Pages when the website was functioning just fine on Vercel. Honestly, there's no specific reason for doing so. In fact, Vercel was fine for the scope of W3Things. It's just that I prefer to house all my projects under the same platform unless there's a reason to use a different web host.

To explain a bit, when I first transferred W3Things from WordPress to Eleventy (11ty) back in late 2023, I was already using Vercel for my other apps and sites. Thus, I picked it as my first choice for the custom W3Things website too.

Furthermore, as a developer, I like to try and experiment with new and different technologies and stacks. So, when I finished Metploy (React), I published it to Cloudflare Pages, mainly to try out the Pages platform.

After testing, Cloudflare Pages turned out to be good and seemed like a good fit for my projects. Fast forward to today, I decided to transfer all my existing sites and projects over to it. If you're interested, you can view all those projects on my GitHub profile or in the screenshot below.

Cloudflare Pages projects.
Cloudflare Pages projects.
View full size

Interestingly, I was already using Cloudflare for my older projects even before Vercel or Netlify (pre-2022), so it was sort of a natural choice for me in the long run.

The Takeaway

Here's the thing. If you think about it, it's really not a good practice to have multiple websites and apps scattered across different platforms, especially if they all can be managed from a single dashboard or web host. It improves the developer experience, reducing mental overhead to monitor and maintain projects in the long run.

Sure, not all projects and apps can be run on or hosted on the same service for many technical and scope reasons, but I'm mainly referring to the ones that can be, especially simpler and static websites.

That being said, Vercel has been quite helpful and delivered so far. The result of that is right here, powering W3Things without any issues for years up until now. Now, that doesn't mean I'm completely moving away from Vercel — I may still use it in the future if there's an application for it. I personally believe that it's more suitable for teams and organizations, or full-scale projects, such as React or Next.js.

The Migration

Fortunately, W3Things wasn't tied to any specific Vercel features (meaning, no vendor lock-in), so moving the site was rather a straightforward process, and one that also encouraged me to make a few quality-of-life updates and enhancements as part of the transition.

Guess what? The only file I needed to update was the headers (or vercel.json config) file, as Cloudflare Pages uses the _headers plain file format to configure and parse HTTP headers.

Vercel vs. Cloudflare Pages Headers File

This was the vercel.json config file that contained two site configurations and various headers:

  "cleanUrls": true,
  "trailingSlash": true,

  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        { "key": "X-Content-Type-Options", "value": "nosniff" },
        {
          "key": "Referrer-Policy",
          "value": "strict-origin-when-cross-origin"
        },
        { "key": "Strict-Transport-Security", "value": "max-age=31536000" },

        {
          "key": "Permissions-Policy",
          "value": "accelerometer=(), autoplay=(), camera=(), display-capture=(), encrypted-media=(), fullscreen=(), geolocation=(), gyroscope=(), magnetometer=(), microphone=(), midi=(), payment=(), picture-in-picture=(), publickey-credentials-get=(), usb=(), web-share=()"
        }
      ]
    }
  ]
}

This is the newer, more minimal _headers file:

/*
  X-Content-Type-Options: nosniff
  Referrer-Policy: strict-origin-when-cross-origin
  Strict-Transport-Security: max-age=31536000
  Permissions-Policy: camera=(), geolocation=(), microphone=()

As you can see, I removed lots of extra permission policy headers during the transfer, as they served no purpose for W3Things.

The cleanUrls and trailingSlash settings are also no longer applicable. Looking at them now, they weren't needed in the first place anyway (since Eleventy outputs all pages inside folders in a consistent way, with trailing slashes).

Speed Test Results — Before and After Migration

I also tested one of the site pages via Google PageSpeed Insights (Lighthouse) to capture the before-and-after performance results just for fun and quick insights, not that I was expecting any significant changes to the overall metrics. Below are the results of PageSpeed Insights.

Before the migration (on Vercel):

Speed results before the migration (on Vercel).
Speed results before the migration (on Vercel).
View full size

After the migration (on Cloudflare Pages):

Speed results after the migration (on Cloudflare Pages).
Speed results after the migration (on Cloudflare Pages).
View full size

I should mention that I also optimized several site components during migration, so the post-migration result may reflect those changes.

Website Optimizations and Updates

As I planned the migration, I took this opportunity to optimize a few site components, resulting in better overall site performance. Most of these updates are internal, meaning you won't notice any UI changes, but you should notice faster page loads across the site. ⚡

Apart from the header file changes above, here are some other notable updates from this and the past week:

  • Added fetchpriority="high" to relevant (above-the-fold) images to prevent CLS issues
  • Optimized the subscription forms to now properly lazy-load (on user scroll)
  • Updated DNS prefetch list with relevant domain names
  • Removed redundant preconnect origins
  • Fixed a few JSON schema file issues (FAQ, Product)
  • And several Eleventy-specific changes and general codebase refactors

Free CSS Starter Pack

Last week, I launched a free new goodie pack for the subscribers — the CSS Spacing and Layout Starter Pack! 🎁

It's packed with various responsive Grid and Flex layout patterns, along with commonly used margin, padding, and gap utilities as plain CSS classes — ready to copy and paste. These are the same CSS styles that W3Things uses under the hood, plus extras, so you can see how they work/look in action.

CSS Spacing and Layout Starter Pack.
CSS Spacing and Layout Starter Pack.
View full size

It's highly useful for jump-starting new web projects, especially the ones that are mostly static in nature (HTML, CSS, and JS) and/or don't need a build step (e.g., pre-processing, Sass, or Tailwind). A common example is WordPress websites where you need to sprinkle in some custom CSS for working with multi-grid layouts.

If you're a subscriber, you've already received it via email. If you're new, enter your email below and the starter pack will be right on its way! I'd love to hear your feedback once you try it out. 🙂

Get the Free Spacing and Layout Starter Pack

Ready-to-use CSS classes for margin, padding, and gap, plus a couple of responsive Grid and Flexbox layouts. No build step, no framework, just copy, paste, and go.

EmDash CMS — An Open-Source Alternative to WordPress

Speaking of Cloudflare, this week I checked out EmDash, a full-scale open-source CMS built on TypeScript and Astro. The spiritual successor to WordPress that solves plugin security, according to Cloudflare. The 1.0 version was released on Sep 28, 2026.

EmDash CMS playground.
EmDash CMS playground.
View full size

A quick note: I haven't tested it out locally, only tried the online playground version. However, I plan to explore it in the next few days, partly to see how it compares to WordPress. Do let me know if you'd like to see future articles on it (insights, tutorials, or guides).

At a glance, it seems that Cloudflare is emphasizing the security aspect of the CMS, which honestly sounds good, as WordPress security issues are quite common. In fact, I dealt with one myself this week (turns out it was related to an outdated theme). 🙄

Anyhow, here's a short explanation: a WordPress plugin has direct access to the entire site, including the database and files. This puts your entire WP site at risk if a plugin is compromised in some way (spoiler alert: this is common). EmDash claims to solve this using isolated sandbox environments (Dynamic Workers), so a plugin is only given an explicit set of scoped permissions and can only perform certain actions (e.g., notify site editors on new content publication) rather than giving access to the entire codebase and files upfront.

If this sounds interesting, head over to read the introduction blog post in detail.

Wrapping Up

I guess that's pretty much everything I wanted to share for now. I'm curious to know if you guys stick to just one platform like Cloudflare, Netlify, or Vercel to host your sites and apps, and/or if you have migrated any blog or website between web hosts before (and how it went; any difficulties or challenges you faced, for example). Let me know via email at [email protected] or on social media (Bluesky or Mastodon).

Thanks for reading so far, and see you in the next article! 👋

Contents

    Danial Zahid's headshot.

    About Danial Zahid

    I'm a self-taught web developer passionate about everything related to websites and web development. Over the past years, I've explored and worked with different web technologies and tools, notably WordPress, Eleventy, npm, and Gulp.js, to name a few.

    In addition, I've created and currently maintain several open-source projects, including web apps, widgets, websites, and more.

    When I'm not writing content for W3Things or doing web development work, I enjoy my free time by playing games or listening to podcasts.

    Subscribe to the Newsletter

    This website uses cookies to optimize your site experience. By continuing to use the site, you are agreeing to its privacy policy and the use of cookies.