Get started with the best headless CMS: Build a website on top of GatherContent with Next.js
Angus Edwardson
Co-Founder and VP of Product, GatherContent
The more we look into headless CMS, the Jamstack movement, and the value that this technological shift can bring to organizations, the more it seems like a perfect fit for progressing effective content operations using a tool like GatherContent.
Does this sound like trendy jargon to you? Don't worry!
This guide will introduce the benefits of Jamstack and also provide a resource to get you set up with your own super-fast website (in minutes, not months).
What is a CMS?
A content management system (CMS) is a user-friendly web application that allows you to create and manage content while collaborating with others.
Most content management systems have similar features, including content creation, content storage, workflows, and publishing for different content types.
The main benefit of a CMS is that it allows those without technical skillsor knowledge of different programming languages to create and manage web content.
For example, content management systems like WordPress allow non-technical people to build and manage their web pages with drag-and-drop templates without learning HTML. (These are great for marketers and content managers who need to make changes to online content!)
What is a headless CMS?
A headless CMS is a type of backend content management system where the content repository (body) is decoupled or separated from the presentation layer (head).
"Headless content management systems offer better flexibility and scalability than their traditional CMS counterparts while often still providing an intuitive user interface."
Headless CMSs don’t require a frontend framework (hence the “headless”). Instead, headless CMS software takes an API-first approach. That means headless CMS solutions use application programming interfaces (or APIs) to distribute the content as opposed to traditional CMS which rely on pre-made web templates.
There are many different types of headless CMS, but the best headless CMS for you will depend on your individual needs. Butter CMS, GraphCMS, Prismic, Sanity, Magnolia, Contentful, Storyblok, Kentico Kontent, Directus, Strapi, Contentstack, and Netlify (which will talk about later) are all examples of headless CMS options.
Here are some features you might want to consider when searching for the best headless CMS:
Supports multiple API protocols like REST and GraphQL
Intuitive authoring interface
Integrations with third-party service providers
Robust suite of GraphQL APIs
WYSIWYG and drag-and-drop editors
Frontend agnostic framework that allows you to work with your preferred SDKs
Multi-user editing functionality
Ability to collaborate in real-time
What is Jamstack?
Jamstack is a term coined by Mathias Biilmann, the CEO of Netlify. It stands for JavaScript, API, and Markup. It's a modern web development architecture that focuses on performance, security, and scalability.
Speed comes from the fact that every file is hosted on CDN. To make it happen, CI/CD tools like Netlify or Vercel pre-builds the project using a static site generator. There are hundreds of different SSG options.
Bejamas has covered the most popular ones and created a comprehensive guide on how to choose SSG based on your experience and use case. You can connect most of the SSGs to any headless CMS API like GatherContent.
This approach is more secure and easier to scale because you only make requests to your database during the build phase from a closed environment and not on every request.
You can enhance the user experience on the front-end using JavaScript and fetch data asynchronously if needed.
While it may sound quite technical, the premise is pretty straightforward. By moving away from monolithic content management systems like Drupal or WordPress and adopting a connected stack of appropriate tools for a specific need, we can deliver much more performant web experiences and digital assets in less time.
What makes GatherContent the best headless CMS option
We teamed up with market-leading Jamstack agency, Bejamas, to create an open-source example of using GatherContent as a headless data source (using our API to deliver content), and publishing one of our example projects as a static website using Netlify or Vercel and Next.js.
This essentially means we're using these three tools to replace the CMS with something far easier to work with (no editor training required), faster to build with, and with much better performance at the end. Finally, it's also much more secure than a traditional CMS.
The outcome was pretty incredible:
Extremely fast loading times (the best lighthouse scores we've ever seen)
An incredibly rapid set-up process (minutes)
A far simpler and more scalable content operations process
We no longer have to worry about the CMS getting in the way. Here's a screenshot of the example website homepage:
This is the homepage of our example site for the Royal University of GatherContent, where we used GatherContent as a data source.
Bejamas have kindly turned this project into a simple quick-start resource, so you can build your own static site on top of GatherContent, with very little coding at all.
Get your first site live in minutes, not months with GatherContent
The open-source GitHub repository is set up to work with one of our example projects and publish it to Netlify, an open-source headless CMS built on React that stores content in the Git repository.
Netlify then uses Next.js to present the content on a simple front end. You can quite easily adapt this to pull content from any of your projects and see how quickly you can build out websites, mobile apps, and other digital experiences.
A GatherContent account (free trial accounts work just fine), which contains the Headless CMS example project (if you don't have this project, let us know and we can add it to your account)
A Netlify or Vercel account (also available for free)
If you have any questions along the way, our team is always around to help.
This is very much part of an ongoing project to develop more of these kinds of resources, and we're really looking for feedback. Please let us know what you think.
This is just the beginning
We're convinced that the web of the future will be built using a scalable stack of tools that allow content to be delivered seamlessly to multiple channels. The value of this approach is clear; the speed of production, the flexibility, the security, and the end result is amazingly fast web experiences for our audiences.
In order to make sure GatherContent can do what we do best, and solve the problems of organization-wide content operations, we will be creating a lot more libraries like this. Making it easy to get your own proof of concepts up and running, and incrementally bring the value of modern content operations and the Jamstack to your work.
Does this sound like trendy jargon to you? Don't worry!
This guide will introduce the benefits of Jamstack and also provide a resource to get you set up with your own super-fast website (in minutes, not months).
What is a CMS?
A content management system (CMS) is a user-friendly web application that allows you to create and manage content while collaborating with others.
Most content management systems have similar features, including content creation, content storage, workflows, and publishing for different content types.
The main benefit of a CMS is that it allows those without technical skillsor knowledge of different programming languages to create and manage web content.
For example, content management systems like WordPress allow non-technical people to build and manage their web pages with drag-and-drop templates without learning HTML. (These are great for marketers and content managers who need to make changes to online content!)
What is a headless CMS?
A headless CMS is a type of backend content management system where the content repository (body) is decoupled or separated from the presentation layer (head).
"Headless content management systems offer better flexibility and scalability than their traditional CMS counterparts while often still providing an intuitive user interface."
Headless CMSs don’t require a frontend framework (hence the “headless”). Instead, headless CMS software takes an API-first approach. That means headless CMS solutions use application programming interfaces (or APIs) to distribute the content as opposed to traditional CMS which rely on pre-made web templates.
There are many different types of headless CMS, but the best headless CMS for you will depend on your individual needs. Butter CMS, GraphCMS, Prismic, Sanity, Magnolia, Contentful, Storyblok, Kentico Kontent, Directus, Strapi, Contentstack, and Netlify (which will talk about later) are all examples of headless CMS options.
Here are some features you might want to consider when searching for the best headless CMS:
Supports multiple API protocols like REST and GraphQL
Intuitive authoring interface
Integrations with third-party service providers
Robust suite of GraphQL APIs
WYSIWYG and drag-and-drop editors
Frontend agnostic framework that allows you to work with your preferred SDKs
Multi-user editing functionality
Ability to collaborate in real-time
What is Jamstack?
Jamstack is a term coined by Mathias Biilmann, the CEO of Netlify. It stands for JavaScript, API, and Markup. It's a modern web development architecture that focuses on performance, security, and scalability.
Speed comes from the fact that every file is hosted on CDN. To make it happen, CI/CD tools like Netlify or Vercel pre-builds the project using a static site generator. There are hundreds of different SSG options.
Bejamas has covered the most popular ones and created a comprehensive guide on how to choose SSG based on your experience and use case. You can connect most of the SSGs to any headless CMS API like GatherContent.
This approach is more secure and easier to scale because you only make requests to your database during the build phase from a closed environment and not on every request.
You can enhance the user experience on the front-end using JavaScript and fetch data asynchronously if needed.
While it may sound quite technical, the premise is pretty straightforward. By moving away from monolithic content management systems like Drupal or WordPress and adopting a connected stack of appropriate tools for a specific need, we can deliver much more performant web experiences and digital assets in less time.
What makes GatherContent the best headless CMS option
We teamed up with market-leading Jamstack agency, Bejamas, to create an open-source example of using GatherContent as a headless data source (using our API to deliver content), and publishing one of our example projects as a static website using Netlify or Vercel and Next.js.
This essentially means we're using these three tools to replace the CMS with something far easier to work with (no editor training required), faster to build with, and with much better performance at the end. Finally, it's also much more secure than a traditional CMS.
The outcome was pretty incredible:
Extremely fast loading times (the best lighthouse scores we've ever seen)
An incredibly rapid set-up process (minutes)
A far simpler and more scalable content operations process
We no longer have to worry about the CMS getting in the way. Here's a screenshot of the example website homepage:
This is the homepage of our example site for the Royal University of GatherContent, where we used GatherContent as a data source.
Bejamas have kindly turned this project into a simple quick-start resource, so you can build your own static site on top of GatherContent, with very little coding at all.
Get your first site live in minutes, not months with GatherContent
The open-source GitHub repository is set up to work with one of our example projects and publish it to Netlify, an open-source headless CMS built on React that stores content in the Git repository.
Netlify then uses Next.js to present the content on a simple front end. You can quite easily adapt this to pull content from any of your projects and see how quickly you can build out websites, mobile apps, and other digital experiences.
A GatherContent account (free trial accounts work just fine), which contains the Headless CMS example project (if you don't have this project, let us know and we can add it to your account)
A Netlify or Vercel account (also available for free)
If you have any questions along the way, our team is always around to help.
This is very much part of an ongoing project to develop more of these kinds of resources, and we're really looking for feedback. Please let us know what you think.
This is just the beginning
We're convinced that the web of the future will be built using a scalable stack of tools that allow content to be delivered seamlessly to multiple channels. The value of this approach is clear; the speed of production, the flexibility, the security, and the end result is amazingly fast web experiences for our audiences.
In order to make sure GatherContent can do what we do best, and solve the problems of organization-wide content operations, we will be creating a lot more libraries like this. Making it easy to get your own proof of concepts up and running, and incrementally bring the value of modern content operations and the Jamstack to your work.
Angus is Co-founder and VP of Product at GatherContent, where he focusses on the product and research areas of the business – looking into the future of content management, and trying to improve the way organisations create and deliver information. A board member of the European Information Architecture Summit, he has been heavily involved with the Content Strategy, CMS, and product management communities for several years, and frequently writes and speaks around the intersection of these disciplines.
Share on Facebook
Share on Twitter
Share on LinkedIn
Share with email
