Building a Fast Blog with Astro

How I built this technical blog using Astro and MDX

I recently built this blog using Astro, and I’m impressed with how well it handles technical content. Here’s what makes it great for technical writing.

Why Astro?

Astro is a modern static site generator that ships zero JavaScript by default. This means:

  1. Blazing fast page loads
  2. Great SEO performance
  3. Flexible component architecture

Setting Up Technical Writing Features

Math Equations

I added KaTeX support for rendering mathematical formulas. The setup is straightforward:

npm install rehype-katex remark-math katex

Then configure it in astro.config.mjs:

import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';

export default defineConfig({
  markdown: {
    remarkPlugins: [remarkMath],
    rehypePlugins: [rehypeKatex],
  },
});

Now you can write inline math like E=mc2E = mc^2 or display equations:

∑i=1ni=n(n+1)2\sum_{i=1}^{n} i = \frac{n(n+1)}{2}

Code Highlighting

Astro uses Shiki for syntax highlighting, which provides excellent language support:

interface User {
  id: number;
  name: string;
  email: string;
}

async function fetchUser(id: number): Promise<User> {
  const response = await fetch(`/api/users/${id}`);
  return response.json();
}

Content Collections

Astro’s content collections provide type-safe frontmatter:

const blogCollection = defineCollection({
  type: 'content',
  schema: z.object({
    title: z.string(),
    description: z.string(),
    date: z.date(),
    tags: z.array(z.string()),
  }),
});

This gives you autocomplete and validation for all your blog posts!

Performance

The result is a blog that:

  • Loads in milliseconds
  • Works without JavaScript
  • Ranks well in search engines
  • Provides a great writing experience

If you’re building a technical blog, I highly recommend giving Astro a try!

Comments