Eleventy Excellent Headless

Eleventy Excellent — Headless WordPress is an Eleventy starter repository that builds a static site from markdown pages while pulling blog posts from a WordPress site through the WordPress REST API. It is based on the workflow Andy Bell describes in buildexcellentwebsit.es and is explicitly marked "not production ready".

What is Eleventy Excellent — Headless WordPress?

This is a fork of the native Eleventy Excellent starter, modified so that blog posts are fetched from a WordPress backend instead of being written in markdown. Static pages are still authored in markdown inside the Eleventy project, while posts are retrieved at build time via the Eleventy Fetch plugin. The project is maintained by madrilene (Lene), who also created the native starter. It runs on Eleventy, a static site generator, and outputs a static site that can be deployed to Netlify (a one-click deploy button is included in the repository).

Key Features

• CSS workflow from buildexcellentwebsit.es — Uses the modern CSS approach recommended by Andy Bell, including fluid typography and design tokens in src/assets/css/design-tokens.
• Headless WordPress integration — The Eleventy Fetch plugin is preconfigured to fetch WordPress posts via the REST API, with the source URL set in src/_data/posts.js.
• Image optimization — Images are processed with Eleventy-img, generating responsive formats and sizes.
• YouTube embedding — Videos can be embedded with lite-youtube for faster loading.
• Syntax highlighting — Code blocks are highlighted via eleventy-plugin-syntaxhighlight.
• SEO basics — Includes XML sitemap, metadata management, and social sharing defaults controlled from src/_data/meta.js.
• Netlify 301 redirects — A ready-to-use redirect solution is included for Netlify deployments.
• esbuild bundling — JavaScript is bundled with esbuild, and CSS is minified in production builds.

Who is it for?

• Developers building headless WordPress sites — Use this starter to keep WordPress as the content management system for blog posts while generating a fast static frontend with Eleventy.
• Bloggers who want a static site — If you already have a WordPress blog and prefer the performance of a static site, this starter gives you a prebuilt bridge between the two.
• Eleventy users following CUBE CSS — Anyone familiar with Andy Bell's buildexcellentwebsit.es approach will recognize the CSS architecture and find a turnkey setup.

What can you do with it?

• Customize your site — Edit src/_data/meta.js, src/_data/social.js, and src/_data/navigation.js to set metadata, social links, and navigation without touching template files.
• Deploy to Netlify — Use the included deploy button to create a new Netlify site from the GitHub repository with no manual configuration.
• Fetch posts from any WordPress site — Point src/_data/posts.js at your own WordPress REST API endpoint and rebuild to pull in new content.

How does it work?

First, install dependencies with npm install. Run npm start for local development with watch tasks, or npm run build to produce a minified production build. Before going live, replace the example domain in src/assets/css/global/global-styles.css, edit src/_data/meta.js, and add your own WordPress source.