How To Add Forestry CMS to Gridsome

This is part fourteen of a series on building a file-based blog from scratch with Gridsome. Find the full series here.

Until now, we've managed our content with Git.

And Git is great!

You have all the files necessary to build your project right there, in your repository.

But the editing experience sucks.

I write my articles in Roam Research before copying everything over into a markdown file. But I always think there has to be a better way. Something that offers the best of both worlds. Git as the single source of truth, and a great editing experience.

I found two solutions to this: Netlify CMS and Forestry CMS:

• Netlify CMS is an open source project by Netlify. You install it in your Git repository and it leverages Netlify Auth and Netlify Functions to provide a full editing experience of your JAMStack blog. When you edit or publish a blog post, the files are written to your repository, and your regular build pipeline deploys your blog. Despite the name, it also works with other static file hosts.
• Forestry CMS is a paid CMS that offers integration with your Git repository. At the time of writing, Forestry offers a much better mobile editing experience compared to Netlify CMS.

While Netlify CMS is free and Open Source, Forestry CMS has a free plan that allows for up to 3 projects.

I will try both eventually, but I wanted to start with Forestry CMS and use it a few weeks.

Let's get started!

Note: I am not affiliated with and receive no money from Forestry CMS. This is a guide for technical integration of Gridsome with Forestry and I'm just starting to explore the world of headless, Git-based CMS myself.

Set Up Your Forestry Account

The first step in using Forestry is to create an account with them. For this, go to Forestry.io.

In the setup, you connect Forestry with your Git provider (GitHub, GitLab, Bitbucket, and more) and then select the project you want to import.

Now, the setup process guides you through the steps.

Set Up Your Project

After importing your site, you set up the sidebar.
The sidebar contains your collections and individual pages.
We start by adding a "Blog Posts" collection:

• Add a section of type "Directory"
• Give it a label like "Blog Post"
• Use /content/blog as the path

Important: always click "save" when using Forestry.
Most settings, and your blog posts, are saved directly in your Git repository (which you can also edit locally).

Now, go to "Front matter" and add a template.
You can import your template from a blog post.
It's best to use the blog post with the most front matter, so you minimize your additions.
In our case, we select the "Helvetica Coloring" post, which contains the images we added last time.
You can make the important fields required, such as "slug", "date", "title", and "summary".
You should also change the export format for the date field to YYYY-MM-DD to keep things consistent.
(You can set the date display format however you want.)

Next, we configure how media are stored.
Go to Settings > Media and select "Commit Media to Repository".
Change the upload directory to content/media and set the public path to ../content/media.
This way, Gridsome correctly recognizes the images when you reference them.

Finally, you can set up preview commands by going to Settings > Previews.
The install command (npm install) and the build command (npm run develop) should be okay.
You just need to turn off "Review the preview button when the preview button is clicked".
And you need to set the output directory to dist, the default Gridsome build directory.

Now you're ready to create a blog post!

Next part: Create an Article Series Overview Page With Gridsome

That’s it for this post on how to integrate Forestry CMS with Gridsome. In the next part of this series, we add an overview page for an article series.