Adapting to the 11ty Workflow

As mentioned in previous blog posts, I've recently completely invested my time in building sites using a static site generator, specifically 11ty.

Whilst coming from a typical front-end approach (using CMS' like Wordpress/Perch/Craft), I've had to adapt a little in the way I approach server related tasks. As you scale the static site with specific client requirements, things can become a bit different to what you're used so. So I wanted to write a post to summarise how I've approached certain requests, whilst also showing that 11ty, combined with Netlify/Vercel is such a simple but powerful and capable setup.

CMS

When I first ventured into Jamstack, my biggest worry was finding a CMS that was capable of most of what I was used to on other CMS', including:

  • Blocks
  • Repeaters/Lists
  • Asset Handling
  • Add/Delete/Editing
  • Simple Pricing Strategy
  • Scalability
  • Flexibility

The two that seemed to be most popular were Netlify CMS and Forestry CMS. Both seemed to offer a very similar product, but Netlify CMS was open source so it seemed like a sensible place to start. I have to say, it's been a fantastic piece of tech that clients have adapted to. I must admit, it does feel a bit developer focused in the way it handles some things, but there are talks of UI upgrades which would be more than welcome.

Over the past 12 months, I've pretty much used Netlify CMS exclusively for projects. I've basically found a way to do pretty much everything I could do with Perch CMS in terms of content editing, within Netlify CMS (links to documentation below):

I've found switching to Netlify CMS to be such a breath of fresh air. It feels like there's a lot less to go wrong, and I can see every change a client has made within my git version history. It allows me to identity problems quicker, and also manage my workflow a lot better too (no more manually syncing databases!).

Forms

One thing I loved about Perch CMS was Forms. It offered a single app that allowed Forms to be setup very quickly, and it was very reliable. The one thing I did suffer with was spam, and although I had tried many techniques (from Honeypot to Recaptcha), I was never happy with the solution.

Pairing 11ty with Netlify meant I could use Netlify's Forms feature. It offered built in form protection via Akismet, and it just works, trust me. No more worries about spam! I can set any form to take submissions by setting one data attribute tag. It's so easy!

Serverless Functions & Data

When I was first reading about serverless functions, I must admit they did scare me a little. It felt a bit over my head and I felt a bit out of place as a front-end developer. But having used them for a variety of purposes over the last 12 months, they're amazing. It feels like the future.

Take a typical Perch/Wordpress build. If you wanted to run something on the server, e.g. pulling in data from a JSON api, you'd more than likely use PHP to pull in the data at runtime, maybe apply some caching and everything is done on the server.

I generally have two approaches to anything that would require a typical 'server'. Let's take an API that pulls in cat facts from an API. We have one of two ways we can pull in data:

  • Serverless function: in a typical server approach, we'd pull the data upon request and it would load the data on every page load. This can be quite expensive and resource intensive, so I only ever use this approach if we need bang up to date data, that's changing almost on a minute by minute basis.
  • Pulled at build time: With our example of cat jokes, more than likely we could just fetch the data at build time, and use 11ty's data to pull this data in at build time. This is far less resource intensive, as we're just referencing the API once when the site is built by Netlify, rather than every page view. This is a sustainable way that the site can grow and scale, without comprising on usage or performance.

I have used serverless functions to send data the other way, too. I've hooked up the serverless functions to forms, so that every time a form is verified in Netlify, that in runs a serverless function to send data to Salesforce, Hubspot or Zoho. Using this approach means you get a backup in Netlify should a provider be down, then you have the form submission safely captured within Netlify.

It's worth exploring their playground, to see how things can work and get into the serverless way of thinking.

Build Times & 11ty Cloud

For the larger sites I've built (especially ones with a lot of blog posts, or author pages), I have found that build times do grow, and can be a little jarring for editors who are using Netlify CMS having to wait for the site to build every time. Now, this is a bit cutting edge but 11ty is staying ahead of the game with clever ways to delay building until it's actually needed.

Take a sneak peak on how this works.

In Summary

I've just given you a flavour of what's possible with this sort of setup. I wanted this post to help folks like me who were worried about trying something new. I believe the smaller the setup, the fewer moving parts, the more robust the site is and the more efficient everything is. I've found sites to be more reliable, quicker, easier to grow and far easier to manage. I've even found once explaining the setup to clients, that not all parts of the site have to be editable. I have builds where just the regularly changing parts of the site (events, posts) are editable, and any changes that are on the key pages (about, services etc) come through me, to ensure high quality user flow, which reduces the chance of the client ruining UX, whilst also making sure the site remains of the highest quality.

I won't be going back to Perch anytime soon.