Why We Migrated Our Website to Gatsby and React.js

Spoiler: Gatsby is the bee’s knees.

In the following blog post, I will introduce some of the core concepts of headless content management, modern web application frameworks, and serverless web hosting — all in the context of our own website redesign. It is admittedly a lot to cover. So don’t worry, we will dive into each of these topics in subsequent and more detailed, articles.

What excites us most in exploring these tools is their applicability to cutting-edge e-commerce experiences. As we will discuss in this and future blog posts, platforms like Shopify present huge opportunities to incorporate these new technologies and to leverage e-commerce APIs to develop Headless E-Commerce solutions that revolutionize the way we approach customer engagement online.

The Goal: Launching the Human Code Blog

Since our founding, Human Code has had the opportunity to work with dozens of dynamic, awesome e-commerce brands. This work has largely presented itself through the strength of our network and word-of-mouth reputation as experts in Shopify Plus application development.

As we grow, we seek to share our experience and knowledge with a broader community. We seek to give back as thought leaders in the Shopify industry. Consequently, this quarter, we decided to roll out a blog, dedicated to sharing tips and advice for growing your e-commerce business.

The Challenge: Where to Stick Our Content…

Given that we’re so busy with client work, we really wanted to avoid rolling out a new website and blog on a more conventional platform like WordPress or Drupal. Platforms like those require consistent maintenance and near-constant security updates.

At the same time, we wanted the freedom of a customizable front-end solution, coupled with the convenience of a backend content management system. An all-in-one, “software as a service” solution like SquareSpace or Wix just wouldn’t allow us to express ourselves visually and creatively. (To say nothing of the fact that we didn’t want to pay their monthly subscription fees.)

Enter “The Headless CMS”

Initially, we considered building our new website and blog with a static website generator, like Jekyll. Static website generators essentially allow you to write out your blog content in a simplified format, such as Markdown. When you create a new blog post, you essentially run the static site generator and it compiles a new version of your website into static, or flat HTML files that can be uploaded to a content delivery network, or CDN.

The beauty of these static websites are threefold:

• They are extremely fast — given that a server doesn’t have to generate the content before it’s loaded into your web browser.
• They are extremely inexpensive — given that they don’t require any server processing power.
• They are extremely secure — given that you don’t have run a web server that requires security updates to avoid being hacked.

Of course, the simplicity of static websites built with Jekyll comes at a cost: Creating and managing website content in markdown files requires a decent level of technical expertise. If your content editors are used to working with a content management solution like WordPress, they won’t find Jekyll to be the easiest tool to use.

Introducing Contentful

Over the last 4–5 years, the concept of a “headless CMS” has taken hold in the more forward-thinking spheres of the tech community. The idea is simple: What if we separated the backend tools for creating and managing content, from the front-end features that present this content to website visitors?

The opportunities presented by separating content management from content presentation are many. For example:

• Future website redesigns can be accomplished much more quickly and affordably, since all you have to do is make changes to the front-end, rather than replatform your entire CMS.
• With all of your content in one, abstracted repository, you can serve up content not-only to your public-facing website, but also to other applications — such as dedicated mobile apps or even a Shopify store.

Given the growing popularity of headless CMS solutions, there are many technology options from which you can choose. Strong open-source options include Drupal and Ghost. Software-as-a-service options include ButterCMS, StoryBlok, and (our personal favorite) Contentful.

We generally prefer Contentful for a number of reasons:

• It has strong out-of-the-box integrations with other tools we use, such as React.js and Netlify.
• It proves incredible documentation and starter kits.
• It’s highly performant and provides sophisticated tools for managing publication and development workflows.
• It’s quite easy to use and intuitive.
• It’s very affordable. (In fact, for a single website, it’s basically free.)

With our content living in Contentful, our next decision was how to present that content on our website.

Next Up “The JAMStack”

Admittedly, when I first hear our development team talking about “JAMStacks,” I wondered if they were talking about Dave Matthews or other jam bands from the late 90s…

JAMStack refers to “modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup.”

“The JAMstack is not about specific technologies. It’s a new way of building websites and apps that delivers better performance, higher security, lower cost of scaling, and a better developer experience.” — JAMStack.org.

Unless you’re a software developer or technology manager, you don’t really need to know a whole lot about this approach to building modern websites and applications. Suffice it to say, there are a number of light-weight and very powerful open-source tools being released these days that take advantage of the JAMStack architectural model.

The two that we follow most closely are Gatsby (which is built on top of React.js) and Nuxt (which is built on top of Vue.js).

For our website, we decided to use Gatsby, as it has strong support for Contentful and, most importantly, is quickly becoming the javascript application development framework of choice in the Shopify world.

Like Jekyll, Gatsby is essentially a static website generator: It pulls in content from Contentful, runs it through a number of templates, and spits out a stack website.

Unlike Jekyll, Gatsby includes a bunch of slick features for optimizing website content, assets such as CSS and javascript, and images. In other words, Gatsby is super fast. In fact, without doing any performance tuning, our website experienced a blazing 100% increase in speed. This boost in speed was achieved by merely migrating our existing website from a LAMP PHP stack to Gatsby.

Website Deployments to Netlify

Once we’d wired up Gatsby to pull in our content from Contentful and generate a static website, we decided to deploy and “host” our website on Netlify.

As tempted as I am to nerd out on all the features and benefits of Netlify, I’ll keep things simple and say that Netlify provides a super fast CDN, or “content delivery network” for static websites, as well as a number of great developer tools for deploying web applications and sites built with Contentful and JAMStack frameworks like Gatsby.

Also, for a single website, Netlify is free.

So, in moving to Contentful, Gatsby and Netlify, we’ve relaunched a much faster, much more feature-rich website. At the same time, we’ve dropped our website hosting bill to zero and no longer have to worry about security updates. That’s pretty awesome, eh?

What Does All of This Have to Do with Shopify Development?

Gatsby, Contentful, and Netlify have huge potential as tools in our Shopify practice.

For starters, we have clients who are using Contentful to create and maintain content that we are then injecting into their Shopify stores through the use of a customized Shopify app. This gives them much more control over the editorial workflow of their rich-media content, compared to the very lightweight CMS features found natively in Shopify.

We are also using Gatsby to create non-traditional e-commerce shopping experiences that pull product data from Shopify behind the scenes. These “headless e-commerce” experiences are fast and highly customized. They allow us to expose some, or all of a retailers’ product catalog to create quite beautiful and engaging customer experiences.

In Conclusion

Will tools like Contentful and Gatsby over take the e-commerce industry? Will all modern e-commerce websites be headless? Nope. We will continue to build out highly effective storefronts on Shopify. That said, these tools can be used to augment your customer experiences and differentiate your store’s online presence.

Originally published at humancode.io.