Skip to main content

Create a Blog Post

Docusaurus creates a page for each blog post, but also a blog index page, a tag system, an RSS feed...

Create your first Post​

Create a file at blog/2021-02-28-greetings.md:

blog/2021-02-28-greetings.md
---
slug: greetings
title: Greetings!
authors:
  - name: Joel Marcey
    title: Co-creator of Docusaurus 1
    url: https://github.com/JoelMarcey
    image_url: https://github.com/JoelMarcey.png
  - name: Sébastien Lorber
    title: Docusaurus maintainer
    url: https://sebastienlorber.com
    image_url: https://github.com/slorber.png
tags: [qa, development]
---

Congratulations, you have made your first post!

Feel free to play around and edit this post as much as you like.

A new blog post is now available at https://docs.eatmeglobal.org/blog/greetings.

Simply add Markdown files (or folders) to the blog directory and they will be autogenerated as blogs.

The blog post date can be extracted from filenames, such as:

  • 2019-05-30-welcome.md
  • 2019-05-30-welcome/index.md

Adding multiple images​

A blog post folder can be convenient to co-locate blog post images. So when you have multiple images for a blog post you can put all of them inside that folder.

blogs
|-- 2019-05-30-welcome.md
└── 2019-05-30-images
|-- index.md
|── sample-image-1.jpg
└── sample-image-1.jpg

Then you can just refer to them inside the blog post using relative path.

![Sample Image](./sample.jpg)

Tags​

The blog supports tags as well. Tags should be added to tags.yml before using them.

Truncating​

Use a <!-- truncate --> comment to limit blog post size in the list view.

This is the summary of this blog post

<!--truncate-->

Rest of the blog post goes here

In the above example only This is the summary of this blog post part will be visible on the page with all the blog posts.

Interactive Blog Posts​

You can create interactive blog posts using MDX. For that you have to create files with the .mdx extension.

---
slug: mdx-blog-post
title: MDX Blog Post
authors:
  name: John Doe
  title: Content Writer
  url: https://github.com/wgao19
  image_url: https://github.com/wgao19.png
tags: [qa, development, ba, pm, automation, git, react, rn]
---

Blog posts support [Docusaurus Markdown features](https://docusaurus.io/docs/markdown-features), such as [MDX](https://mdxjs.com/).

:::tip

Use the power of React to create interactive blog posts.

` ``
<button onClick={() => alert("button clicked!")}>Click me!</button> ` ``

<button onClick={() => alert("button clicked!")}>Click me!</button>

:::