Adapting to the 11ty Workflow

Posted by Ryan Gittings

I've recently 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 how I approach server-related tasks. Things can change as you scale the static site with specific client requirements. So I wanted to write a post to summarise how I've approached specific requests whilst showing that 11ty, combined with Netlify/Vercel, is 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 Decap CMS and Tina CMS. Both offered a similar product, but Decap CMS was open source, so it seemed a sensible place to start. I have to say, it's been a fantastic piece of tech that clients have adapted to amazingly. It does feel a bit developer-focused in handling some things, but there are talks of UI upgrades that would be more than welcome.

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

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

Forms

One thing I loved about Perch CMS was the Forms app, which offered an easy to setup Forms app that 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 works, trust me. No more worries about spam! I can set any form to receive submissions by populating the data attribute tag. It's so easy!

Serverless Functions & Data

When I first read about serverless functions, I must admit they scared 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 various 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.

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, which would load the information on every page load. It can be expensive and resource-intensive, so I only use this approach if we need bang-up-to-date data, which changes almost on a minute-by-minute basis.
  • Pulled at build time: With our example of cat jokes, more than likely, we could fetch the data at build time and use 11ty's data to pull this data in at build time. Pulling at build time is far less resource-intensive, as we're referencing the API once when the site is at build time, rather than every page view. It's a sustainable way that the site can grow and scale without comprising on usage or performance.

I have used serverless to send data the other way, too. I've hooked up the serverless functions so that every time a form submission comes through in Netlify, it 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, and then you have the form submission safely captured within Netlify.

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

Build Times & 11ty Cloud

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

Take a sneak peek at how this works.

In Summary

I've just given you a flavour of what's possible with this setup. I wanted this post to help folks like me who were worried about trying something new. I believe the smaller the structure, the fewer moving parts, the more robust the site 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 websites where the regularly changing aspects of the site (events, posts) are editable. Any changes on the key pages (about, services etc.) come through me to ensure high-quality user flow, reducing the chance of the client ruining UX whilst ensuring the site remains of the highest quality.

I won't be going back to Perch anytime soon. Read more about my Jamstack services.

You can also check out our What is Jamstack? post over at Gittings Studio.

Send Your Project Brief

If you're not sure and would prefer to chat or drop me an email, get in touch.

Project Details
What type of business are you?
What budget have you got to work with?

Example: Home, Services, Services -> Web Design, About, Contact

Websites generally take anywhere between 4-12 weeks to complete, depending on the brief.

Personal Details