Larry Hudson

Writing about making websites

Simple static sites with WordPress and Eleventy

25 March 2021

If I could have my own way, my “ideal” way of building websites would include:

  • Development with HTML and CSS, with minimal JavaScript
  • Templating features that allow me to work faster and break up my code into manageable chunks
  • WordPress for editing content
  • Static site hosting on a Content Delivery Network (CDN) for high performance and low cost

This website is an attempt at bringing these different things together. It uses:

  • On the WordPress side:
    • WordPress hosted by a managed AWS Lightsail instance (US$3.50 per month), set up in just a few clicks
    • The WordPress plugin WPGraphQL that makes it easy to pull data out of WordPress, into Eleventy
  • On the static build side:
    • A GitHub repo that uses the axios library to pull in data from GraphQL
    • An Eleventy site that uses Nunjucks templates to build simple HTML templates
    • Netlify hosting that quickly builds the site and hosts it on a CDN

My goal is to make both the CMS side and the build side as simple as possible. That means:

  • less moving parts. more “set and forget” rather than needing to update things.
  • easier to figure things out when I’m looking at the code 6 months from now.

How to build a simple static site with WordPress and Eleventy

Setting up WordPress

I used AWS Lightsail to spin up a fresh installation of WordPress. It only took a few clicks to have a managed WordPress instance running, and it only costs US$3.50 per month for a site with low traffic.

Because the WordPress site won’t be getting any traffic (it’ll only be used in the build step), the US$3.50 per month option should suffice.

After setting up WordPress, I installed the WPGraphQL plugin. This gives us a graphical user interface for building GraphQL queries to get the data that we need out of WordPress.

Setting up the Eleventy configuration

I made a new folder and ran npm init -y to setup a fresh package.json file. Then I ran npm install @11ty/eleventy axios to install the two main packages we need to build our site.

Fetching data with axios

The axios library makes it easy to POST a GraphQL query and return the data. Then, Eleventy makes it easy to use this data anywhere in our HTML templates. It’s a great combo.

Deploying the site with Netlify

Netlify is a web hosting company that specialises in deploying static sites. If you give them a Git repo with a build step, it will run the build for you and host the static files on a CDN. The user experience is fantastic.

Because Eleventy is simpler than other web frameworks, it only takes Netlify about 20 seconds to build the site. It’s not instant, but it’s quick enough that you could fix a typo without having to wait minutes for the build to complete.

To automatically re-build the site when I update a page in WordPress, I installed the Jamstack Deployments plugin. It automatically fires a webhook that tells Netlify to rebuild the site. It even puts Netlify’s status badge in the WordPress admin bar so I can see the site’s status.