FrontMatter CMS Usage

Overview

The FrontMatter CMS extension provides a powerful content management interface directly within VS Code for your Jekyll site. It offers a WordPress-like editing experience with visual content management, media handling, and taxonomy organization.

Table of Contents

Getting Started

1. Installation

The FrontMatter extension should already be installed as part of the workspace recommendations. If not:

  1. Open VS Code Extensions panel (Ctrl+Shift+X)
  2. Search for “FrontMatter”
  3. Install the “FrontMatter” extension by Elio Struyf

2. Opening the CMS

You can access the FrontMatter CMS in several ways:

  • Command Palette: Ctrl+Shift+P → “FrontMatter: Open dashboard”
  • Task Runner: Ctrl+Shift+P → “Tasks: Run Task” → “FrontMatter: Start CMS”

3. Content Management Interface

The CMS provides several panels:

  • Content Overview: Browse all your posts and pages
  • Media Library: Manage images and other assets
  • Taxonomies: Organize tags and categories
  • Snippets: Insert predefined content blocks

Content Types

The workspace is configured with three content types:

Default Pages

  • Simple pages with basic metadata
  • Used for: About pages, landing pages, etc.
  • Location: docs/ directory

Blog Posts

  • Full-featured blog posts with advanced metadata
  • Used for: News, tutorials, announcements
  • Location: docs/_posts/ directory
  • Filename format: YYYY-MM-DD-title.md

Documentation

  • Technical documentation with navigation order
  • Used for: User guides, API docs, tutorials
  • Location: docs/_docs/ directory

Creating Content

Using the Visual Editor

  1. Open FrontMatter dashboard
  2. Click “Create Content”
  3. Select content type (Post, Documentation, or Default)
  4. Fill in the metadata fields:
    • Title: Content title
    • Description: SEO description
    • Categories: Organize content (limit varies by type)
    • Tags: Keyword tags for discoverability
    • Featured Image: Visual representation
    • Draft Status: Control publication

Field Types Available

  • Text Fields: Title, description, author
  • Date/Time: Publication and modification dates
  • Choice Fields: Layout selection, callout types
  • Image Fields: Featured images with alt text
  • Boolean Fields: Draft status, TOC enable/disable
  • Number Fields: Navigation order for docs
  • Tags/Categories: Taxonomy management

Content Snippets

Pre-configured snippets for common content patterns. Access snippets through:

  • FrontMatter Dashboard: In the content editor panel
  • VS Code Command Palette: Ctrl+Shift+P → “FrontMatter: Insert snippet”
  • Editor Context Menu: Right-click in markdown files → “Insert FrontMatter snippet”

Standard Snippets

Image with Caption

Usage: Insert images with automatic caption formatting

  • Prompts for:
    • Image source (with file picker integration)
    • Alt text for accessibility
    • Caption text
  • Example output:
![Alt text](image-source.jpg)
_Caption text_

Code Block

Usage: Insert syntax-highlighted code blocks with language selection

  • Prompts for:
    • Programming language (dropdown menu)
    • Code content
  • Available languages:
    • TypeScript, JavaScript, Bash, YAML, JSON
    • Markdown, Ruby, Liquid, HTML, CSS, XML, SQL
  • Example output:
// Your code here

Callout/Alert Box

Usage: Insert callout boxes with interactive type selection

  • Prompts for:
    • Callout type (dropdown menu)
    • Message content
  • Available types:
    • 💡 Pro Tip
    • ⚠️ Warning
    • ✅ Success
    • ❌ Error
    • ℹ️ Info
  • Example output: > **💡 Pro Tip**: Your helpful message here

Liquid Tag Snippets

The workspace includes specialized interactive snippets for Jekyll Liquid tags. These snippets prompt you for input when inserted:

Liquid Variable

Usage: Insert `` syntax with custom variable name

  • Prompts for: Variable name
  • Example output: {{ variable_name }} (where variable_name is replaced with your input)
  • Common examples: {{ page.title }}, {{ site.description }}

Liquid Tag

Usage: Insert single Liquid tag with custom content

  • Prompts for: Tag content
  • Example output: {% assign var = value %}, {% include file.html %}

Liquid For Loop

