diff --git a/docs/docs/glossary/headless-cms.md b/docs/docs/glossary/headless-cms.md index 4839fbdcbc5f8..9a5e318d41f33 100644 --- a/docs/docs/glossary/headless-cms.md +++ b/docs/docs/glossary/headless-cms.md @@ -7,14 +7,14 @@ Learn what a headless CMS is, how it differs from traditional content management ## What is a Headless CMS? -A _headless content management system_ or _headless CMS_, is a CMS in which the data (content) layer is separated from its presentation (frontend) layer. +A headless content management system or headless CMS, is a CMS in which the data (content) layer is separated from its presentation (frontend) layer. Content management systems, such as [WordPress](https://wordpress.org/) and [Drupal](https://www.drupal.org/) store content in a database, and use a collection of HTML-based template files to manage how that content gets presented to visitors. Many of these content management systems deliver content via [server-side rendering](/docs/glossary/server-side-rendering/), which can hurt load times and slow down a site visitor's experience. Headless content management systems, on the other hand, return structured data via an [API](/docs/glossary/#api). When your content is available as structured data, it's available to any client or application that can consume that data whether a [Jamstack](/docs/glossary/jamstack/) application, or a mobile device. Rather than merging templates (the presentation layer) and content (the data layer) to create HTML, a headless CMS returns JSON or unstyled XML which can be compiled and optimized by frontend frameworks like Gatsby for faster performance. -With a headless CMS, marketers and content creators still use an WYSIWYG-like editing interface to add content to a headless CMS - it looks very similar or exactly the same as a backend like WordPress. But when the [backend](/docs/glossary#backend) management of the site's content is [_decoupled_](/docs/glossary#decoupled) from the [frontend](/docs/glossary#frontend) that displays it, developers can use the tools they love to create flexible, beautiful interfaces. They are free to use tools like React and GraphQL and a Git workflow to create fast, secure, scalable sites. +With a headless CMS, marketers and content creators still use an WYSIWYG-like editing interface to add content to a headless CMS - it looks very similar or exactly the same as a backend like WordPress. But when the [backend](/docs/glossary#backend) management of the site's content is [decoupled](/docs/glossary#decoupled) from the [frontend](/docs/glossary#frontend) that displays it, developers can use the tools they love to create flexible, beautiful interfaces. They are free to use tools like React and GraphQL and a Git workflow to create fast, secure, scalable sites. ## Benefits Of Headless Architecture @@ -40,6 +40,4 @@ With plugins, Gatsby supports several [headless CMS](/docs/how-to/sourcing-data/ ### Learn More -- [What is a Headless CMS and How to Source Content from One](/docs/how-to/sourcing-data/headless-cms/), from the Gatsby docs -- [3 Free Headless CMS's for Your Next Project](/blog/2019-10-15-free-headless-cms/), from the Gatsby blog -- [Building Sites with Headless CMSs](/blog/2018-2-3-sites-with-headless-cms/#reach-skip-nav), also from Gatsby blog +- [How to Source Content from a Headless CMS](/docs/how-to/sourcing-data/headless-cms/) diff --git a/docs/docs/how-to/sourcing-data/headless-cms.md b/docs/docs/how-to/sourcing-data/headless-cms.md index d0addedc18859..ed52de4b320b9 100644 --- a/docs/docs/how-to/sourcing-data/headless-cms.md +++ b/docs/docs/how-to/sourcing-data/headless-cms.md @@ -1,8 +1,8 @@ --- -title: What is a Headless CMS and How to Source Content from One +title: How to Source Content from a Headless CMS --- -A _headless CMS_ is content management software that enables writers to produce and organize content, while providing developers with structured data that can be displayed using a separate system on the frontend of a website or app. +A headless CMS is content management software that enables writers to produce and organize content, while providing developers with structured data that can be displayed using a separate system on the frontend of a website or app. A traditional, monolithic CMS is responsible for both the backend management of content, and serving that content to end users. In contrast, a headless CMS is decoupled from frontend concerns, which frees developers to build rich experiences for end users, using the best technology available. @@ -10,8 +10,6 @@ Many traditional content management systems (CMS), like WordPress and Drupal, no We've included setup guides, and links to the integration documentation as well as official starters (when these exist). -For integrating your site with a headless CMS: - @@ -37,23 +35,23 @@ The following CMSs have high popularity among Gatsby users and support key funct | CMS | Guides | Plugin Docs | Official Starter | | ----------------------------------------- | --------------------------------------------------------------------------- | --------------------------------------------------- | ----------------------------------------------------------- | -| [Cosmic](https://cosmicjs.com/) | [guide](https://docs.cosmicjs.com/guides/gatsby) | [docs](/plugins/gatsby-source-cosmicjs) | [starter](https://github.com/cosmicjs/gatsby-blog-cosmicjs) | +| [Agility CMS](https://agilitycms.com/) | [guide](/docs/sourcing-from-agilitycms/) | [docs](/plugins/@agility/gatsby-source-agilitycms/) | | +| [Builder.io](https://www.builder.io/) | [guide](/docs/sourcing-from-builder-io/) | [docs](/plugins/@builder.io/gatsby/) | | | [ButterCMS](https://buttercms.com/) | [guide](/docs/sourcing-from-buttercms/) | [docs](/plugins/gatsby-source-buttercms) | | -| [Ghost](https://ghost.org/) | [guide](/docs/sourcing-from-ghost/) | [docs](/plugins/gatsby-source-ghost/) | [starter](/starters/TryGhost/gatsby-starter-ghost/) | -| [Kontent by Kentico](https://kontent.ai/) | [guide](/docs/sourcing-from-kentico-kontent) | [docs](/plugins/@kentico/gatsby-source-kontent) | | -| [Directus](https://directus.io/) | | [docs](/plugins/@directus/gatsby-source-directus/) | | -| [GraphCMS](https://graphcms.com/) | [guide](/docs/sourcing-from-graphcms) | [docs](/plugins/gatsby-source-graphql) | | -| [Storyblok](https://www.storyblok.com/) | [guide](https://www.storyblok.com/tp/gatsby-multilanguage-website-tutorial) | [docs](/plugins/gatsby-source-storyblok) | | | [Cockpit](https://getcockpit.com/) | | [docs](/plugins/gatsby-plugin-cockpit) | | +| [Cosmic](https://cosmicjs.com/) | [guide](https://docs.cosmicjs.com/guides/gatsby) | [docs](/plugins/gatsby-source-cosmicjs) | [starter](https://github.com/cosmicjs/gatsby-blog-cosmicjs) | | [CraftCMS](https://craftcms.com/) | | [docs](/plugins/gatsby-source-craftcms) | | -| [Agility CMS](https://agilitycms.com/) | [guide](/docs/sourcing-from-agilitycms/) | [docs](/plugins/@agility/gatsby-source-agilitycms/) | | -| [Prepr CMS](https://prepr.io/) | [guide](https://docs.prepr.io/docs/frontend-integrations/v1/gatsby) | | | +| [Dialoguewise](https://dialoguewise.com/) | [guide](https://docs.dialoguewise.com/manage-content/sdk/gatsby) | [docs](/plugins/gatsby-source-dialoguewise) | | +| [Directus](https://directus.io/) | | [docs](/plugins/@directus/gatsby-source-directus/) | | +| [Flotiq](https://flotiq.com/) | [guide](/docs/sourcing-from-flotiq/) | [docs](/plugins/gatsby-source-flotiq) | | | [Forestry](https://forestry.io/) | [guide](/docs/sourcing-from-forestry/) | | | | [Gentics Mesh](https://getmesh.io) | [guide](/docs/sourcing-from-gentics-mesh) | | | -| [Builder.io](https://www.builder.io/) | [guide](/docs/sourcing-from-builder-io/) | [docs](/plugins/@builder.io/gatsby/) | | -| [Flotiq](https://flotiq.com/) | [guide](/docs/sourcing-from-flotiq/) | [docs](/plugins/gatsby-source-flotiq) | +| [Ghost](https://ghost.org/) | [guide](/docs/sourcing-from-ghost/) | [docs](/plugins/gatsby-source-ghost/) | [starter](/starters/TryGhost/gatsby-starter-ghost/) | +| [GraphCMS](https://graphcms.com/) | [guide](/docs/sourcing-from-graphcms) | [docs](/plugins/gatsby-source-graphql) | | +| [Kontent by Kentico](https://kontent.ai/) | [guide](/docs/sourcing-from-kentico-kontent) | [docs](/plugins/@kentico/gatsby-source-kontent) | | +| [Prepr CMS](https://prepr.io/) | [guide](https://docs.prepr.io/docs/frontend-integrations/v1/gatsby) | | | +| [Storyblok](https://www.storyblok.com/) | [guide](https://www.storyblok.com/tp/gatsby-multilanguage-website-tutorial) | [docs](/plugins/gatsby-source-storyblok) | | | [Webiny](https://www.webiny.com/) | [guide](https://www.webiny.com/docs/headless-cms/integrations/gatsby) | | [starter](/starters/webiny/gatsby-starter-webiny/) | -| [Dialoguewise](https://dialoguewise.com/) | [guide](https://docs.dialoguewise.com/manage-content/sdk/gatsby) | [docs](/plugins/gatsby-source-dialoguewise) | | ## Integrating with other CMSs