Blog System

Blog System

Verto includes a full blog alongside its documentation system. Blog posts live in their own content directory, render with a magazine-style card layout, and display tags, authors, and dates on every card. No extra configuration required. Drop an MDX file into the blog folder and it shows up.

Blog Post Frontmatter

Every blog post needs frontmatter at the top of the file. Here are the available fields:

FieldTypeRequiredDescription
titlestringYesThe post title, displayed on the blog card and in the browser tab
descriptionstringYesShort summary used on blog cards and in meta tags for SEO
datestringYesPublication date in "YYYY-MM-DD" format, used for sorting
authorstringYesAuthor name shown on the blog card
tagsstring[]YesList of tags displayed as badges on the card
ordernumberNoOptional ordering value for sidebar placement

A complete frontmatter block looks like this:

yaml
---
title: "Building a Custom Remark Plugin"
description: "How we built Verto's inline comment system from scratch."
date: "2026-02-15"
author: "tsaiggo"
tags: ["remark", "mdx", "plugins"]
order: 1
---

Creating a Post

Three steps:

  1. Create the file. Add a new .mdx file in content/blog/. The filename becomes the URL slug, so content/blog/my-first-post.mdx becomes /blog/my-first-post.

  2. Add frontmatter. Include all required fields at the top of the file: title, description, date, author, and tags.

  3. Write your content. Everything below the frontmatter is standard MDX. You can use all the same block components available in docs pages.

---
title: "My First Post"
description: "Getting started with Verto's blog."
date: "2026-03-01"
author: "tsaiggo"
tags: ["getting-started"]
---

# My First Post

Write your content here. All MDX features and block components work just like in docs.

Blog Index Page

The /blog route displays all posts in a responsive card grid. Each card shows the formatted date, post title, description, and tags. Cards are sorted by date in descending order, so the newest post always appears first.

The grid uses repeat(auto-fill, minmax(320px, 1fr)), which means it adapts from a single column on mobile to multiple columns on wider screens. Cards have a subtle hover effect that highlights the border in accent blue.

Tag Display

Tags appear on each blog card as small bordered badges. They're rendered directly from the tags array in your frontmatter. There's no separate tag index or filtering page. Tags serve as visual labels that help readers scan the grid and identify topics at a glance.

URL Structure

The blog uses a straightforward two-level URL scheme:

URLPage
/blogBlog index with all posts in a card grid
/blog/{slug}Individual post, where {slug} matches the filename

The slug comes directly from the MDX filename. A file named content/blog/custom-shiki-themes.mdx maps to /blog/custom-shiki-themes. Each post page includes full SEO metadata generated from the frontmatter fields.

  • MDX Authoring covers the MDX syntax and features available in blog posts
  • Block Components documents the components you can use inside blog content