Usage: Insert complete for loop structure with interactive options

  • Prompts for:
    • Loop item variable name
    • Collection to iterate over (dropdown with common options)
    • Loop content template
  • Available collections:
    • site.posts - All blog posts
    • site.pages - All pages
    • site.docs - All documentation
    • site.data.categories - Category data
    • site.data.tags - Tag data
    • page.tags - Current page tags
    • page.categories - Current page categories
  • Example output:
{% for post in site.posts %}
  {{ post.title }}
{% endfor %}

Liquid If Statement

Usage: Insert conditional block with custom condition and content

  • Prompts for:
    • Condition to check
    • Content when condition is true
  • Example output:
{% if page.title %}
  Content goes here
{% endif %}

Interactive Snippet Benefits

These interactive snippets provide:

  1. Guided Input: Prompts ensure correct syntax
  2. Pre-configured Options: Dropdown menus with common Jekyll objects
  3. Template Completion: Full code blocks with proper structure
  4. Error Prevention: Reduces syntax mistakes in Liquid code

Common Liquid Patterns (for reference)

Site Information:

{{ site.title }}
{{ site.description }}
{{ site.time | date: "%B %d, %Y" }}
{{ site.url }}{{ site.baseurl }}

Page Information:

{{ page.title }}
{{ page.date | date: "%Y-%m-%d" }}
{{ page.url | relative_url }}
{{ page.layout }}

Content Loops:

{% for post in site.posts limit:5 %}
  <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
{% endfor %}

Conditional Content:

{% if page.categories %}
  {% for category in page.categories %}
    {{ category }}
  {% endfor %}
{% endif %}

Data File Access:

{% for category in site.data.categories %}
  {{ category[1].name }}: {{ category[1].description }}
{% endfor %}

Media Management

Asset Organization

  • Public Folder: docs/assets/
  • Image Storage: docs/assets/images/
  • Automatic Processing: Images are automatically linked and optimized

Taxonomy Management

Categories

Predefined categories available:

  • tutorial
  • getting-started
  • development
  • typescript
  • jekyll
  • testing
  • deployment
  • configuration
  • best-practices

Tags

Common tags for content organization:

  • typescript, jekyll, development
  • vscode, wsl, testing
  • playwright, jest, markdown
  • documentation, ci-cd
  • github-actions, eslint, prettier
  • ruby, bundler, liquid, frontmatter

Data File Integration

Taxonomies are managed through YAML data files:

  • docs/_data/categories.yml
  • docs/_data/tags.yml

Workflow Integration

Jekyll Preview

FrontMatter integrates with Jekyll’s live preview:

  1. Start Jekyll server: npm run dev:jekyll
  2. Preview changes at http://localhost:4000

Version Control

FrontMatter automatically:

  • Tracks content changes
  • Integrates with Git workflows
  • Updates modification dates
  • Maintains frontmatter formatting

Advanced Features

Custom Fields

Add custom fields to content types by editing frontmatter.json:

{
  "title": "Custom Field",
  "name": "custom_field",
  "type": "string",
  "single": true
}

Content Templates

Templates are automatically applied based on content type:

  • Posts: docs/_posts/YYYY-MM-DD-title.md
  • Documentation: docs/_docs/title.md

Bulk Operations

Use the dashboard for:

  • Bulk tagging and categorization
  • Mass content updates
  • Publication scheduling
  • Draft management

Troubleshooting

Common Issues

  1. CMS not loading: Ensure the FrontMatter extension is enabled
  2. Content not appearing: Check file locations match configuration
  3. Images not displaying: Verify asset paths and public folder settings
  4. Metadata errors: Validate YAML frontmatter syntax

Configuration Files

Key configuration files:

  • frontmatter.json: Main CMS configuration (primary configuration)
  • docs/_config.yml: Jekyll site configuration
  • workspace.code-workspace: VS Code integration (minimal FrontMatter settings)

💡 Pro Tip: All FrontMatter CMS configuration is now centralized in frontmatter.json to avoid conflicts and maintain consistency. The workspace file only contains basic VS Code integration settings.

Tips and Best Practices

  1. Use consistent naming: Follow Jekyll naming conventions
  2. Optimize images: Use the built-in optimization tools
  3. Organize taxonomies: Keep categories broad, tags specific
  4. Preview regularly: Test content with Jekyll’s live reload
  5. Version control: Commit content changes regularly

Resources