DEV Community

Faith Morante
Faith Morante

Posted on

Netlify CMS using Gitlab backend and Gatsby

I have done Netlify CMS with Github before using Git-Gateway, but when I tried it with Gitlab, it doesn't seem to work; and when you hit a blocker, you gotta try another way. So this time I tried Gitlab backend.

NOTE: To continue with this tutorial, you should have a Gatsby project hosted in Netlify.

How to create a Gatsby site

Netlify CMS with Github

Once you have your Gatsby site hosted in Netlify.

1) Enable Identity in your Netlify dashboard
2) Under Identity Settings, choose Gitlab as your External Provider
External Provider
3) Follow the first two steps here
Gitlab implicit auth
4) Create a folder in your repo in root.
config.yml inside static/admin/
5) Your config.yml should look something like this:

backend:
  name: gitlab
  repo:  # Path to your GitLab repository
  auth_type: implicit # Required for implicit grant
  app_id: # Application ID from your GitLab settings

media_folder: static/assets
public_folder: assets

collections:
  - name: events
    label: Events
    folder: events
    create: true
    fields:
      - { name: path, label: Path }
      - { name: date, label: Date, widget: date }
      - { name: title, label: Title }
      - { name: thumbnail, label: Thumbnail, widget: image }
      - { name: tags, label: Tags, widget: list }
      - { name: body, label: Body, widget: markdown }

6) So I have an Events collection with markdown files in it. That will serve as the content under my Events. For that to work, you should have an events folder with a sample markdown file inside.
7) Also npm install/ yarn add this gatsby-transformer-remark
8) In your gatsby-config.js, add this:

`gatsby-transformer-remark`,
{
    resolve: `gatsby-source-filesystem`,
    options: {
        name: `events`,
        path: `${__dirname}/events/`,
    },
},

9) In your gatsby-node.js, add this:

const path = require(`path`);
const { createFilePath } = require(`gatsby-source-filesystem`);

exports.onCreateNode = ({ node, getNode, boundActionCreators }) => {
    const { createNodeField } = boundActionCreators
    if (node.internal.type === `MarkdownRemark`) {
        const slug = createFilePath({ node, getNode, basePath: `pages` })
        createNodeField({
            node,
            name: `slug`,
            value: slug,
        })
    }
};

exports.createPages = async ({ graphql, actions }) => {
    const { createPage } = actions
    const result = await graphql(`
      query {
        allMarkdownRemark {
            edges {
                node {
                    fields {
                        slug
                    }
                    frontmatter {
                        title
                        path
                    }
                }
            }
        }
      }
    `)
    result.data.allMarkdownRemark.edges.forEach(({ node }) => {
      createPage({
        path: node.frontmatter.path,
        component: path.resolve(`./src/templates/post.js`),
        context: {
          // Data passed to context is available
          // in page queries as GraphQL variables.
        //   slug: node.fields.slug,
        },
      })
    })
}

What this does is creating pages from each markdown in your events folder.

10) In your src/templates/post.js file, add this:

import React from "react";
import { graphql } from 'gatsby'

export default ({ data }) => {
    const post = data.markdownRemark

    return (
        <div>
            <div className="content blog-content">
                <h1>{post.frontmatter.title}</h1>
                <div dangerouslySetInnerHTML={{ __html: post.html }} />
            </div>
        </div>
    );
};

export const pageQuery = graphql`
  query($path: String!) {
    markdownRemark(frontmatter: { path: { eq: $path } }) {
      html
      frontmatter {
        title
      }
    }
  }
`

When you go to your {domain}.netlify.com/admin/ and sign in, you should see something like this:

Netlify Admin

Cheers,
FM

Discussion (0)