Front Matter CMS brings the CMS to your editor, it runs within Visual Studio Code, GitPod, and many more.
Integration with AstroSection titled Integration with Astro
In this section, we’ll walk through how to add Front Matter CMS to your Astro project.
PrerequisitesSection titled Prerequisites
- Visual Studio Code
- Use the Astro Blog template to provide the base configuration and sample content to start with Front Matter CMS.
Install the Front Matter CMS extensionSection titled Install the Front Matter CMS extension
Project initializationSection titled Project initialization
Once Front Matter CMS is installed, you will get a new icon in the Activity Bar. It will open the Front Matter CMS panel in the primary sidebar when you click on it. Follow the next steps to initialize your project:
- Click on the Initialize project button in the Front Matter panel
- The welcome screen will open, and you can start initializing the project
- Click on the first step to Initialize project
- As Astro is one of the supported frameworks, you can select it from the list
- Register your content folders, in this case, the
- You will be asked to enter the name of the folder. By default, it takes the folder name.
- Click on Show the dashboard to open the content dashboard
Project configurationSection titled Project configuration
Once the project is initialized, you will get a
frontmatter.json configuration file and a
.frontmatter folder in the root of your project.
Content-type configurationSection titled Content-type configuration
Content-types are the way Front Matter CMS manages your content. Each content-type contains a set of fields, which can be defined per type of content you want to use for your website.
The fields correspond to the front matter of your page content.
You can configure the content-types in the
- Open the
- Replace the
frontMatter.taxonomy.contentTypesarray with the following content-types configuration:
Preview your articles in the editorSection titled Preview your articles in the editor
From the Front Matter CMS panel, click on the Start server button. This action starts the Astro local dev server. Once running, you can open the content dashboard, select one of the articles and click on the Open preview button to open the article in the editor.
Create new articlesSection titled Create new articles
Open the Front Matter CMS Dashboard; you can do this as follows:
- Open the Front Matter CMS’ content dashboard
- Click on the Create content button
- Front Matter will ask you for the title of the article. Fill it in and press enter
- Your new article will be created and opened in the editor. You can start writing your article.
Using Markdoc with Front Matter CMSSection titled Using Markdoc with Front Matter CMS
To use Markdoc with Front Matter CMS, you must configure this in the
frontMatter.content.supportedFileTypes. This setting lets the CMS know which types of files it can progress.
You can configure the setting as follows:
To allow your content to be created as Markdoc, specify the
fileType property on the content-type.