diff --git a/docs/docs/glossary.md b/docs/docs/glossary.md index 6aa376ee52228..45b6d987a799d 100644 --- a/docs/docs/glossary.md +++ b/docs/docs/glossary.md @@ -148,7 +148,7 @@ A [query](#query) language that allows you to pull data into your website or app A markup language that every web browser is able to understand. It stands for Hypertext Markup Language. [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) gives your web content a universal informational structure, defining things like headings, paragraphs, and more. It is also key to providing an accessible website. -### Headless CMS +### [Headless CMS](/docs/glossary/headless-cms) A [CMS](#cms) that only handles the [backend](#backend) content management instead of handling both the backend and [frontend](#frontend). This type of setup is also referred to as [Decoupled](#decoupled). diff --git a/docs/docs/glossary/headless-cms.md b/docs/docs/glossary/headless-cms.md new file mode 100644 index 0000000000000..7fb2d5460f1f3 --- /dev/null +++ b/docs/docs/glossary/headless-cms.md @@ -0,0 +1,22 @@ +--- +title: Headless CMS +disableTableOfContents: true +--- + +Learn what a Headless CMS is, how it differs from traditional content management systems, and why you might choose a headless CMS for your project. + +## What is a Headless CMS? + +A _headless content management system_ or _headless CMS_, is a CMS in which the content is separated from its presentation. Content management systems such as WordPress and Drupal store content in a database, and use a collection of HTML-based template files to manage how that content gets presented to visitors. + +Headless content mananagement systems, on the other hand, return structured data from an [API](/docs/glossary/#api). Rather than merging templates and content to create HTML, a headless CMS returns JSON or unstyled XML. Content creators still use an editing interface to add content to a headless CMS, but 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. + +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. You can use a headless CMS to provide [JSON content source](/docs/sourcing-content-from-json-or-yaml/) for your Gatsby site and your other content channels. + +With plugins, Gatsby supports several [headless CMS](/docs/headless-cms/) services, including [Contentful](https://www.contentful.com/), [Ghost](https://ghost.org/pricing/) and [Prismic](https://prismic.io/). If you use WordPress, there's no need to switch. You can use WordPress' [REST API](/docs/sourcing-from-wordpress/) as a headless CMS, so that your content team can continue to use the editing tools with which they're familiar. + +## Learn More + +- [What is a Headless CMS and How to Source Content from One](/docs/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 diff --git a/www/src/data/sidebars/doc-links.yaml b/www/src/data/sidebars/doc-links.yaml index 1361ecd660236..7f47467daa64e 100644 --- a/www/src/data/sidebars/doc-links.yaml +++ b/www/src/data/sidebars/doc-links.yaml @@ -723,6 +723,8 @@ items: - title: GraphQL link: /docs/glossary/graphql + - title: Headless CMS + link: /docs/glossary/headless-cms/ - title: JAMStack link: /docs/glossary/jamstack - title: Node.js