Using the Forestry CMS with Metalsmith

Update on March 22, 2023 : Forestry is dead. Forrestry has been sunset in favor of the new shinny TinaCMS. TinaCMS has a completely new UI and a lot of new features. I have not yet tried it out but it looks very promising. I may try it out in the future... no promisses.

In the last couple of posts I discussed the details of integrating Netlify CMS with Metalsmith. In this post I'll provide an overview of how to use Forestry for content editing with Metalsmith. Forestry.io is a Git-backed CMS for websites and web products that are built with static site generators. Just like Netlify CMS, Forestry provides an editor-friendly interface for Git.

Forestry has a free plan for personal projects with no credit card required.

We'll be using the Metalsmith Forestry Starter to set up Forestry CMS.

After we have signed up for an account, we'll add a site to our account by clicking the Add Site button in our dashboard.

The initial steps to import the site code from our Git providert are well explaioned in Forestry's docs so I'll not repeat this here.

Configure the site

Once the site has been added we can configure the site. If you have followed the steps in the Forestry article you should see your site's dashboard.

Sidebar

The Metalsmith Forestry Starter has two folders that we want to edit, the content and the data folder. The content folder contains all pages and the data folder contains the site meta data and the navigation data.

We will add them to the sidebar for easy access.

Click the Configure Sidebar button, then the Add Section button in the sidebar dashboard and select Directory.

Add the info as shown below

Here we say that we want to all files to be shown and that we allow creation of files and folders. Files will be in markdown format.

Note that we exclude the data folder for this display. We will add this folder separately to the sidebar.

Add the data section

Once these two items are setup, click the Save button before you leave the sidebar section.

Repository

The repository section will be filled in already, nothing to do here.

Media

The Metalsmith Forestry Starter commits all images to Git. The starter does not use many images so this is not an issue. For websites with many images I recommend to use Cloudinary. That makes it very simple to implement responsive images.

Previews

Select Node, click Select and fill in the configuration fields as shown below, then click Save.

Now your sidebar should look like this. You are ready to edit your site. Click on Content in the sidebar and you'll see the pages of the starter. Click on index.md to see the home page.

Forestry will show the page with the frontmatter on the left and the page body on the right. There is no template applied.

![]9https://res.cloudinary.com/glinkaco/image/upload/w_1800,f_auto/v1648680767/tgc2022/blogImages/using-forestry-metalsmith/forestry-editor_dxzhgz.png

We can create a template from this page by simply clicking on the three dots in the upper right corner and selecting Create Template. Name this template Simple. Now you can find the template under Frontmatter in the sidebar. Read all there is to know about Frontmatter templates here.

This should get you started with editing your Metalsmith site with the Forestry CMS.

Here are some suggestions for further reading:

If you have any questions about this post please chat with me on Gitter.

Scroll to top