Blog

​

Overview

​

Content Structure

• Location: web/next/content/blog/
• Format: MDX files with frontmatter
• Configuration: Defined in web/next/source.config.ts
• Navigation: Managed in web/next/content/blog/meta.json

​

Creating a Blog Post

---
title: My New Post
description: A brief description of my post.
---

## Introduction

Your blog content goes here...

{
  "pages": [
    "index",
    "getting-started-zero-starter",
    "type-safe-apis-hono-rpc",
    "my-new-post"
  ]
}

​

Configuration

import { defineConfig, defineDocs } from "fumadocs-mdx/config"

export const blog = defineDocs({
  dir: "content/blog",
  docs: {
    postprocess: {
      includeProcessedMarkdown: true,
    },
  },
})

export default defineConfig()

​

Key Configuration Options

• dir: Directory containing blog content (content/blog)
• includeProcessedMarkdown: Enables processed markdown for llms.txt endpoint

​

Navigation Structure

{
  "pages": [
    "index",
    "getting-started-zero-starter",
    "type-safe-apis-hono-rpc",
    "monorepo-architecture-saas",
    "authentication-better-auth"
  ]
}

​

MDX Features

​

Code Blocks

import { useState } from "react"

export function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>
}

​

Images

![Alt text](https://example.com/image.png)

​

Components

import { CustomComponent } from "@/components/custom"

<CustomComponent prop="value" />

​

Best Practices

1. Use descriptive file names: my-new-feature.mdx instead of post1.mdx
2. Write clear descriptions: Help readers understand what the post is about
3. Keep URLs clean: File names become URL slugs
4. Update meta.json: Always add new posts to the navigation
5. Use code blocks: Include syntax highlighting for code examples
6. Add images: Visual content improves engagement

​

Accessing Blog Posts

• Web UI: /blog/post-name
• AI-friendly: /blog/post-name.md (markdown format for LLMs)
• Index: /blog.md (list of all blog posts)