Skip to main content
Sabo includes a complete, file-based blog system powered by MDX. All blog content is stored as .mdx files in the src/content/blog/ directory, making it easy to manage your posts using Markdown.
  • Content Location: sabo/src/content/blog/
  • Public Assets: sabo/public/blog/ (author pictures and post thumbnails)
  • List Page: sabo/src/app/blog/page.tsx
  • Entry Page: sabo/src/app/blog/[slug]/page.tsx
  • Helper: sabo/src/lib/posts.ts

​
Adding a New Blog Post

Creating a new blog post is as simple as adding a new MDX file.
1

Create a New File

Create a new .mdx file inside the src/content/blog/ directory. The filename will be used as the URL slug, so it’s best to use kebab-case (e.g., my-first-post.mdx).
2

Add Frontmatter

At the very top of your new file, add a “frontmatter” block. This is a YAML block surrounded by --- that contains all the metadata for your post.
---
title: "Your Amazing Post Title"
description: "A brief and engaging description for search engines and previews."
date: "2024-08-15"
author:
  name: "Author Name"
  picture: "/blog/authors/author-image.png"
thumbnail: "/blog/thumbnails/post-thumbnail.png"
tags: ["nextjs", "react", "tutorial"]
---
3

Write Your Content

Below the frontmatter, write your blog post content using Markdown and MDX.

​
Basic Formatting

You can use all standard Markdown features like bold text, italics, and lists.
  • External Links: Use standard Markdown syntax: [Link Text](https://example.com)
  • Internal Links: For linking to other pages within your site (e.g., the pricing page), it’s recommended to import and use Next.js’s <Link> component for optimal performance.
import Link from "next/link";

Check out our <Link href="/pricing">pricing page</Link> for more details.
You can also import and use other custom React components.
---
(frontmatter from step 2)
---

# My First Blog Post

Welcome to my blog! Here's some **bold text** and a list:

- Item 1
- Item 2

You can even include code blocks with syntax highlighting.
4

Add Images

  • Author Pictures: Place new author images in public/blog/authors/.
  • Post Thumbnails: Place new thumbnail images in public/blog/thumbnails/.
Reference these images using a root path in your frontmatter (e.g., /blog/authors/name.png).

​
Understanding the Frontmatter

All fields in the frontmatter are important for how the post is displayed.
​
title
string
The main title of the blog post.
​
description
string
A short summary used for SEO and on the blog listing page.
​
date
string
The publication date in YYYY-MM-DD format. This is used to sort posts.
​
author.name
string
The name of the post’s author.
​
author.picture
string
The path to the author’s image, relative to the public folder.
​
thumbnail
string
The path to the post’s thumbnail image, relative to the public folder.
​
tags
array of strings
A list of tags associated with the post. These are displayed on the post page and can be used for filtering.

​
How It Works

Blog posts are read from src/content/blog, parsed for frontmatter, and sorted by date (newest first).
sabo/src/lib/posts.ts
export interface Author {
  name: string;
  picture?: string;
}

export interface BlogPostMetadata {
  slug: string;
  title: string;
  date: string;
  description: string;
  author?: Author;
  thumbnail?: string;
  tags?: string[];
}
sabo/src/lib/posts.ts
// Sort posts by date (newest first)
return posts.sort((a, b) => {
  return new Date(b.date).getTime() - new Date(a.date).getTime();
});
Slugs are derived from filenames (e.g., my-first-post.mdx → /blog/my-first-post).