Blog

Creating and managing blog posts is effortless, requiring minimal configuration. Follow these steps to get started:

Create a New Blog Post

Simply add a [blog-slug].mdx file to the /app/blog/posts directory and start writing your blog content. You can refer to existing blog posts as templates for structure and formatting.

Metadata

Author

To display the author's name on a page, ensure that the author metadata in your blog post matches the name key of the authors listed in blogAuthors, located in /app/demo/blog/[slug]/page.tsx.

While our blog post template supports essential metadata properties, you can also include additional custom metadata by editing the metadata variable in /app/demo/blog/[slug]/page.tsx.

Additionally, an application/ld+json script is automatically included, offering further configurability. For more information, consult schema.org.

Canonical URL

The canonical URL is automatically set to the blog post's URL. If your blog post is also published on another website, you can specify the canonical prop in the blog post metadata, directing to its original location (e.g., canonical: https://website.com/my-blog).

Open Graph Image

By defining the image prop in the blog post metadata, necessary metadata for generating an appealing social share preview will be automatically added.

With these features, you can effortlessly manage and customize your blog posts, enhancing both content creation and sharing experiences.

Here's an enhanced version of the documentation:

Customizing Blog Appearance

If you wish to tailor the appearance of your blog posts, you can do so in /components/mdx-blog-components.tsx. This file provides the flexibility to modify various aspects of how your blog posts are displayed.

Integrating React Components in Blog Posts

To incorporate React components within your blog posts, follow these steps:

1. Navigate to /components/mdx-blog-components.tsx.
2. Import the desired React components into this file.
3. Add the imported components to the mdxBlogComponents object.
4. You can now directly use these components within your blog posts, just as you would in a regular React file.

For example:

<MyComponent>...</MyComponent>