Skip to content

Commit

Permalink
chore(docs): Update headless CMS
Browse files Browse the repository at this point in the history
  • Loading branch information
@LekoArts
LekoArts committed Jan 18, 2023
1 parent 16685a6 commit 88dc3b6
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 20 deletions.
8 changes: 3 additions & 5 deletions docs/docs/glossary/headless-cms.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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/)
28 changes: 13 additions & 15 deletions docs/docs/how-to/sourcing-data/headless-cms.md
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,15 @@
---
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.

Many traditional content management systems (CMS), like WordPress and Drupal, now support a “headless” or “decoupled” mode, which is perfect for Gatsby sites. Through use of source plugins, Gatsby has support for dozens of headless CMS options, allowing your content team the comfort and familiarity of its preferred admin interface.

We've included setup guides, and links to the integration documentation as well as official starters (when these exist).

<CloudCallout>For integrating your site with a headless CMS:</CloudCallout>

<!--
Ordering in this section is driven by Gatsby plugin downloads (/plugins/?=gatsby-source-) & CMS vendor size/adoption. The Gatsby team is responsible for deciding which CMSs are included in the "Main CMSs" section.
-->
Expand All @@ -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

Expand Down

0 comments on commit 88dc3b6

Please sign in to comment.