Using Frontmatter CMS with Astrojs Static Site


Authored By : tdnshah
3 minutes read
Published On
Friday, Mar 17, 2023

Recently I was looking for better was to manage the markdown files of for my static blog website and I didnt want to leave behind editor interface just to write a new blog article as I am too lazy to switch between multiple interfaces. Hence while I was searching on the google if any such simple products exsist which looks a CMS.

The IDE i use for my development purpose is VS code hence I thought to search if there is any vscode based solution and as always we think it and VSCode extension is available for the same and I got to know about Frontmatter CMS, which is a CMS right in your code editor as per there website and this looked to be interesting to me hence I thought of exploring the same with my Astrojs based static blog.

Below are my observation about using Frontmatter CMS with Astro js static in VScode is as below:

Here I will first ldown what I was actually looking for and see if frontmatter cms satisfies my needs…

  1. What I was looking for is an dashboard kind of interfacew listing blog post?

Yes, Frontmatter CMS once configured provides a nice grid interface listing all the blogs post, it also provides and option to “Create” “Deleted” & “Update” the articles below image shpows how the interface looks like.

Frontmatter CMS Dashboard

  1. A nice markdown editor for creating, editing and updating articles ?

This is where I found Frontmatter CMS needs to improve as in the current interface it provides if we try to edit any article it just open a file in vs code which as a claimed CMS should have a proper wisysig editor like Quilljs or editorjs etc.

  1. I wanted some frontmatter to be auto populated like published date, last modified date etc..?

Yes, FrontMatter CMS provide this as a feature, I havent yet tried but wanted this feauture for other frontmatters like UUID etc, but I am sure there might be an api to create either a custom field for such custom requirements.

  1. Nice interface to select list of tags/categories alsready used in other posts so that duplicated with spelling changes can be avoided like blog & blogs?

Yes, Frontmatter CMS provides a nice interface with select list type of fields and also prepopulates the tags used in all the posts this is done using a content type defination in frontmatter.json file

Frontmatter CMS Tags select list.

I am still exploring new features and how it can be used as a CMS in IDE and will keep updateing thos post so that others can also leverage this awesome in IDE CMS for static sites.

You can find more about Frontmatter CMS on there official Website


How We Can Help You With Your Next Project?