For step-by-step instructions on using WordPress as a headless back-end with Gatsby as the front-end see the GitHub repo
Interesting Note: We’ll be looking particularly at static site generators (SSGs) of which Matt Mullenweg is not a fan.
What is Headless?
- Some confusion regarding terms due to inconsistent use within community (which tends to happen):
- In a generic sense, “head” is the front-end (UI) of a site (do we actually use it that way?) so “headless” is a site without a front-end.
- “Headless” sites have existed in the WordPress ecosystem using the REST API.
- More recently, the term has been used in association with Static Site Generators (SSG’s) such as Gatsby, where WP serves as the back-end (“headless”) and Gatsby serves as the front-end (“head”).
- While other languages (Go: Hugo, Ruby: Jekyll) provide SSG’s, the most popular are in JS and these are often referred to as using the Jamstack (JavaScript, API, Markdown).
Why Use Headless?
- Performance Gains
- Scalability
- Reduced Cost (at scale)
- Security Improvements
- Decoupled UI
- Use Latest JS Frameworks
- Separation of Concerns (SoC)
Downsides of Headless
- Now maintaining two separate sites – WP back-end and front-end.
- The complexity of front-end frameworks (e.g. React) reduces productivity in the short-term.
- Loss of plugin functionality (most WP plugins won’t work in a static environment).
- Must be rebuilt every time a change occurs.
- Takes a long time to build (depends).
WP Plugins for Generating Static Sites
- See Strattic’s article on why these plugins may not be useful for you.
- WP2Static – This is the one I have the most experience with, it is easy to use.
- Simply Static
- WP Static HTML Output
WP Static Hosts
- Strattic – Starter site is $35/mo.
- Raised $6.5 million.
- Shifter – Limited free tier available, paid starts at $16/mo.
- HardyPress
WPGraphQL
Learning More
- Denis Zoljom. Headless WordPress: The Ups and Downs of Creating a Decoupled WordPress. Smashing Magazine, 10/2018.
- Focuses on using the REST API.
- Includes how to create and query custom REST API endpoints.
- Environment is VVV.
- Rebecca Markowitz. 11 Things to Consider Before Using a WordPress Static Site Generator Plugin. Strattic, 8/2018.
- (1) complicated setup, (2) must setup CDN, (3) redirects via meta tags (not 301/302), (4) AJAX doesn’t work, (5) WP Contact Forms plugins don’t work, (6) native WP search must be replaced, (7) WP comments don’t work, (8) can take a long time to deploy, (9) responsible for security, (10) must manually create 404 pages, (11) support issues.
- Karol K. Does Serverless WordPress Make Sense? codeinwp, 7/2019.
- GFood amount of background information – why one would or would not want to use static, comparison of Shifter and HardyPresss.
- Resi Respati. Headless WordPress + Next.js – What We Learned. kata.ai, 10/2018.
- Don’t confuse SSG as used here with “Static Site Generator”, it can also mean “Server Side Generator” – which is what Next.js is.
- Utilizes Postlight’s Headless WordPress Toolkit.
- Sufyan bin Uzayr. Using WordPress as a Headless CMS. sitepoint, 10/2018.
- Doesn’t use a front-end framework, so pretty easy to understand – no need to know React, etc. A little dated.
- Syed Balkhi. How We Made WordPress Faster Than Static Site Generators. wpbeginner, 9/2019.
- Covers a complex setup wpbeginner used to gain performance similar to SSGs. They abandoned this for SiteGround hosting.
- Thomas Weibenfalk’s Gatsby JS | Gatsby with WordPress as a Headless CMS Udemy Class. 2020.
- Morten Rand-Hendriksen’s video tutorial on Lynda.
- Silvestar Bistrovic. A Guide to Static Site Generators Using Hexo and WordPress. toptal
- James Quick. How I Migrated From WordPress to a Static Site. sscotch, 2018.
Resources
- WP-REST-API V2 Menus Plugin – Adds WordPress’ menus to the REST API.
- Headless Mode Plugin – Redirects all users attempting to access anything other than the REST API, WPGraphQL API, or WP Admin.
- Postlight’s Headless WP Starter Kit (React).
- Static Fuse’s Gatsby WordPress Publisher Theme.
Questions
- WP Search? wp-search