Blog

TurboStarter comes with a pre-configured blog implementation that allows you to manage your blog content.

Creating a new blog post

To create a new blog post, you need to create a new directory (its name will be used as the slug of the blog post) with .mdx files in the packages/cms/src/collections/blog/content directory. Each file in this directory should be named after the locale it belongs to (e.g en.mdx, es.mdx, etc.).

The file will start with a frontmatter block, which is a yaml-like block that contains metadata about the post. The frontmatter block should be surrounded by three dashes (---).

---
title: Quick Tips to Improve Your Skills Right Away
description: Whether you're learning a new technical skill or working on personal development, these quick tips can help you improve right away. Learn how to break down your goals, practice consistently, and track your progress using Markdown.
publishedAt: 2023-04-19
tags: [learning, skills, progress]
thumbnail: https://images.unsplash.com/photo-1483639130939-150975af84e5?q=80&w=2370&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D
status: published
---

Let's break down the frontmatter fields:

• title: The title of the blog post (it will be also used to generate a slug for the blog post)
• description: The description of the blog post
• publishedAt: The date when the blog post was published
• tags: The tags of the blog post
• thumbnail: The thumbnail of the blog post
• status: The status of the blog post (could be published or draft)

After the frontmatter block, you can add the content of the blog post:

# Quick Tips to Improve Your Skills Right Away

Awesome paragraph!

[Link](https://www.turbostarter.dev)

<Callout>This is a callout component.</Callout>

...

You can consume the content the same as it's described in Content Collections.

BONUS: Using custom components

As you're using MDX, you can use any React component in your blog posts. Just define it as a normal React component and pass it to <MdxContent /> in components prop:

import { MyComponent } from "~/components/my-component";

export default function Page() {
  return (
    <MDXContent
      code={data.body}
      components={{ ...defaultMdxComponents, MyComponent }}
    />
  );
}

Then, you would be able to use it in your document content and it will rendered on the page as a result:

...

# Heading

Excellent paragraph!

<MyComponent />

1. First item
2. Second item
3. Third item

TurboStarter ships with a set of default components that you can use in your blog posts, e.g. <Callout />, <Card /> etc. Use them or define your own to make your blog posts more engaging.