Skip to main content

Markdown Page - Create Pages with Markdown

You can create new static pages without writing React. Just add a Markdown file in the src/pages folder and Docusaurus will automatically convert it into a full page with a navbar and footer.

This is the easiest way to create About, Terms, Privacy, Pricing details, and other simple pages.

Folder Location​

All static pages live in:

src/pages/
  • index.js -> becomes the homepage /
  • about.js -> becomes /about
  • contact.js -> becomes /contact
  • product.js -> becomes /product
  • Any .md file you create here becomes a page automatically

Example:

  • src/pages/whychoseus.md -> becomes https://yourdomain.com/whychoseus
  • src/pages/terms.md -> becomes https://yourdomain.com/terms
  • src/pages/privacy.md -> becomes https://yourdomain.com/privacy

How to Create a Markdown Page​

Step 1: Create a new file

  1. Open the src/pages/ folder in VS Code
  2. Right-click > New File
  3. Name it with your page name, always lowercase, and use a dash for spaces. Example: whychoseus.md, why-chose-us.md, or pricing-details.md

Step 2: Add frontmatter

Every Markdown page must start with frontmatter. Frontmatter is metadata at the top between --- lines. This controls the SEO and title.

---
title: Hey Markdown Page in here
description: This description about your markdown files..
image: img/docusaurus.png
---

write your markdown article in here...

Explanation of frontmatter fields:

  • title: Page title. Shows in the browser tab, navbar breadcrumb, and Google search title. Required.
  • description: Meta description for SEO (150-160 chars). Shows in Google under your link. Also used for the social sharing preview.
  • image: Social card image for Twitter, Facebook, and Discord sharing. Use a path from the static/img/ folder like img/docusaurus.png or img/cover.jpg. Recommended size: 1200x630px.

Step 3: Write content

After the frontmatter, write your article in Markdown:

---
title: Why Choose Us
description: Learn why Docusar is the best Docusaurus template for your documentation site
image: img/why-choose-us.png
---

# Why Choose Us

Welcome to our Why Choose Us page.

## Fast and Modern

Docusar is built with React and Docusaurus, so it is super fast and SEO-ready.

## Easy to Edit

You don't need to hardcode. Just edit JSON and Markdown.

### Features:

- No coding needed
- Dark and light mode
- Blog and docs included

[Contact Us](/contact)

Markdown syntax you can use:

  • # Title for H1, ## Title for H2, ### for H3
  • - list or 1. list for a bullet or number list
  • [text](link) for links - use /contact for internal, https://... for external
  • ![alt](img/image.png) for images - put the image in static/img/
  • **bold** and *italic*
  • Code block with js ...

Step 4: Save and check

  1. Save the file
  2. Run npm run start if it is not running
  3. Open http://localhost:3000/whychoseus (replace with your filename without .md)
  4. Your page will appear with the navbar and footer automatically.

Update a Markdown Article​

If you want to edit an existing Markdown static page:

  1. Open the src/pages/ folder
  2. Find your file, for example basic.md, standard.md, or your custom file
  3. Open it with your code editor
  4. Edit the title, description, or content in Markdown
  5. Save and refresh the browser

You do not need to restart the server. Docusaurus hot-reloads Markdown changes.

Delete a Markdown Article​

To delete a Markdown article page:

  1. Go to src/pages/
  2. Delete the .md file you want to remove
  3. Save. The route will no longer exist (404)
  4. If you linked this page in docusaurus.config.js navbar or footer, remove that link too, otherwise users will get a 404.

Tips:

  • Use .md for simple pages, use .mdx if you need React components inside Markdown (like custom cards or buttons)
  • Keep the filename lowercase, no spaces, use dashes: terms-of-service.md, not Terms Of Service.md
  • If you need a complex layout with sections, pricing, and images, use a React page .js with JSON instead of Markdown
  • Markdown pages automatically use the Docusaurus default page layout - they are perfect for Terms, Privacy, License, and FAQ detail pages