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.
- Manage markdown file
- Managing media like images, files, etc
- Integration with all static CMS like HUGO, Gatsby, Nextjs, 11ty, docusaurus, jekyll, and Others
- Content Types and SEO check
- Full site/page preview in vsCode.
FrontMatter headless CMS is straightforward. First, you need a vscode IDE. Then, click on the extension tab, find the FrontMatter extension, and download it.
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
Setup for nextjs
Initializing the Frontmatter cms setup in nextjs is a straightforward and quick process to set up frontmatter within five clicks.
- Open Initialize frontmatter dashboard
- Initialize project
- Select Framework
- Register Content Folder
- Import All tags and Categories
- 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.
The following setup is to initialize a new project with frontmatter in nextjs.
Front matter automatically selects the nextjs Framework. Otherwise, select manually in the drop-down list.
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.
Right-click on the markdown folder, then click on the FrontMatter: Register Folder button.
Import All tags and Categories
Import all available tags and categories from the markdown files.
Show the dashboard
All the steps are completed, and now the open front matter dashboard is in vscode.
Your frontmatter dashboard looks like this after completing the setup.
FrontMatter Headless CMS is a great tool to manage markdown files in vscode. It provides similar functionality to the contentlayer library. The big difference in the contentlayer library does not provide a UI dashboard, and the contentlayer 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.