{"componentChunkName":"component---src-templates-post-jsx","path":"/hello-gatsby-part-4-configuring-netlify-cms","result":{"data":{"markdownRemark":{"html":"

After setting up a gatsby blog, to display our post content, we can take it a step further to configure Netlify CMS so that we can write and publish our blogs via an admin portal, as opposed to having to write the markdown in code, and then pushing it into the branch manually.

\n

Gatsby, as always, have some great tutorials on Sourcing from Netlify CMS. I would recommend you take a look at that before returning back here. This post is going to look at configuring the admin panel to a) show the UI components we want, and b) put the markdown files and their assets in the correct place.

\n

Configuration

\n

All of the Netlify configuration is stored within a config.yml file, which is stored in a folder with the repo path static/admin. Be sure that any configuration you make is within that folder/file path and you'll be dandy.

\n

Configuration Structure

\n

The configuration file contains multiple configuration options. My file uses 5;

\n
# 1.\nbackend:\n  name: \n  repo: \n\n# 2.\nmedia_folder: \n\n# 3.\npublic_folder: \n\n# 4.\npublish_mode: \n\n# 5.\ncollections:\n  - name: \n    label: \n    folder: \n    create: \n    fields:\n      - { name: title, label: Title }
\n

The Netlify documentation goes into detail, but lets just quickly take a small look into each;

\n
    \n
  1. \n

    backend

    \n

    Specifies the repository to store the content

    \n
    2. \n
  2. \n

    media_folder

    \n

    The relative path in the repo for where the assets will be stored

    \n
    3. \n
  3. \n

    public_folder

    \n

    The relative path in the URL from which the assets will be loaded

    \n
    4. \n
  4. \n

    publish_mode

    \n

    The option to save posts in a 'draft' state

    \n
    5. \n
  5. \n

    collections

    \n

    The group of content to create, in our case Blog posts

    \n
    6. \n
\n

The main one we will be looking at is 5. collections.

\n

Collections

\n

This is the configuration which tells Netlify where to store the post entries, and also importantly configures the UI which is displayed when creating blog post. It is possible to have multiple collections, each relative to a specific area or type and could each handle putting the markdown files in a different folder for your Gatsby website to do something differently with. I am only using the one, which will be for my blog posts.

\n
collections:\n  - name: \n    label: \n    folder: \n    create: \n    fields:\n      - { name: title, label: Title }
\n

In the example above we can see multiple properties within the config file;

\n\n

The first 4 properties are trivial with the third one being the most important one out of the 4.

\n
collections:\n  - name: blog\n    label: Blog\n    folder: content/blog-posts\n    create: true
\n

The property folder tells Netlify where it should store the new markdown files. This needs to match up with where Gatsby is looking for the markdown files so that it knows to get the new posts and create the content for them. When these match up, any content written in Netlify will be automatically build out and publish. In my instance, Gatsby looks for new blog posts in content/blog-posts so this is where I want Netlify to put all new posts.

\n
Asset Configuration
\n

In collaboration with the folder property, we need to store any new images (assets) that are a part of the blog post. This is section 2. and section 3. of the above overall configuration file.

\n

media_folder is where Netlify will store the images in the repository, whereas public_folder is where the images will be loacated via URL once they are published to our site. The images need to be publically accessible so that our guests can view the images, and Netlify needs to know where they will be in order for it to create a relative path from the blog post;

\n
![](assets/2020.05.22-12.21.png)
\n

The last property, fields, is where the fun happens.

\n

Fields Configration

\n

Moving onto the 5th property of the 5, we have the fields property. This is arguably the most fun* to configure

\n

* Fun being subjective, and dependent upon your Covid-19, 2020 lockdown situation.

\n

Fields are what make up the UI used when writing your content. The template I am using requires several fields to be configured, as such I can specify a field for each of these, and a corresponding widget, and then when it comes time to write the post I have all of the content that I require in order for the markdown to be parsed.

\n

To achieve a UI like this;

\n

\n

I have a configuration which looks like this;

\n
- { name: title, label: Title }\n- { name: category, label: Category, default: Tech }\n- { name: date, label: Date, widget: date }\n- { name: cover, label: \"Cover Image\", default: \"https://picsum.photos/seed/{REPLACE_ME}/1152/300\"}\n- { name: author, label: Author, default: \"dmcqueen\"}\n- { label: \"Tags\", name: \"tags\", widget: \"list\", default: [\"tech\"] }\n- { name: body, label: Body, widget: markdown }
\n

Once I write a new post, Netlify takes the values from these input fields and put them at the top of the markdown file, like this. Which is everything Gatsby needs to generate the post on the website.

\n
---\ndate: 2020-06-02T19:32:59.805Z\ntitle: \"Hello Gatsby - Part 3: Configuring a Custom Domain\"\ncategory: Tech\ncover: https://picsum.photos/seed/part3/1152/300\nauthor: dmcqueen\ntags:\n  - tech\n---
\n

It's easy to see the correlation between what is generated, and what is defined within config.yml. All you need to do is check which fields you want to create, and then create a new field using one of the widgets which can be configured, ranging from Boolean to DateTime, and Image to Number depending on the datatype you want to set.

\n

It really is quite powerful, and yet so simple to use. Hopefully you'll be able to configure the Netlify CMS admin panel to fit your needs, and have a nice clean blogging experience.

\n

Overall Configuration

\n

Below is the overall configuration I use for my netlify configuration yml file.

\n
# 1.\nbackend:\n  name: github\n  repo: david-mcqueen/gatsby-casper-blog\n\n# 2.\nmedia_folder: static/assets\n\n# 3.\npublic_folder: assets\n\n# 4.\npublish_mode: editorial_workflow\n\n# 5.\ncollections:\n  - name: blog\n    label: Blog\n    folder: content/blog-posts\n    create: true\n    fields:\n      - { name: title, label: Title }\n      - { name: category, label: Category, default: Tech }\n      - { name: date, label: Date, widget: date }\n      - { name: cover, label: \"Cover Image\", default: \"https://picsum.photos/seed/{REPLACE_ME}/1152/300\"}\n      - { name: author, label: Author, default: \"dmcqueen\"}\n      - { label: \"Tags\", name: \"tags\", widget: \"list\", default: [\"tech\"] }\n      - { name: body, label: Body, widget: markdown }
","timeToRead":5,"excerpt":"After setting up a gatsby blog, to display our post content, we can take it a step further to configure Netlify CMS so that we can write and…","frontmatter":{"title":"Hello Gatsby - Part 4: Configuring Netlify CMS","cover":"https://picsum.photos/seed/part-4/1152/300","date":"2020-06-07T10:03:42.802Z","category":"Tech","tags":["blog","musings","setup"],"author":"dmcqueen"},"fields":{"slug":"/hello-gatsby-part-4-configuring-netlify-cms"}},"prev":{"excerpt":"When connecting to your remote devices via SSH, it is important to make sure that you are authenticated…","frontmatter":{"title":"Adding SSH Key to Terminal for Easy Authentication","cover":"https://picsum.photos/seed/ssh-key-setup/1152/300","date":"2020-06-15T17:26:51.607Z"},"fields":{"slug":"/adding-ssh-key-to-terminal-for-easy-authentication"}},"next":{"excerpt":"Substantially easier than I expected it to be. Selecting the second option on the Overview page gives the…","frontmatter":{"title":"Hello Gatsby - Part 3: Configuring a Custom Domain","cover":"https://picsum.photos/seed/part3/1152/300","date":"2020-06-02T19:32:59.805Z"},"fields":{"slug":"/hello-gatsby-part-3-configuring-a-custom-domain"}},"authors":{"edges":[{"node":{"uid":"dmcqueen","name":"Dave McQueen","image":"/images/profile-pic.jpg","url":"https://dmcqueen.co.uk/","bio":"Tinkering | Experimenting | Learning"}}]}},"pageContext":{"slug":"/hello-gatsby-part-4-configuring-netlify-cms","total":20,"prev":"/adding-ssh-key-to-terminal-for-easy-authentication","next":"/hello-gatsby-part-3-configuring-a-custom-domain"}}}