Blog

VibeAny includes a complete blog system built on fumadocs-mdx, making it easy to write and manage blog posts.

Directory Structure

Blog-related content is stored in the content directory:

content/
├── blog/                    # Blog posts
│   ├── my-first-post.mdx    # English post
│   └── my-first-post.zh.mdx # Chinese post
├── authors/                 # Author information
│   └── vibe-any.mdx
└── categories/              # Post categories
    ├── company.mdx
    └── product.mdx

Creating a Blog Post

Create a new .mdx file in the content/blog/ directory:

---
title: Hello World
description: My first blog post
image: /images/blog/hello-world.png  # Cover image (optional)
date: 2026-02-01T00:00:00Z
published: true                       # Set to false to hide
categories: [product]                 # Categories
author: vibe-any                      # Author
tags: [nextjs, tutorial]              # Tags
---

Here is the body content, supporting all MDX syntax...

Frontmatter Field Reference

Multi-language Support

The blog supports multiple languages, distinguished by file suffix:

• my-post.mdx — English version (default)
• my-post.zh.mdx — Chinese version

The system automatically loads the corresponding language version based on the current locale.

Managing Authors

Create author files in the content/authors/ directory:

---
name: John Doe
avatar: /images/authors/john.png
twitter: johndoe
---

Author bio goes here...

Then reference the author in blog posts with author: john.

Managing Categories

Create category files in the content/categories/ directory:

---
title: Tutorial
description: Technical tutorial articles
---

Then reference the category in blog posts with categories: [tutorial].

Accessing the Blog

Blog page routes are:

• List page: /blog
• Detail page: /blog/[slug]

Users can filter posts by category and click post cards to read the full article.

Customizing Styles

The blog pages use the following components, which you can customize in the corresponding files:

• Blog grid: src/shared/components/blog/blog-grid.tsx
• Blog card: src/shared/components/blog/blog-card.tsx
• Post content: src/shared/components/blog/custom-mdx-content.tsx

Developer

If you need to deeply customize the blog system, here are the core configuration files:

Source Configuration

Style Files

Route Files

Fumadocs Resources

• Collections Configuration — Learn how to define content collections
• MDX Components — Available MDX components