tl;dr Jamstack front end like Gatsby and Nextjs+ Headless CMS seems to check off all the modern requirements of a marketing development team

My foray into technology from journalism some 20+ years ago was spurred by the advent of a little-known technology at that time — Dreamweaver. The tool enabled people to visually create web pages by generating static HTML files.

The joy of watching words and images come to life through a browser after a few clicks was an exhilarating and rather empowering feeling to anyone just starting off playing with computers.

Then came the barrage of website creation tools over the years. Commoditization meant that websites went from being optional to an essential part of a company’s existence.

Since then, Wordpress rose to the top as the defacto standard of making a website for individuals and small companies that did not have an army of developers. There are some current estimates that Wordpress powers about 30% of all corporate websites today. Almost all of these websites are used by both marketers and developers.

And therein lies the seeds of a subtle and underlying current change.

In a few of my previous roles, my team or I was responsible for building and maintaining the company’s website, and I loved how easy it is to get started with Wordpress. But in my opinion, Wordpress has three main issues that make it a tough option for companies looking to scale and move fast.

1. Performance: Almost all Wordpress sites start with zero plugins and excellent performance, but plugin bloat becomes a reality since almost everything you need to do in Wordpress can be done with a plugin. The more plugins you add, the worse the website performance gets. From a marketer’s perspective who is trying to boost SEO for your company’s website, this is detrimental. Plus, Wordpress is driven by a relational database, so there is the added overhead of a database call for grabbing content.
2. Security: There are best practices for securing your Wordpress installation, but by default, Wordpress exposes an admin URL, and sometimes plugins may expose the site to vulnerabilities. In my experience of managing Wordpress sites, I had to deal with attempted break-ins almost every day.
3. Scalability: Not the same as performance; scalability challenges occur when the website traffic continue to grow at a steady state. When this happens, whether you are hosting your own Wordpress instance or using a hosted option, you now have to worry about adding additional servers/containers, scaling databases, and exploring CDN options.

In addition to all of the above, the marketing team often needs to create new landing pages, add new forms, create new blog posts, and all of these need to happen fast. A company’s typical growth trajectory involves initial in-house developers and often outsourcing the entire website development and management activities to external agencies.

As the needs of a marketing team continue to evolve and the requirements around approval workflows, translations, personalization, integration, etc., increase, some companies then choose to go to enterprise tools like Adobe and OpenText.

One of the most consequential advantages of using these tools is the ability to have a separation of code with content so that developers can work in parallel with content creators without stepping on each other.

From a marketers perspective, though, let’s list some other requirements that would make the marketing teams’ lives better when it comes to a website tech stack and Content Management Systems (CMS)s.

1. The ability to write, edit and deploy content visually without seeking the developers/agencies’ help.
2. The ability to create new content types visually, for example, a blog content type, a team member content type, a header, or a promo for a website, etc.
3. The ability to re-use content across multiple marketing channels.
4. The ability to route content updates through workflows for approvals if needed.
5. The ability to batch content into releases for things like product launches and events.
6. The ability to manage localization of content by collaborating with translators.

So what do you do if you are a small to mid-size company and still have these requirements, yet you don’t want to spend thousands/millions on an enterprise web content management system?

Enter a new breed of content management systems — headless CMS.

There are quite a few of these that have gained some good traction over the last few months/years. The ones that are worth mentioning include Contentful, Contentstack, Sanity.io, and Strapi. Almost all of these have a free trial option, so feel free to try them out yourselves, but here is the key aspect of this new breed of CMS that is so groundbreaking from a marketer’s perspective — All of these tools allow marketers to visually create, manage, and deploy content without ever having to touch code or go to the agency/development team for help.

And, the kicker — you can re-use the same content across multiple channels. Imagine you write a product description once, and the same content now shows up on your website, brochure, events collateral, etc., at the same time. If you change the content in one place, it auto-magically changes everywhere. How does it do that?

The headless CMS exposes all content types and content as APIs that different applications can consume.

Now imagine all the possibilities of things you can do with content available through APIs !!

Ok, so in terms of one of the essential requirements of separation of content and code, headless CMSs are great, but what about the actual code? How do you consume the content from the headless CMS from your website, and how do you build a website that is truly developer-friendly?

I am going to play the developer role here as well and list out some of the big requirements.

1. The ability to code in Javascript, HTML, CSS.
2. The ability to create and re-use components with a framework like React.
3. The ability to use existing coding tools like Visual studio code etc.
4. The ability to check in code vs. having to use FTP for deploying code. Better still, the ability to check-in code that is part of a CI/CD pipeline.
5. And finally, the ability to create a website where the performance is stellar out of the box, secure by design, and can be scaled infinitely with CDNs when needed.

When it comes to working with headless CMS and satisfying all of the requirements above, two technologies have emerged that really make the creation and managing of the marketing web stack truly game-changing and fun — Gatsby and Nextjs.

What sets these two technologies apart is that developers can create an entire site using Javascript, HTML, CSS using React framework, and when you build the site, it generates static HTML, CSS, and JS.

Why is this so groundbreaking?

Well, because now your site has the performance markers that are off the charts. It literally feels and behaves like a native app on a browser because the static site is not talking to a database in runtime. If you don’t believe me, check out some samples here ->

https://www.figma.com/

https://reactjs.org/

Besides, given that the website is all in plain HTML, CSS, and JS, there is no data to steal, no SQL to inject. Sure, you can still deface it, but you can overwrite the entire site with a simple re-deployment. And since the website is all static, you can deploy it to a CDN or an S3 bucket and connect it to your build and check-in process to create a CI/CD pipeline.

The following diagram captures how all of this hangs together.

In the last few days, I have played around quite a lot with some of these technologies and feel Gatsby shines when it comes to generating static sites with or without a headless CMS. It can even use Wordpress as a headless CMS if you want. The marketing web stack of the future is finally here.