DEV Community

Faith Morante
Faith Morante

Posted on

Netlify CMS using Gitlab backend and Gatsby

#gatsby #netlify #gitlab #cms

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 }
Enter fullscreen mode Exit fullscreen mode

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/`, }, },
Enter fullscreen mode Exit fullscreen mode

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, }, }) }) }
Enter fullscreen mode Exit fullscreen mode

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 } } } `
Enter fullscreen mode Exit fullscreen mode

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

Netlify Admin

Cheers,
FM

Top comments (0)