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:
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.
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.
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:
/content/blogas 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
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 (
yarn install) and the build command (
yarn 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!
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.