Why we moved from Wordpress to JAMStack

We first started offering marketing sites to clients in late 2017, pretty much when we started Jellypepper. At the time, the ecosystem around static site generators was not as developed as it is now and our team was only familiar with everyone's favourite website framework — Wordpress.

We managed to build some pretty good websites with it, but the development experience was basically the worst thing ever. Hosting, maintenance and upgrades were an absolute nightmare and anything remotely complex was handled with a shoddy Wordpress plugin.

Our clients weren't super happy either — the opinionated Wordpress architecture and UI made componentising sites… not fun. About six months after starting, we decided we either needed to find a new approach or just stop developing websites altogether.

We tried a few other options: Squarespace (which runs on JSON-T), Shopify (liquid templates), Ghost (which at the time was pretty much only good for blog posts) or building everything from scratch (nope).

Eventually we landed on this concept called the JAMStack — super early days but it used the same language as our apps (React). From an agency perspective, this means that instead of hiring one developer that's decent in JS and another that's decent in Rails / PHP / whatever, we could stick to working with absolute units of Javascript.

There were a handful of other things that attracted us to the JAMStack and static-site generators in particular so, thought I might share these with you. It's sort of what this whole ramble is about. If you're freelancing or running an agency, these might help when you pitch your client.

Development Environment

The first thing we really liked obviously is the dev environment. Once I clone a new repo, I can just run npm i and npm start and it's running in a couple of minutes. This isn't just a thing for our team — when we handover to clients they usually have one person on the team at least who's familiar with JS / NPM. They don't even have to run it though, they can just plug it into Netlify or Vercel and it builds and deploys automatically.

Plus, not having to boot up LAMP / XAMPP / MAMP / CRAMP is just fantastic.

Staging in 120 seconds

A really great one is the ability to go from creating a GitHub repo to launching a staging site in two minutes. We have a yeoman generator for Gatsby and Next.js sites, meaning we can split the workload — I'll create the repo and provision the hosting while our developers run the generator, add the repo origin and push — and within 2 minutes, the boilerplate is live.

Plus, we can use that same link for QA testing permanently!

Decoupled Stack

Another great feature for agency-client relationships is the decoupled stack. We typically use a headless CMS like Prismic, Hygraph, Sanity or Contentful. Despite the obvious benefit that our boilerplate's data layer is flexible, it means that we can scaffold all the schemas / content types upfront.

Then we give CMS access or ownership to the client to add all their copy and content in while we build out the UI. They can see it come to life with their own fingertips.. and we don't have to copy and paste their Microsoft word docs into the CMS for them.

Competitive Pricing

This one's pretty straightforward — because of the way our JAMStack sites are architected with hot reloading and the fact it uses React at it's core for templating, we're able to do the same amount of work in about half the time. This means that if we're going up against other agencies, we'll win out on speed and profit margin almost every time.

Multiple Content Sources

One feature that's been helpful for us quite a bit recently is the ability to have multiple content sources easily. We had one client recently with over 300 blog posts in Wordpress and was in a rush to get a new site out. We were able to add Wordpress as a content source and abstract the templating in a way that allowed us to ship that for Release 1, then come back around and migrate all the Wordpress posts to Prismic later on.

This comes in super handy for a typical site for us which uses Wordpress for old blog posts, Prismic for the new content, Workable or Lever for the jobs board and Instagram for the About page. Otherwise we'd have to write API scripts for each of these manually.

Design Systems

This is actually a really interesting one — we have clients occasionally who have a really great engineering team and have built their entire design system in React + Storybook. Rather than replicate all their work, we can just add their design system as a dependency in our project and start using them straight away.

The Community

A really important one is the community around JAMStack. Gatsby, for example, has such a rich ecosystem of content-site specific plugins, sources and transformers. Next by itself is super powerful, but people have written amazing plugins that handle PWAs and SEO.

This means we can set up a boilerplate that generates progressive, lightweight sites rich with plugins for generating robots, sitemaps and manifests; and comes with Preact, Helmet, image transformers and compressors, polyfills, offline support and more. Out of the box, a brand new site comes with 100% PWA compatibility and 100/100 for all Lighthouse scores.

Speaking of Lighthouse scores...

Performance Optimisation

We can start performance optimisation at 90%, shifting our focus to SEO and best practices. Performance optimisation is a huge reason to use the JAMStack — Next and Gatsby are unrivalled for both static rendering performance and SPA hydrating. I could spew out a bunch of stats around how important performance is, but the summary is that this is ridiculously good for us and our clients — it means they can provide an experience faster than their competitor's sites and higher conversion rates.

Anyway, hopefully you've got some idea of why the JAMStack is super useful for agencies. It's the foundation of every great website we build. We have some more information on the JAMStack if you're curious and we occasionally run a similar talk with clients to convince them of going with Gatsby or Next.

So you know... I'll send you an invoice.