JAMstack with NuxtJS Content & Forestry = 🚀

JAMstack

I'm a JAMstack lover. It's easy, fast (like, really fast!), high performance, and cheap, thanks to providers such as Netlify.

For my last side project Tuto.dev, I wanted something simple to create & maintain the Frontend. I'm a fanboy of VueJS, so the choice of NuxtJS Content was a no-brainer for me. NuxtJS Content lets you create Markdown files under a folder called 'content' and then use
<nuxt-content> to populate your page with the content from the Markdown file. Yeah, it's that simple :

<template>
  <article>
    <h1>{{ page.title }}</h1>
    <nuxt-content :document="page" />
  </article>
</template>

<script>
export default {
  async asyncData ({ $content }) {
    const page = await $content('home').fetch()

    return {
      page
    }
  }
}
</script>

The CMS

Now that I have the Frontend ready, I wanted to create, edit & manage those Markdown files.

I've tested tons of Headless CMS like Sanity & Strapi. They are all great, but they don't fit my needs. I required something more basic! A way to edit my .md files from my content folder and push them into my GitHub repo to trigger a new build from Netlify. Nothing more.

So I've tried another solution at first: Obsidian. Obsidian is a text editor on steroids; if you're looking for a Notion alternative, you should give it a try.
Plus, you can install plugins made by the community, making it easier to create and maintain your work. And there is an Obsidian plugin made by Denis Olehov that Push the markdown files every x minutes. Remarkable!

It worked great, but media management was painful: your .md files are in a /content folder when your media files are in the /assets or /static folder. So every time I add an image into a folder, I had to remember the relative path and then add it into Obsidian ... boring.

Forestry 🌲

And then, someone shared with me another CMS I was not aware of : Forestry.io

When I first saw the website headline "Headless CMS that commits" I was excited like it was Christmas.
It was exactly what I was looking for! To summarize, Forestry is a CMS that can create & edit Markdown files and push them into your Repo when you save them.

Forestry is by far the most simplistic CMS I've ever used. But don't get me wrong: simplicity doesn't imply limited functionalities! Forestry is also a really powerful tool when it comes to media management and Front-Matter editing.

With the Front-Matter block, we can add and manipulate metadata from our Markdown file and then create an API by fetching those metadata into NuxtJS.

Yup, we can create an API with our Markdown files. When I first saw that, my mind was blown 🤯