In this post, we will learn about the Netlify CMS and how to set up a complete workflow for our example JAMstack blog built with Gatsby. JAMStack is the most buzzing word in the market, especially for the heavy frontend loaded websites with little dependency on the backend/databases.

JAMStack is the modern architecture of building web applications without using any server-side components and databases. JAMStack websites use JavaScript to fetch the dynamic data from Markups using APIs and renders them in static HTML/CSS templates. JAMstack websites are fast, more secure, easier to scale.

Organizations using JAMStacks, usually make use of this build-time data fetching to share logic-and-UI components, sort-of mini-apps, between their different projects (this allows for quick and safe compositions with standardized “look-and-feel” and “voice-and-tone”). Read more about sharing components between projects using Bit (Github).

What is Netlify CMS?

Netlify CMS is an open-source content management system (CMS) for static site generators that allows to edit our content and data as commits in applications Git Repositories in Markdown, JSON, YAML or TOML format. Netlify CMS is a single-page React application which acts as a wrapper for our Git Workflow to provide a simple and friendly User Interface (UI)

There are other headless CMS like Strapi, Contentful and others that we can also use with any other JAMStack websites.

Setup our Gatsby Blog

Gatsby is a React-based static site generator that uses GraphQL to query data from Markdown to render in React Components. We will need to install Gatsby CLI to create our blog from Gatsby boilerplates.

npm install -g gatsby-cli

We will be using Gatsby’s blog starter boilerplate for setting up our blogging site.

gatsby new netlify-cms-gatsby https://github.com/gatsbyjs/gatsby-starter-blog
cd netlify-cms-gatsby

Let’s run our application locally before integrating it with Netlify CMS—

#gatsbyjs #netlifycms #javascript #cms #jamstack