Connect with us


404: Not discovered

The previous few years have seen static-site era and Jamstack ideas evolve from area of interest instruments to mainstream growth approaches.

The advantages are interesting:

  • easier deployment and static internet hosting
  • higher safety; there are few back-end techniques to use
  • simple backup and doc model management utilizing Git
  • an important growth expertise, and
  • super-fast efficiency

Sadly, static-site generator (SSG) tasks are hardly ever handed over to purchasers. SSGs resembling Jekyll, Hugo, and Gatsby are designed for builders. Navigating model branches, updating Markdown paperwork, and working command-line construct processes is irritating for editors coming from the world of one-click publishing on a content material administration system.

This tutorial describes one solution to hold everybody glad and motivated! …

  • content material editors can use WordPress to edit and preview posts
  • builders can import that content material into Eleventy to construct a static web site

Headless CMSs and Loosely Coupled APIs

Some ideas illustrated listed below are shrouded in obscure jargon and terminology. I’ll endeavor to keep away from it, nevertheless it’s helpful to grasp the overall strategy.

Most content material administration techniques (CMSs) present:

  1. A content material management panel to handle pages, posts, media, classes, tags, and so on.
  2. Internet web page era techniques to insert content material into templates. This sometimes happens on demand when a consumer requests a web page.

This has some drawbacks:

  • Websites could also be constrained to the skills of the CMS and its plugins.
  • Content material is commonly saved in HTML, so re-use is tough — for instance, utilizing the identical content material in a cell app.
  • The web page rendering course of could be sluggish. CMSs normally provide caching choices to enhance efficiency, however entire websites can disappear when the database fails.
  • Switching to an alternate/higher CMS isn’t simple.

To offer further flexibility, a headless CMS has a content material management panel however, as an alternative of web page templating, information could be accessed through an API. Any variety of techniques can then use the identical content material. For instance:

  • an SSG may fetch all content material at construct time and render a whole web site
  • one other SSG may construct a web site another way — for instance, with premium content material
  • a cell app may fetch content material on demand to point out the most recent updates

Headless CMS options embody and Contentful. These are highly effective, however require editors to be taught a brand new content material administration system.

The WordPress REST API

