Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add buttercms blog post #23783

Merged
merged 5 commits into from
May 5, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
55 changes: 55 additions & 0 deletions docs/blog/2020-05-05-Butter-CMS-case-study/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
---
title: "Faster, Easier and Also in French: Butter CMS + Gatsby drive Car Loans Canada"
author: Jake Lumetta
date: 2020-05-05
excerpt: "CarLoansCanada.com’s growing marketplace team needed to make their content marketing leaner and meaner. They tuned up their performance with a new website built on Gatsby paired with supremely easy content management from headless ButterCMS."
tags:
- case-studies
- performance
- building-sites-faster
---

Car Loans Canada helps connect prospective car buyers with automotive loans and car dealers throughout Canada. Marketing content is an essential part of this business model, and Car Loans Canada relies on a high volume of blog posts—in both English and French—to build the top-of-funnel awareness required to continue growing this successful business.

The company needed to scale its website’s performance to keep pace with this growth and success. The team already knew they wanted to build it with Gatsby. However, blog content needed to scale along with the new site, meaning that content creators must be able to easily publish or change content without any developer intervention.

Because the Car Loans Canada team outsources most of its blog content at a rather large scale, it needed an efficient way to move its writers through the content creation workflow with minimal intervention from Car Loans Canada engineers. Blog management had originated in Wordpress, which had resulted in also using Wordpress on the front end to simplify running the blog engine. The engineering team was eager to move away from this setup and quickly concluded that a headless content management system (CMS) was the best and only option.

The prime directive was static asset management. “I needed something that would allow my writers to go in and create a blog that I could just post on my website without having to worry about how they’re going to style it or anything,”says Josh Elias, Car Loans Canada’s CTO. “Not to mention avoid having to pull developers off other tasks to help them make it happen.”

Josh and his team also had two more technical considerations that quickly limited the field of potential headless CMS solutions. First and foremost: localization. Being a Canadian company with operations across the country, Car Loans Canada needs the ability to publish content in both English and French. They also planned to rebuild the site using React and Gatsby, which would allow them to select whichever engine made the most sense for their static content. Not all blog engines play equally nice with these developer frameworks.

## Not all headless CMSs are created equal

The decision came down to two final CMS contenders: Contentful and ButterCMS. There were four main reasons that ultimately tipped the scales toward Butter:

- Butter plays nice with Gatsby, the framework that Car Loans Canada uses to build its sites.
- Documentation and support were superior across the board. Documentation was especially important to the company. (“I won’t use anything with poor documentation,” adds Josh). Butter and Gatsby are both known for dedication to outstanding documentation.
- Clear and simple pricing meant the team knew exactly how many collections and pages they’d get, and for what price.
- The speedy API responds quickly thanks to static querying, which allowed Car Loans Canada to take full advantage of building a very fast, highly responsive website using Gatsby.

Relying solely on Butter documentation, Josh and his team were able to rebuild the entire Car Loans Canada blog in React and Gatsby in just two days. “Like I said, the documentation was such that there were no special edge cases that I needed clarification on,” says Josh. “I was able to just get going just off the guides.” Because Butter is cloud-hosted, the Car Loans Canada team doesn’t have to configure or host any new infrastructure for their CMS. Instead, they use a number of queries while building their project at no additional cost at all.

In terms of localization, the ability to localize content in French and English versions of the site was a huge win in terms of ease of use and time saved.

## So much more than blog posts

While they initially intended to use Butter only for content management for their blog, the team at Car Loans Canada soon realized they could do much more than that.

“I could host static assets for my homepage and others. Let’s say there’s a feature description on our About page. Now, a content creator could just go in and change the wording whenever they want to,” Josh says. “There’s a lot of power in that, especially since we’re a relatively small company.”

![car loans Canada website landing page](./car_loans_canada_web.png)

In addition, the team could address special content needs. For example, the team has a different page for every city in Ontario (more than thirty cities, at least). Using Butter, Josh created a collection, all the content for those pages, and iterates them through Gatsby to create a new page for every single collection item.

> _Pretty much everything that I can put in Butter, I will. Anything touched by any kind of content creator, I just put that on Butter so they can edit it and then just create a front viewport in my web stack. It’s working out very well._

Today, content on the Canada Car Loans website loads significantly faster than it did before moving to Gatsby and ButterCMS. And it’s not just optimization: the content itself has been upgraded, including structure and visuals, to create better and richer content experiences. All of which could be done fearlessly thanks to Gatsby’s best-practice front end development patterns like route-based code splitting, PRPL, service workers, and offline support with dynamic data integrations.

So far, the new site is performing wonderfully, Josh reports. The team is seeing impressive outcomes from the blazing fast performance, including:

- Increased pageviews per session
- Average user time spent on site has more than doubled
- Full independence for marketing content leading to more and better content

“Because I can query all the data before, and bundle my website up and then deploy it, the content doesn’t need to be processed every time a user requests it,” concludes Josh. “We believe this will impact our SEO significantly, leading to impressive gains.”
4 changes: 4 additions & 0 deletions docs/blog/author.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -418,3 +418,7 @@
bio: "Front End React UI Developer/UX Engineer based in Worthing, UK. After all is said and done, structure + order = fun."
avatar: avatars/paul-scanlon.jpg
twitter: "@PaulieScanlon"
- id: Jake Lumetta
bio: "Jake is the CEO of ButterCMS. He loves whipping up Butter puns and building tools that make developers' lives better."
avatar: avatars/jake-lumetta.jpg
twitter: "@jakelumetta"
Binary file added docs/blog/avatars/jake-lumetta.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.