Building with Astro

Hands-on Astro tutorials for building a fast, content-focused blog.

Each post solves a specific problem I hit shipping sites: optimizing Markdown images, adding local search with Pagefind, wiring up Giscus comments, rendering interactive charts and Mermaid diagrams, and writing build-time rehype plugins. They include the gotchas and constraints the official docs gloss over.

7 articles

Adding Mermaid Diagrams to Rehype in Astro (With rehype-mermaid-cli)

Aug 24, 2025

Render UML and system design diagrams in Astro using rehype-mermaid-cli. Covers setup, light/dark mode, and comparisons with rehype-mermaid.

How to Add Live Stats To Your Site

Aug 22, 2025

I pull live GitHub, YouTube, and LinkedIn stats into my site using public APIs, scraping, and a Cloudflare Workers proxy.

How to Add Giscus Comments to an Astro Blog

Feb 10, 2025

Add Giscus comments to an Astro blog with GitHub Discussions, dark-mode syncing, and no server to maintain.

How to Add Interactive Charts to Astro with ApexCharts

Oct 29, 2024

Add interactive ApexCharts to Astro Markdown with a custom rehype plugin, dark-mode syncing, and a chart code block workflow.

Adding UML Diagrams to Rehype in Astro (With rehype-mermaid)

Oct 6, 2024

I render Mermaid diagrams in Astro markdown with rehype-mermaid and Playwright, including dark mode support and inline images.

Adding an Astro Search Bar

Jul 26, 2024

I added client-side search to my Astro site with astro-pagefind, no third-party APIs or hosting required. Here's the setup and config.

How to Optimize Images in Astro Markdown and Content Collections

Jul 26, 2024

Optimize images in Astro Markdown and content collections with Astro's Image component, build-time WebP conversion, and lazy loading.