Virtually 40% of all websites use WordPress (together with Most content material editors could have encountered the CMS and lots of can be utilizing it day by day.

WordPress has supplied a REST API since model 4.7 was launched in 2016. The API permits builders to entry and replace any information saved within the CMS. For instance, to fetch the ten most up-to-date posts, you’ll be able to ship a request to:

Word: this REST URL will solely work if fairly permalinks resembling Submit title are set within the WordPress Settings. If the location makes use of default URLs, the REST endpoint can be .

This returns JSON content material containing an array of huge objects for each submit:

    "id": 33,
    "date": "2020-12-31T13:03:21",
    "date_gmt": "2020-12-31T13:03:21",
    "guid": {
      "rendered": "https://mysite/?p=33"
    "modified": "2020-12-31T13:03:21",
    "modified_gmt": "2020-12-31T13:03:21",
    "slug": "my-post",
    "status": "publish",
    "type": "post",
    "link": "https://mysite/my-post/",
    "title": {
      "rendered": "First post"
    "content": {
      "rendered": "<p>My first post. Nothing much to see here.</p>",
      "protected": false
    "excerpt": {
      "rendered": "<p>My first post</p>",
      "protected": false
    "author": 1,
    "featured_media": 0,
    "comment_status": "closed",
    "ping_status": "",
    "sticky": false,
    "template": "",
    "format": "standard",
    "meta": [],
    "classes": [1],
    "tags": []

WordPress returns ten posts by default. The HTTP header x-wp-total returns the whole variety of posts and x-wp-totalpages returns the whole variety of pages.

Word: no WordPress authentication is required to learn public information as a result of … it’s public! Authentication is barely obligatory while you try so as to add or modify content material.

It’s subsequently attainable to make use of WordPress as a headless CMS and import web page information right into a static web site generator resembling Eleventy. Your editors can proceed to make use of the device they know whatever the processes you employ for web site publication.

WordPress Warnings

The sections beneath describe learn how to import WordPress posts into an Eleventy-generated web site.

In a great world, your WordPress template and Eleventy theme could be comparable so web page previews render identically to the ultimate web site. This can be tough: the WordPress REST API outputs HTML and that code could be considerably altered by plugins and themes. A carousel, store product, or contact kind may find yourself in your static web site however fail to function as a result of it’s lacking client-side property or Ajax requests to server-side APIs.

My recommendation: the easier your WordPress setup, the simpler will probably be to make use of it as a headless CMS. Sadly, these 57 important plugins your shopper put in might pose a couple of challenges.

Set up WordPress

The demonstration code beneath presumes you could have WordPress working in your PC at http://localhost:8001/. You may set up Apache, PHP, MySQL and WordPress manually, use an all-in-one installer resembling XAMPP, and even entry a stay server.

Alternatively, you should use Docker to handle the set up and configuration. Create a brand new listing, resembling wpheadless, containing a docker-compose.yml file:

model: '3'


    picture: mysql:5
    container_name: mysql
      - MYSQL_DATABASE=wpdb
      - MYSQL_USER=wpuser
      - MYSQL_PASSWORD=wpsecret
      - MYSQL_ROOT_PASSWORD=mysecret
      - wpdata:/var/lib/mysql
      - "3306:3306"
      - wpnet
    restart: on-failure

    picture: wordpress
    container_name: wordpress
      - mysql
      - WORDPRESS_DB_HOST=mysql
      - WORDPRESS_DB_NAME=wpdb
      - WORDPRESS_DB_USER=wpuser
      - WORDPRESS_DB_PASSWORD=wpsecret
      - wpfiles:/var/www/html
      - ./wp-content:/var/www/html/wp-content
      - "8001:80"
      - wpnet
    restart: on-failure



Run docker-compose up out of your terminal to launch WordPress. This will take a number of minutes when first run since all dependencies should obtain and initialize.

A brand new wp-content subdirectory can be created on the host which accommodates put in themes and plugins. For those who’re utilizing Linux, macOS, or Home windows WSL2, you might discover this listing has been created by the root consumer. You may run sudo chmod 777 -R wp-content to grant learn and write privileges to all customers so each you and WordPress can handle the recordsdata.

Word: chmod 777 will not be ideally suited. A barely safer possibility is sudo chown -R www-data:<yourgroup> wp-content adopted by sudo chmod 774 -R wp-content. This grants write permissions to Apache and anybody in your group.

Navigate to http://localhost:8001/ in your browser and observe the WordPress set up course of:

install WordPress

Modify your web site’s settings as obligatory, remembering to set fairly permalinks resembling Submit title in Settings > Permalinks. Then add or import a couple of posts so you could have information to check in Eleventy.

Preserve WordPress working however, when you’re able to shut the whole lot down, run docker-compose down from the challenge listing.

Set up Eleventy

Eleventy is a well-liked Node.js static-site generator. The Getting Began with Eleventy tutorial describes a full setup, however the directions beneath present the important steps.

Guarantee you could have Node.js model 8.0 or above put in, then create a challenge listing and initialize the package deal.json file:

mkdir wp11ty
cd wp11ty
npm init

Set up Eleventy and the node-fetch Fetch-compatible library as growth dependencies:

npm set up @11ty/eleventy node-fetch --save-dev

Then create a brand new .eleventy.js configuration file, which units the supply (/content material) and construct (/construct) sub-directories:

// .eleventy.js configuration
module.exports = config => {

  return {

    dir: {
      enter: 'content material',
      output: `construct`



Proceed studying
How you can Use WordPress as a Headless CMS for Eleventy
on SitePoint.

Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *