Select one or more tags, then press “Search Plugins”

Find Plugin with any / all of the selected criteria
Search Plugin

Hatch Connect – Astro Headless For Cloudflare Wordpress Plugin - Rating, Reviews, Demo & Download

Hatch Connect – Astro Headless For Cloudflare Preview Wordpress Plugin - Rating, Reviews, Demo & Download
No ratings yet
Free
Follow for free plugins, new theme releases and theme news

Plugin Description

Make your current WordPress site headless without moving it. Hatch Connect gives the site you already run a fast, modern Astro frontend and puts it online in your own Cloudflare account, all from your dashboard.

You keep your host, your plugins, your content and the block editor you know. Your visitors get a separate, lightweight site.

Everything runs inside your site. There is no Hatch server, no Hatch account and no Hatch-hosted deploy service. The plugin talks to Cloudflare directly, using a Cloudflare token (a long password) that you create and paste in.

The problem Hatch Connect solves

Going headless is usually a project, not a switch. Most headless WordPress solutions ask you to start over before anything works:

  • Build and host a separate Next.js or Gatsby app
  • Install and learn GraphQL, WPGraphQL or FaustWP
  • Move your content into a new CMS, or to a new host
  • Rewire your SEO, forms and shop plugins by hand
  • Keep a separate app updated and running

Hatch Connect skips all of it. It connects to the WordPress setup you have today.

  • No host change. WordPress stays exactly where it is.
  • No migration. Your posts, pages, media, menus, users and plugins stay put.
  • No rebuild. Yoast, Rank Math, Fluent Forms, WooCommerce and Advanced Custom Fields keep working and feed the new frontend.
  • No code. A setup guide, one Deploy button and a live site.
  • Fully reversible. Disconnect undoes the WordPress side, and your site is as it was.

What is headless WordPress?

Think of a restaurant. WordPress is the kitchen, where the cooking happens and nobody wants to give it up. The Astro frontend is the dining room, which is what your guests see. A waiter (the REST API) carries finished dishes from one to the other.

Classic WordPress does both jobs in one room, on every single visit:

CLASSIC WORDPRESS

Visitor --> your web server --> PHP runs --> database query --> HTML built --> Visitor
            (one machine, one busy kitchen, cooking and serving every table)

Headless WordPress with Hatch splits the work in two:

HEADLESS WORDPRESS WITH HATCH

You write a post                          A visitor opens a page
      |                                          |
      v                                          v
WordPress (the kitchen)  --- REST API --->  Astro site on Cloudflare (the dining room)
posts, pages, menus,        the waiter      builds the page and serves it
media, users, plugins       (hatch/v1)      from Cloudflare's network

Every website has a body and a head. The body is the back end, where you write and manage content. The head is the front end, the part visitors see. Headless means the head is taken off and put somewhere else. WordPress stays the body. A separate Astro site becomes the head.

What you get

  • A faster, lighter site for your visitors
    • Zero plugin bloat on the frontend. Nothing from WordPress plugins loads on visitors’ pages.
    • No framework JavaScript (no React or Vue) in the visitor’s browser. Pages are plain HTML and CSS.
    • Served from Cloudflare’s global network, close to your visitors.
  • 1-click deploy to Cloudflare
    • Hatch uploads the frontend as a Cloudflare Worker and shows you the live address.
    • Use a free workers.dev address or your own domain.
    • Your Cloudflare account, your site, your control. Delete it any time.
  • Content that stays fresh
    • Publish or update in WordPress and the frontend refreshes on its own. No rebuild, no waiting for a build to finish.
  • Three starter designs
    • Editorial, Terminal and Docs, ready to use and easy to restyle.

Plugin bridge: your plugins keep working

Hatch Connect detects the plugins you already use and passes their data to your frontend. Nothing to configure. If a plugin is not installed, its feature stays off.

  • SEO plugins: Yoast SEO, Yoast Premium, Rank Math, Rank Math Pro, RankReady
    • Page titles, meta descriptions, Open Graph and Twitter card tags, JSON-LD structured data and sitemap entries reach the frontend.
    • RankReady adds llms.txt, .well-known/mcp.json, an AI summary and FAQ schema for AI search.
  • Form plugins: Fluent Forms, WPForms (Lite and Pro), Gravity Forms, Contact Form 7
    • Your frontend shows each form natively and sends entries back to WordPress. No form plugin CSS or JavaScript is loaded.
  • Shop: WooCommerce
    • Products, categories, cart, checkout, order summary and customer account pages.
    • Stripe and PayPal payment fields when you switch on that gateway in WooCommerce.
  • Custom fields: Advanced Custom Fields (ACF and ACF Pro), Secure Custom Fields, Meta Box, Pods
    • Field values reach the frontend when the field group is set to show in REST.
  • Custom post types: Custom Post Type UI, JetEngine, Pods
  • Redirects: Redirection, Rank Math redirects, Yoast Premium redirects
    • Your frontend follows your existing redirect rules.
  • Email delivery (SMTP): FluentSMTP, WP Mail SMTP, Post SMTP, Easy WP SMTP
    • Form entries from your frontend go out through the email plugin you already set up.
  • Spam protection: Cloudflare Turnstile on forms, comments and the login page
  • Two-factor reminder: WP 2FA, Two-Factor, miniOrange, Wordfence, Solid Security

SEO features

  • Page titles and meta descriptions from Yoast SEO or Rank Math
  • Open Graph and Twitter card tags for social sharing
  • JSON-LD structured data (schema markup), including Article and FAQPage with RankReady
  • XML sitemap and sitemap index, robots.txt and an RSS feed
  • Breadcrumb navigation
  • Clean, server-rendered HTML that search engines can read
  • llms.txt and .well-known/mcp.json for AI search and AI agents (with RankReady)
  • Redirects carried over from Redirection, Rank Math or Yoast Premium
  • Option to keep your WordPress address out of search results, so only the frontend shows up

Performance features

  • No framework JavaScript in the browser
  • Edge delivery from Cloudflare Workers
  • Server-side rendering (SSR) with page caching: fresh for 60 seconds, then served stale for up to an hour while it refreshes
  • WebP and AVIF image delivery with long-lived caching
  • Instant navigation: the next page starts loading when a visitor points at a link
  • Measure real visitor page load timings in your own Worker log
  • Slim down WordPress with one switch:
    • Remove the emoji script, embed script and oEmbed discovery
    • Remove extra page header tags: RSD, shortlink and feed links
    • Remove block library CSS and global styles
    • Remove jQuery Migrate from public pages
    • Turn off self-pingbacks and XML-RPC pingbacks
    • Send WordPress feeds to the feed on your frontend

WordPress hardening and security

Visitors use the frontend, so WordPress can close the doors it no longer needs. One Fortress Mode switch turns on every protection below, or choose them one by one.

  • Lock the REST API from signed-out visitors, with a short allow-list your frontend needs
  • Block XML-RPC, an old feature attackers use for password guessing
  • Stop user enumeration by hiding usernames from the REST API
  • Login lockout after repeated failed sign-ins, with your own attempt and time limits
  • Role guard: keep Subscribers and customers out of wp-admin
  • Cloudflare Turnstile bot protection on the sign-in page, comment form and frontend forms
  • Security headers: HSTS, X-Frame-Options, X-Content-Type-Options (nosniff), Referrer-Policy, Permissions-Policy, and a Content Security Policy (CSP) on the frontend
  • Disable the file editors and filter raw script code out of posts
  • Hide the WordPress version from page source and asset URLs
  • Disable directory browsing in the uploads folder, and block script execution there on Apache
  • Application Password only for REST write access
  • Keep your WordPress address out of search results, so only the frontend is indexed
  • Two-factor reminder for admins

Customisable, and no coding needed

  • Pick a design, then set your colours, fonts and layout in the Design tab
  • Set your site name, logo, homepage, menus and comment settings in one Content tab
  • Switch reading features on or off: progress bar, sticky share bar, table of contents, breadcrumbs, reading time, last updated date, next and previous links, related posts, author bio, and category tabs with Load more
  • A setup guide and a Status checklist show what works and what needs attention
  • Developers can go further: the hatch/v1 REST API works with any frontend, and the Astro project is open source

How Hatch Connect compares with other headless WordPress solutions

