Front Matter Headless CMS running in VS Code

Markdown + Vs Code + FrontMatter Headless CMS

What is FrontMatter Headless CMS, and how to use it with Nextjs

FrontMatter Headless CMS is a new markdown CMS working inside vscode.

FrontMatter headless CMS is working with markdown files. frontMatter headless CMS installed with vscode extension. You do not need any library or additional tools to run it. You need vscode and install it as a vscode extension.

FrontMatter headless CMS comes with lots of inbuilt features.

1. Manage markdown file
2. Managing media like images, files, etc
3. Integration with all static CMS like HUGO, Gatsby, Nextjs, 11ty, docusaurus, Jekyll, and Others
4. Content Types and SEO check
5. Full site/page preview in vsCode.

Installation

FrontMatter headless CMS is straightforward. First, you need a vscode IDE. Then, click on the extension tab, find the FrontMatter extension, and download it.

Install the new extension in vscode

The second way is to install the extension in vscode with extension-cli. Open VS Code and open VS code command pallet press (Ctrl+P) and paste the following command, and press enter.

ext install eliostruyf.vscode-front-matter

DEMO

DEMO of frontmatter cms

Setup for nextjs

Initializing the Frontmatter cms setup in nextjs is a straightforward and quick process to set up frontmatter within five clicks.

steps

1. Open Initialize frontmatter dashboard
2. Initialize project
3. Select Framework
4. Register Content Folder
5. Import All tags and Categories
6. Show the dashboard

Open Initialize frontmatter dashboard

The first setup is open Initialize dashboard in the front matter cms and starts the configuration of the front matter cms in the working project.

Open Initialize frontmatter dashboard

Initialize project

The following setup is to initialize a new project with frontmatter in nextjs.

initialize a new project with front matter cms

Select Framework

Front matter automatically selects the nextjs Framework. Otherwise, select manually in the drop-down list.

Select Framework in frontmatter cms

Register Content Folder

Register markdown content folder with frontmatter cms. Register Contact folder tells frontmatter cms we store all files in the following folder; you add one or more folders in frontmatter according to requirement.

Register Content Folder

Right-click on the markdown folder, then click on the FrontMatter: Register Folder button.

Select the content folder in the front matter and register the folder

Import All tags and Categories

Import all available tags and categories from the markdown files.

Import All tags and Categories in frontmatter cms

Show the dashboard

All the steps are completed, and now the open front matter dashboard is in vscode.

Show dashboard in front matter cms

Dashboard

Your frontmatter dashboard looks like this after completing the setup.

Front matter cms dashboard

Conclusion

FrontMatter Headless CMS is a great tool to manage markdown files in vscode. It provides similar functionality to the content layer library. The big difference in the content layer library does not provide a UI dashboard, and the content layer needs more space and increased node_module folder size. That computer needs more space and ram to run local development.\

One significant drop back in frontmatter with nextjs. Front matter does not reload our website when we change a markdown file.

You can share and follow us on Twitter and Linkedin. If you like my work, please read more content on the officialrajdeepsingh. dev, Nextjs, and Sign up for a free newsletter on nextjs