How to integrate Netlify CMS with Gridsome?
Tags: netlifycms, gridsome, vue, ssr
Published: 2018-11-21 18:36:46

---
title: How to integrate Netlify CMS with Gridsome?
published: true
description: Modify your website using Netlify CMS and no need to mess with the code 😅
tags: netlify cms, gridsome, vue, ssr
cover_image: https://thepracticaldev.s3.amazonaws.com/i/dg5h592gzpcgguydkup1.png
---

Gridsome is awesome 🤘🏻 and the possibility to integrate with other tools are endless... 

Let's get down the road and learn how to integrate Netlify CMS with Gridsome.

> It's fine, if you don't want to follow along, you can start using this [Gridsome Starter NetlifyCMS Kit](https://github.com/mittalyashu/gridsome-starter-netlifycms), _easy peasy_. Right? 😲

***

Netlify CMS works with wide range of file format `markdown`, `JSON`, `YAML`, or `TOML` stored in git repository on GitHub, GitLab or BitBucket. A static `admin` folder containing two files, inside the `/static` directory of your repo runs Netlify CMS.

Inside the `admin` directory, all the 🌟 magic happens, where you'll create two files:

```
admin
 ├ index.html
 └ config.yml
```

The first file, `admin/index.html`, is the 🚪 entry point for the Netlify CMS admin interface. This means that you can navigate to `yoursite.com/admin/` to access it. On the code side, it's a basic HTML starter page that loads the Netlify CMS JavaScript file.

```html
<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Content Manager</title>
</head>
<body>
  <!-- Include the script that builds the page and powers Netlify CMS -->
  <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
</body>
</html>
```

The second file, `admin/config.yml`, is the core of the Netlify CMS, and a bit more complex. Add all the code snippets in this section, goes to your `admin/config.yml` file.

## Backend 

We'll use Netlify for hosting and 🙈 authentication, so backend configuration is fairly straightforward.

```yml
backend:
  name: github
  branch: master # Branch to update (optional; defaults to master)
```

## Media and Public Folders

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

```yml
# This line should *not* be indented
media_folder: "images/uploads" # Media files will be stored in the repo under images/uploads
```

If you're creating a new folder for uploaded media, you'll need to know where your Gridsome expects static files. You can put your media folder in the same location where you put the admin folder.

Note that the `media_folder` file path is relative to the project root.

```yml
# These lines should *not* be indented
media_folder: "static/images/uploads" # Media files will be stored in the repo under static/images/uploads
public_folder: "/images/uploads" # The src attribute for uploaded media will begin with /images/uploads
```

The configuration above adds a new setting, `public_folder`. While `media_folder` specifies where uploaded files are saved in the repo, `public_folder` indicates where they are found in the published site. Image `src` attributes use this path, which is relative to the file where it's called. For this reason, the path usually start at the site root, using the opening `/`.

If `public_folder` is not set, Netlify CMS defaults to the same value as `media_folder`, adding an opening `/` if one is not included.

## Collections

Collections 💭 define the structure for the different content types on your static site.

Let's say your site has a blog, with the posts stored in `blog` directory, and files saved in a date-title format, like `2018-11-20-goosebumps.md`. Each post begins with settings in yaml-formatted front matter, like so:

```md
---
layout: blog
title: "Goosebumps"
date: 2018-11-20 23:42:14 -0700
thumbnail: "/images/ghost.jpg"
---

This is the body content, where I write anything as long as I want, but it has to be in the markdown format, that's the only condition. 😉
```

Given this example, our collections settings would look like this in your Netlify CMS config.yml file:

```yml
collections:
  - name: "blog" # Used in routes, e.g., /admin/collections/blog
    label: "Blog" # Used in the UI
    folder: "blog" # The path to the folder where the documents are stored
    create: true # Allow users to create new documents in this collection
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}" # Filename template, e.g., YYYY-MM-DD-title.md
    fields: # The fields for each document, usually in front matter
      - {label: "Layout", name: "layout", widget: "hidden", default: "blog"}
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Publish Date", name: "date", widget: "datetime"}
      - {label: "Featured Image", name: "thumbnail", widget: "image"}
      - {label: "Body", name: "body", widget: "markdown"}
```

There are lot more things offered by Netlify CMS like Filters, Authentication, Git-Gateway and lot more 🤯.

This is sneak peek of how integration works with Gridsome and Netlify CMS, to learn more in depth, consider read the [Netlify CMS docs](https://www.netlifycms.org).

I have build a simple starter kit for you [Gridsome Starter NetlifyCMS](https://github.com/mittalyashu/gridsome-starter-netlifycms), it's easy to get started with 👇🏻.

![Gridsome Starter NetlifyCMS Screenshot](https://thepracticaldev.s3.amazonaws.com/i/5kevhchpwd1d8ndt1gx0.jpg)

## Reference

* [NetlifyCMS Docs](https://www.netlifycms.org/docs/add-to-your-site)
* [Gridsome Website](https://gridsome.org)
* [Gridsome community chat](https://discord.gg/7znJUkH)

Found this article interesting? Consider buying a coffee for me.
[![Buy Me A Coffee Button](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/mittalyashu)