Posted  by  admin

Netlify Wordpress

This is overview article how WordPress and Eleventy works together. I’m writing this article in WordPress block editor as usual but front-end is now served by Eleventy. In other words

  1. What Is Wordpress
  2. Netlify Headless Wordpress
  3. Netlify Wordpress Tutorial
  4. Netlify Wordpress Reddit

Description Easily deploy static sites to Netlify using WordPress as backend. This plugin builds your static website using Netlify webhooks to trigger the deploy process.

  • back-end is still WordPress.
  • front-end is static using Eleventy.
  • site (foxland.fi) is hosted in Netlify.
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris pulvinar, urna placerat mattis laoreet, quam massa tincidunt felis, sed ullamcorper sem ex a massa.
  2. A seamless integration Netlify listens for any changes from WordPress and new content is fetched using the WordPress APIs Netlify prerenders your entire site using any tools and frameworks you configure Once generated, your site is deployed across Netlify Edge in a single atomic update.

Code can be found in Github:

  • Foxland Eleventy site.
  • Foxland WordPress theme and plugin.
  • Original demo code for Eleventy and WordPress.
Netlify Wordpress

Why WordPress and Eleventy

In general there are couple of main points why use static site generator like Eleventy:

  • Security.
  • Scale.
  • Performance.

Netlify have good article about what are the benefits of using static site generators.

For me it’s the freedom to be in charge about everything in front-end. And it’s also like going back to roots when serving static HTML.

And it’s also like a breath of fresh air to check something new once and for a while. Eleventy is perfect fit for me for that. It’s simple enough but yet powerful.

Yeah, but why keep WordPress in the equation?

What Is Wordpress

I want to simulate real world needs where solid CMS is needed for content editors. Clients have been happy with the block editor for getting their rich content published.

And I have been playing around with WordPress for a long time. It saves me back-end developing time. I’ve been pretty happy about block editor myself.

Development workflow

I’ll try to write more detailed articles in key concepts later on but here are the development process in general.

Getting data from WordPress to Eleventy

Data workflow in Eleventy is super powerful. Basically data can from many different sources. In our case let’s focus on Global data files, our source for WordPress related data.

  • That means that _data/posts.js file gives us access to posts key based on filename.
    • Then we can get post title using posts.title.rendered.
    • And content using posts.content.rendered.
    • And so on.
  • And _data/pages.js file gives us access to pages key based on filename.
  • In those data files we fetch posts and pages using REST API endpoints.

After that we repeat the same pattern for every peace of data we need from REST API.

Caching data locally

It makes no sense to fetch data from WordPress REST API every time you make a tiny change in your template file. It would be super slow experience when developing the site in Eleventy.

Netlify Wordpress

So let’s cache the results locally! There is great NPM package flat-cache for that.

  1. Fetch data from REST API and save it locally using flat-cache.
  2. Set cache duration, for example 1 hour or 1 day.
  3. Only fetch again from remote URL if cache duration have expired.
  4. All fetched data can use the same logic for fetching the data.

There is also eleventy cache assets, which also uses flat-cache.

WordPress in subdomain

Wordpress

WordPress is installed in subdomain. Although I have a little weird setup when WordPress is under different main domain in foxland.foxnet.fi.

Because nothing needs to render in front-end from WordPress theme index.php and style.css are basically empty.

Other than that it’s just setting some Gutenberg block editor theme supports. And whatever you might need in the admin or in the editor.

Note that I enqueue editor styles from the live site directly.

This is handy because Eleventy can handle editor styles at the same time it handles front-end styles. And I get to enjoy same styles in the editor. Nice!

Custom Plugin registers some post types and custom blocks. In this case they could have been in theme also since theme doesn’t really handle anything else than admin related stuff.

Only other plugin is Headless Mode.

Deploy to Netlify

Site itself is hosted in Netlify. New data or code get published automatically when I push the code in master branch in Github. I can also trigger deployment manually from Netlify account.

Netlify

But this really isn’t going to scale, is it. There needs to be some kind of automated process for deploys when new content get published.

One solution is to trigger Netlify build automatically using Netlify build hook and IFTTT. This could be set every day or in every hour (or whatever frequency you’d like).

It would also be handy to call https://api.netlify.com/build_hooks/YOUR_ID_HERE directly from WordPress admin when needed. It could happen automatically when new content is Published or manually clicking “Build site” button when there have been updates on content.

I need to play around with this but for now once per day using IFTTT is enough for me. Build time can also be minutes or even more if the site is big. In my case it’s just 1-2min. This is something to consider if client want to publish content pretty much immediately.

Learn Eleventy

Netlify with wordpress

Here are couple of links where I have learnt Eleventy:

  • Official docs.
  • Let’s learn Eleventy in Netlify.
  • Jérôme Coupé Introduction to Eleventy.
  • Learn Eleventy from scratch course.

Description

Netlify Headless Wordpress

Easily deploy static sites to Netlify using WordPress as backend. This plugin builds your static website using Netlify webhooks to trigger the deploy process.

Reviews

Netlify Wordpress Tutorial

Contributors & Developers

“Publish to Netlify” is open source software. The following people have contributed to this plugin.

Contributors

“Publish to Netlify” has been translated into 1 locale. Thank you to the translators for their contributions.

Interested in development?

Netlify Wordpress Reddit

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.