外掛標籤
開發者團隊
② 後台搜尋「Hatch Connect – Astro Headless for Cloudflare」→ 直接安裝（推薦）
原文外掛簡介
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.
