Unlocking the Power of Static Sites with Astro and MDX
Astro, a powerful static site generator, has recently announced support for MDX and Vite 3.0 in its latest release, Astro 1.0. This integration puts Astro at the forefront of building static sites, offering fast builds and a better development experience. In this article, we’ll explore how to build a blog using Astro and MDX.
What is Astro?
Astro is a static-first platform that allows you to create highly performant websites using your favorite JavaScript frameworks. By default, Astro ships zero JavaScript to the browser until required, making it an excellent choice for building fast and efficient websites.
What is MDX?
MDX is a tool that extends the capabilities of Markdown by leveraging the power of JSX. With MDX, you can import and use interactive components, such as charts and alerts, and even create reusable MDX components. This opens up new possibilities for creating engaging written content.
Setting up an Astro App
To get started, create a project using the Astro CLI by running npx create-astro@latest in your terminal. Follow the step-by-step prompts to finish the setup according to your preferences. Once complete, navigate to the project directory and run npm start to start an Astro dev server at http://localhost:3000.
Writing MDX Code
MDX doesn’t have any special syntax; it’s simply a combination of Markdown and JSX. You can write JSX, Markdown, JavaScript expressions, and import and export statements. Create a file in the src/pages directory, give it a name, and end the file extension with .mdx. Then, paste in some sample code to get started.
Creating a Blog with MDX and Astro
In this tutorial, we’ll build a blog using MDX and Astro. We’ll cover creating a layout for the blog and post pages, adding interactive components to our MDX files, and using frontmatter in Astro to pass data to our layouts.
Creating the Blog Post Layout
Navigate to the src/layouts folder and create a new layout called PostLayout.astro. Paste in the following code:
“`astro
import BaseHead from ‘../components/BaseHead.astro’;
import Header from ‘../components/Header.astro’;
import Footer from ‘../components/Footer.astro’;
const { title, description } = Astro.props.frontmatter;
“
This layout uses Astro's built-in
Creating a Markdown Blog Post
Create a new file in the src/pages/post directory, give it a name, and end the file extension with .mdx. Paste in some sample code to get started:
“`mdx
title: My First Blog Post
description: This is my first blog post.
layout: PostLayout
Welcome to my first blog post!
“
This MDX file uses the
Adding Interactive Components
We can add interactive components to our MDX files using Astro’s built-in support for JavaScript frameworks. For example, we can use the accessible-astro-components library to add an accordion component to our blog post:
“`mdx
import { Accordion } from ‘accessible-astro-components’;
This is my accordion item.
“
This code imports thecomponent from theaccessible-astro-components` library and uses it in our MDX file.
Creating a Blog Page
Finally, we need to create a blog page that displays all our blog posts. Create a new file in the src/pages directory, give it a name, and end the file extension with .astro. Paste in the following code:
“`astro
import BlogLayout from ‘../layouts/BlogLayout.astro’;
import Card from ‘accessible-astro-components/Card’;
const posts = await Astro.glob(‘../pages/post/*.mdx’);
const cards = posts.map((post) => (
));
{cards}
“
This code uses Astro'smethod to load all our MDX files in thesrc/pages/post` directory and maps over them to create a list of card components.
That’s it! We’ve now created a blog using Astro and MDX. We’ve covered creating a layout for the blog and post pages, adding interactive components to our MDX files, and using frontmatter in Astro to pass data to our layouts.