Netlify CMS custom preview not working with gatsbyjs

I cloned this gatsby netlify cms starter blog and am trying to add custom previews. I have followed all the instructions, but it is still not working. This is my config.yml:

  name: github
  repo: redline-gh/ibraheemca

media_folder: content/assets
public_folder: ../assets

  - name: "blog"
    label: "Blog"
    folder: "content/blog"
    create: true
      - { name: path, label: Path }
      - { name: date, label: Date, widget: date }
      - { name: title, label: Title }
      - { name: description, label: Description }
      - { name: body, label: Body, widget: markdown }

I added the gatsby-plugin-netlify-cms like this:

plugins: [
      resolve: 'gatsby-plugin-netlify-cms',
      options: {
        modulePath: `${__dirname}/src/cms/cms.js`,

In my cms.js, I have:

import CMS from 'netlify-cms-app'

import BlogPostPreview from './preview-templates/BlogPostPreview'

CMS.registerPreviewTemplate('blog', BlogPostPreview)

And my BlogPostPreview is just rendering the BlogPostTemplate:

import React from 'react'
import { BlogPostTemplate } from '../../templates/blog-post'

const BlogPostPreview = ({ entry, widgetFor }) => {

  return (
      title={entry.getIn(['data', 'title'])}
      date={new Date()}

export default BlogPostPreview

Am I missing anything? I don’t think so. I compared my config with the official starter repo, and could not find any differences. When I go to the new blog post on the admin portal, I just see the default plain html. Any help would really be appreciated.

You can view my repo here

Hi @redline-gh, welcome to the community and sorry for the delayed response.

I can’t see the repo you linked so I’m assuming it is a private repo.
Also doesn’t seem to have any custom previews.
The code looks ok, but missing the actual component BlogPostTemplate code so it’s hard to know how the preview should look like.

What are you expecting to see vs the actual preview?

A screenshot would help.