Add content to your site: Markdown 📝

Overview

Markdown allows you to write using an easy-to-read, easy-to-write plain text format and Astro includes built-in support for Markdown files.
In this way you can build your personal blog and any other kinds of projects.
In this article we will go to see the features 🎊
Let's start! 🤙

Yes, Astro manages Markdown files 🦾

Astro includes native built-in support for Markdown files, without any third part packages, and this allows you to build a blog projects, for example, or documentation website.
This feature is amazing and makes Astro a very interesting solution 🖖

Organizing Markdown files in your projects 🙌

Your local Markdown files can be kept anywhere within your src/ directory. Local Markdown can be imported into .astro components using an import statement for a single file and Vite’s import.meta.glob() to query multiple files at once.

If you have groups of related Markdown files, consider defining them as collections. This gives you several advantages, including the ability to store Markdown files anywhere on your filesystem or remotely 🧞‍♂️

Dynamic expressions 👏

Yes, Astro allows you to use the Markdown file after importing or querying it, in this way:

---
title: 'Add content to your site: Markdown 📝'
author: 'Domenico Tenace'
---

In this article we will go to see the features 🎊

---
import * as astroMarkdown from '../posts/astro-markdown.md';
---

<p>{astroMarkdown.frontmatter.title}</p>
<p>Written by: {astroMarkdown.frontmatter.author}</p>

You can write dynamic HTML templates in your .astro components that include frontmatter data and body content 🧠

Querying collections 🫰

When fetching data from your collections, your Markdown’s frontmatter properties are available on a data object. Additionally, body contains the raw, uncompiled body content as a string.

Importing Markdown 🫴

In your .astro component when importing Markdown using import or import.meta.glob(), the following exported properties are available:

• file: the absolute file path.
• url: the URL of page.
• frontmatter: this prop contains any data specified in the file’s YAML frontmatter (like title in the above example).
• : this component returns the full, rendered contents of the file.
• rawContent(): this function returns the raw Markdown document as a string.
• compiledContent(): this async function returns the Markdown document compiled to an HTML string.
• getHeadings(): this async function returns an array of all headings in the file with the type: { depth: number; slug: string; text: string }[]. Each heading’s slug corresponds to the generated ID for a given heading and can be used for anchor links.

Render your content: <Content /> component 🤏

The <Content /> component is available during the import from a Markdown file. This component returns the file’s full body content, rendered to HTML.
You can similarly render the HTML content of a Markdown collection entry by rendering a <Content /> component 👻
Follow the example:

--- 
import { Content as AstroArticle } from '../components/astroArticle.md';
import { getEntry, render } from 'astro:content';

const post = await getEntry('post', 'shirt');
const { Content } = await render(post);
---
<h2>Astro: the new frontier of frontend frameworks</h2>
<AstroArticle />

<p>Published in: {post.data.publishingDate.toDateString()}</p>
<Content />

Conclusion

The management of Markdown files in Astro is simple and at the same time powerful as it allows the development of blogs in a very simple way.
And now...
Happy coding!✨

Hi👋🏻
My name is Domenico, software developer passionate of Vue.js framework, I write article about it for share my knowledge and experience.
Don't forget to visit my Linktree to discover my projects 🫰🏻

Linktree: https://linktr.ee/domenicotenace

Follow me on dev.to for other articles 👇🏻

Domenico TenaceFollow

Passionate about the IT world and everything related to it ✌🏻 Vue and Open Source enthusiastic 🦠

If you like my content or want to support my work on GitHub, you can support me with a very small donation.
I would be grateful 🥹