Skip to main content

Add New Blog Post

Learn how to add new blog articles to your Docusar blog page. Unlike docs, which use the docs/ folder, the blog uses the blog/ folder.

Blog posts are a great way to share updates, tutorials, or thoughts about your product. They also help with SEO because each post becomes its own page on Google.

Step 1: Open the Blog Folder​

In your project root, find:

blog/

This is where all blog posts are stored. You will see existing example posts like:

blog/
├── 2024-02-28-first-post.md
├── 2024-03-01-second-post.md
└── authors.yml

Step 2: Create a New Markdown File​

Create a new .md file inside the blog/ folder.

File naming format (Important):

Docusaurus uses a date prefix for sorting:

YYYY-MM-DD-your-url-slug.md

Examples:

2026-02-28-my-first-post.md
2026-12-01-how-to-use-docusar.md
2026-01-15-docusaurus-tips.md
  • YYYY-MM-DD = publish date. Use today's date or a future date.
  • your-url-slug = URL slug, lowercase with dashes. No spaces.

If you create 2026-02-28-my-first-post.md, the URL will be: /blog/2026/02/28/my-first-post or /blog/my-first-post depending on your config.

Step 3: Add Blog Frontmatter​

Open your new file and add frontmatter at the top.

Template:

---
slug: your-url-link
title: Your Blog Post Title Here
description: Short SEO description for blog (150 chars)
authors: your-author-id
tags: [tag1, tag2, tag3]
image: img/blog-cover.png
---

Write your blog content here with markdown...

Fields Explained:

  • slug: Custom URL slug. Example my-first-post → URL /blog/my-first-post. If you skip this, Docusaurus uses the file name as the slug.
  • title: Blog title shown on the blog list and post page.
  • description: SEO description, shows in the blog list preview and Google.
  • authors: Author ID. Must match an ID in blog/authors.yml. Example: creativitas or yourname.
  • tags: Array of tags for filtering. Example [docusaurus, tutorial, tips]. Tags will show as clickable pills.
  • image: Optional cover image for social sharing. Put the image in the static/img/ folder.

Real Implementation Example​

File: blog/2026-02-28-first-blog-post.md

---
slug: first-blog-post
title: First Blog Post
description: This is my first blog post using the Docusar Docusaurus Themes template - introduction and getting started guide.
authors: creativitas
tags: [docusaurus, introduction, tutorial]
image: img/docusaurus.png
---

# Welcome to My First Blog

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies.

## What is Docusar?

Docusar is a modern Docusaurus Themes template for documentation and blog...

## Features

- Fast and SEO friendly
- Dark mode support
- Dynamic data from JSON

Read more about [Docusar docs](/docs/category/getting-started).

Step 4: Write Content​

Below the frontmatter, write your blog with markdown:

## Heading

Paragraph text with **bold** and *italic*.

- Bullet list
- Second item

1. Numbered list

![Alt text](/img/your-image.png)

```js
console.log("Code block");

Quote block


## Step 5: Save and Preview

1. Save the file
2. Run `npm run start` if it is not running
3. Go to http://localhost:3000/blog
4. Your new post should appear at the top (newest date first)
5. Click to open it and check the formatting, author, and tags

**Tips:**

- The date in the filename controls the order: newer dates appear first on the blog list
- Keep `authors.yml` updated - if you use an author that does not exist, the author avatar and name will not show
- Tags are auto-created, no need to pre-define them
- You can use the `.mdx` extension too if you need React components inside a blog post
- Blog posts support the same MDX features as docs