Static CMS and Gatsby - Build in few minutes

As We finished publishing first blog using Gatsby starter library to Cloudflare Pages.

Next step is to configure cms for easy publishing/editing posts. There are few headless CMS choices availables e.g. Contentful, Strapi, Contentstack etc. Some full stack like 'Drupal' and 'Wordpress' and E-commerce platform like 'Shopify' is available.

What is Static CMS

Static CMS is open source content management system that enables you to provide editors with a friendly UI. It is build on single page React app. More can be read here

In this example, We going to use Static CMS plugin and enabling Netlify Identity service for authentication.

Install

npm install @staticcms/app gatsby-plugin-static-cms

Now, add the plugin to sthe'gatsby-config.js' file:

plugins: [`gatsby-plugin-static-cms`]

Configuration

To be able to access the Static CMS at the /admin route of the site, we will need to enable Netlify's Git Gateway through their Identity service.

We're using Netlify for our hosting and authentication in this tutorial, sob backend configuration is fairly straightforward.

Looking at the project structure, you will find src/ and static/ folders.

The static/ folder contains the images or files uploaded through the CMS, as well as the CMS config.yml file.

Inside the static/, create an admin folder. Inside this folder, create file config.yml.

  admin
  └ config.yml

For GitHub repositories, your Static CMS config file should start with these lines:

backend:
  name: git-gateway
  branch: main # Branch to update (optional; defaults to main)
  

Media and Public Folders

Static CMS allows users to upload images directly within the editor. For this to work, Static CMS needs to know where to save them. If you already have an images folder in your project, you could use its path, possibly creating an uploads sub-folder, for example:

Inside the admin folder, create an images folder and within the images folder, create an uploads sub-folder.

  admin
  ├ images
      └ uploads

Now add media folder and public folder path to your config.yml file.

media_folder: "images/uploads"
public_folder: "../../static/images"

Collections

In our starter blog, all posts stored in content/blog directory, with files saved in a title format, like Create%20and%20Publish%20your%20own%20GatsBy%20blog.md. Each post begins with YAML-formatted frontmatter:

---
title: Create and Publish your own GatsBy blog
date: "2023-08-14T22:12:03.284Z"
description: "A blog using GatsBy starter library and hosting on CloudFlare pages free"
---

## Step by step Guide: Gatsby on Cloudflare Pages

Given the above example, our collection settings would look like this in config.yml file:

collections:
  - name: "blog"
    label: "Blog"
    folder: "content/blog"
    create: true
    slug: "{{slug}}"
    path: "{{slug}}/index"
    editor:
      preview: false
    fields:
      - { label: "Title", name: "title", widget: "string" }
      - { label: "Publish Date", name: "date", widget: "datetime" }
      - { label: "Description", name: "description", widget: "string" }
      - { label: "Body", name: "body", widget: "markdown" }

Git Gateway

Netlify's Git Gateway connects your site to a Git Provider's API, enabling the CMS to work with content.

To enable Git Gateway, go to Site configuration > Identity > Services Scroll down to the Git Gateway section and click Enable Git Gateway button.

Enable Identity

We are going to use Netlify's built-in authentication service called Identity.

1. In the Netlify UI, navigate to your site.
2. Select the Integrations tab and choose Identity.
3. On the Netlify Identity integration, click the Enable button.
4. Inside invite users dialog, enter your email to invite yourself and click Send

Accept the Invite

Check your email for the invitation from the previous step. Right-click on Accept the Invite and paste the link into your browser.

Before executing the link, add admin/ before the invite token as shown below in the screenshot.

Complete the user registration by setting a password.

Loading Content with Static CMS

Now, it's time to load your first post using the Static CMS UI.