Faust.js, WPGraphQL, Next.js, Gatsby and headless CMS products are good tools, and each fits some teams better. Statements about other projects come from their public documentation and may change over time.

  • Hatch Connect vs Faust.js (a Faust.js alternative). Faust.js is a framework for building a Next.js frontend. Its getting-started guide has you install the FaustWP and WPGraphQL plugins and then write and run your own app. Hatch gives you a ready-made Astro frontend that it deploys for you, and it needs neither plugin.
  • Hatch Connect vs WPGraphQL (a WPGraphQL alternative). WPGraphQL adds a GraphQL API to WordPress so a developer can ask for exactly the fields they want. Hatch uses the REST API already built into WordPress, plus its own hatch/v1 routes for menus, SEO data, forms and shop data. No GraphQL to install or learn.
  • Hatch Connect vs a Next.js build. A custom Next.js and WPGraphQL build gives you every choice and every chore: you write the app, host it and keep it updated. Hatch deploys a finished frontend from the dashboard.
  • Hatch Connect vs Gatsby and static site generators. A static generator typically builds every page ahead of time, so a change waits for the next build. Hatch uses server-side rendering (SSR), so a post you just published can appear without a rebuild.
  • Hatch Connect vs a headless CMS such as Sanity or Contentful. A separate CMS means moving your content, your editors’ habits and your plugins. With Hatch, content stays in WordPress and only the frontend moves.

What Hatch Connect cannot do

  • Deploy outside Cloudflare. This version deploys to Cloudflare only. The REST API works with a frontend hosted anywhere.
  • Carry over page builder layouts. Elementor, Divi, Bricks and WPBakery layouts depend on your WordPress theme’s CSS and JavaScript, which the frontend does not load. Block editor content works.
  • Show theme output. Plugins that print output through your theme are not carried over. Check the deployed site before you rely on one that is not listed above.

External services

This plugin connects to two Cloudflare services, and only after you set them up.

Cloudflare API deploys your frontend using the token you paste in. Terms and Privacy policy

Cloudflare Turnstile is optional spam protection, off until you add your keys. Terms and Privacy policy

Source code

The full source of everything in this plugin, including the compiled parts, is public at https://github.com/eticastudio/hatch. The plugin has two compiled parts.

  • Admin screen (build/admin). The readable source is in admin-react/src inside this plugin, together with package.json and package-lock.json. To rebuild it, install the packages with npm and run npm run build in the plugin folder. It uses @wordpress/scripts.
  • Frontend that Hatch uploads to your Cloudflare account (frontend-bundle). Its source is the Astro project in the astro-starter folder of https://github.com/eticastudio/hatch. To rebuild it, install Node.js 22.12 or newer, clone that repository and, from its root, run PLUGIN_FILE="/path/to/hatch-connect/hatch.php" OUT="/path/to/hatch-connect/frontend-bundle" bash scripts/build-frontend-bundle.sh. The build uses fixed placeholder addresses, and Hatch replaces them with your own addresses when it deploys.

Third-party components and their licences are listed in THIRD-PARTY.txt inside the plugin.

Screenshots

  1. Connection tab: your Cloudflare connection, the live address of your frontend and the history of every deploy.

    Connection tab: your Cloudflare connection, the live address of your frontend and the history of every deploy.

  2. Design tab: pick a starter design, then set colours, fonts and layout.

    Design tab: pick a starter design, then set colours, fonts and layout.

  3. Content tab: your site name and logo, post link format, homepage, menus and comment settings in one place.

    Content tab: your site name and logo, post link format, homepage, menus and comment settings in one place.

  4. Plugins tab: see which SEO, forms, shop and field plugins Hatch is reading from.

    Plugins tab: see which SEO, forms, shop and field plugins Hatch is reading from.

  5. Performance tab: the Slim down and protect WordPress switch removes extras your frontend does not need.

    Performance tab: the Slim down and protect WordPress switch removes extras your frontend does not need.

  6. Security tab: switch on protections such as locking the public data feed and login lockouts.

    Security tab: switch on protections such as locking the public data feed and login lockouts.

  7. Status tab: a plain checklist of what is working and what needs attention.

    Status tab: a plain checklist of what is working and what needs attention.


Reviews & Comments