A Different Case Study: Bejamas.io Under The Spotlight

Last update: Sunday, October 20, 2019

Written by: Nebojsa Radakovic

The all-new fast-loading, easy-to-use, and fancy designed website built from scratch with Gatsby, Forestry and Vercel was a tough cookie. And we love it even more for it.

For those of you who know us, you know we’ve been pro Jamstack from day one. And while our website was a full-blooded Jamstack build (Gatsby + Contentful + Netlify) we have had minor, hmm, glitches which, in all honesty, damaged the advocacy we were so into.

I’m talking about the website performance of course. Better performance together with higher security, easier scaling, and cheaper hosting, is one of the top-selling points for Jamstack, right?

Guess what, we fluked in that area.

In the spirit of radical transparency we value in our business approach, take a look at our previous Lighthouse scores for our home page:

[@portabletext/react] Unknown block type "lighthouse", specify a component for it in the `components.types` prop

And for one of our most popular blog pages:

[@portabletext/react] Unknown block type "lighthouse", specify a component for it in the `components.types` prop

Not a good job I'd say.

Not only that we needed to improve website performance but we also needed to improve overall site architecture. On the business side of things, we need to support the brand trust and credibility we’ve built. To create a seamless experience for new and old users, regardless of which device they are using, that would incite them to engage with our content and get in touch with us.

[@portabletext/react] Unknown block type "newsletter", specify a component for it in the `components.types` prop

The Overview

Web dev time, or the lack of it, was the main issue. Now, we could blame it on amazing projects we’ve worked on (some of them are featured here) but the truth of the matter is that we wanted it to be the brainchild of all of us at Bejamas. Getting everyone in a remote team to participate with ideas and suggestions was as hard as it was deciding which ideas and suggestions would become a part of the project.

Thankfully, we had our CTO Thom Krupa acting out as a lead dev in this project and who better to explain the ups and downs, the whys and hows of this build than Thom. So, instead of our usual case study format let’s hear the man out.

[@portabletext/react] Unknown block type "message", specify a component for it in the `components.types` prop
[@portabletext/react] Unknown block type "message", specify a component for it in the `components.types` prop
[@portabletext/react] Unknown block type "message", specify a component for it in the `components.types` prop
[@portabletext/react] Unknown block type "message", specify a component for it in the `components.types` prop
[@portabletext/react] Unknown block type "message", specify a component for it in the `components.types` prop
[@portabletext/react] Unknown block type "message", specify a component for it in the `components.types` prop
[@portabletext/react] Unknown block type "message", specify a component for it in the `components.types` prop
[@portabletext/react] Unknown block type "message", specify a component for it in the `components.types` prop
[@portabletext/react] Unknown block type "message", specify a component for it in the `components.types` prop
[@portabletext/react] Unknown block type "message", specify a component for it in the `components.types` prop
[@portabletext/react] Unknown block type "message", specify a component for it in the `components.types` prop
[@portabletext/react] Unknown block type "message", specify a component for it in the `components.types` prop
[@portabletext/react] Unknown block type "message", specify a component for it in the `components.types` prop

Forestry as Headless CMS

Before we continue with the interview let me share a couple of things about Forestry. First of all, Forestry is Git-based CMS which means it doesn’t have an API and a database. It is a layer on top of Git and it's interacting directly with the files in the repository. Every action that happens in the CMS like editing, creating, and deleting is an action taken as part of the git workflow.

Second, setting up Forestry is fairly simple. Once you sign up and before choosing your repository, choose your static site generator. Forestry supports many SSGs and provides default settings for Jekyll, Hugo, VuePress, and Gatsby. Finally, set your git provider which can be GitHub, BitBucket, GitLab, and Azure DevOps, and you are set.

OK. Now back to the interview.

[@portabletext/react] Unknown block type "message", specify a component for it in the `components.types` prop
[@portabletext/react] Unknown block type "message", specify a component for it in the `components.types` prop
[@portabletext/react] Unknown block type "message", specify a component for it in the `components.types` prop
[@portabletext/react] Unknown block type "message", specify a component for it in the `components.types` prop
[@portabletext/react] Unknown block type "message", specify a component for it in the `components.types` prop
[@portabletext/react] Unknown block type "message", specify a component for it in the `components.types` prop

The Results

Let’s have a look at the Lighthouse scores once more:

[@portabletext/react] Unknown block type "lighthouse", specify a component for it in the `components.types` prop

Not too shabby if I may say so. The thing is, those scores are just the tip of the iceberg as far as we are concerned. Because web development is not just about speed and performance isn’t it?

Being a web dev shop over time I’d say we’ve learned pretty damn well how to balance performance, design, clients' wishes, developer’s experience, and audience expectations. So sometimes, while speed is important, so too can be the need for video and fancy animations which can trump performance numbers but raise conversions. Other times better UX, content, and visitors flow or branding is under the spotlight.

Finding the sweet spot for each client is the real art. Think we’ve nailed it, again!

Wonder if we can help you out? Let’s get in touch!

CLICK HERE to schedule a 1-on-1 talk and let us show you what we can do for you and your business.