Get started with headless CMS: Build a website on top of GatherContent with Next.js
Angus Edwardson
Co-Founder and Product Director, GatherContent
The more we look into headless CMS, the Jamstack movement, and the value that this technological shift can bring to organisations, the more it seems like a perfect fit for progressing effective content operations using 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).
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 straight forward. 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 in less time.
Build a website directly on top of GatherContent. No CMS required.
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), and 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:
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.
The open-source GitHub repository is set-up to work with one of our example projects and publish it to Netlify, which 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 and other 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. Since this is very much part of an ongoing project to develop more of these kinds of resources, we're really looking for feedback too, so 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 organisation-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.
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 straight forward. 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 in less time.
Build a website directly on top of GatherContent. No CMS required.
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), and 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:
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.
The open-source GitHub repository is set-up to work with one of our example projects and publish it to Netlify, which 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 and other 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. Since this is very much part of an ongoing project to develop more of these kinds of resources, we're really looking for feedback too, so 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 organisation-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 the Product Director and Co-Founder at GatherContent where he spends his time taming the product roadmap and dreaming of a world without Word documents.
Share on Facebook
Share on Twitter
Share on LinkedIn
Share with email
