Hello World

This first post is a rendering test. It runs through every Markdown and MDX feature the blog supports so styling regressions are obvious at a glance. If something here looks broken, the component map in src/components/blog/MdxComponents.tsx is the place to fix it.

Why this blog runs on MDX#

The blog isn't a separate Astro or Hugo site - it's native Next.js routes authored in MDX, so posts inherit the same navbar, theme, cursor, and SEO as the rest of gd03.me. One build, one deploy. And because it's MDX, a post can drop interactive React inline when prose isn't enough.

Good writing is clear thinking made visible. The tooling should get out of the way.

• the whole point of this setup

Text formatting#

You get bold, italic, bold italic, strikethrough, inline code, and external links (which open in a new tab) alongside internal links that use the client router.

Code blocks#

Fenced code is highlighted at build time with rehype-pretty-code + Shiki:

// src/lib/blog.ts
export function getReadingTime(content: string): { minutes: number; words: number } {
    const words = content
        .replace(/```[\s\S]*?```/g, ' ')
        .split(/\s+/)
        .filter(Boolean).length
    return { minutes: Math.max(1, Math.round(words / 220)), words }
}

A shell snippet:

npm install next-mdx-remote gray-matter rehype-pretty-code shiki
npm run build

And some JSON:

{
  "title": "Hello World",
  "tags": ["meta", "nextjs", "mdx"],
  "draft": false
}

Lists#

Unordered, with nesting:

• DevOps
  • Kubernetes
  • Terraform
• AI infrastructure
  • LLMOps
  • Inference serving
• Creative web

Ordered:

1. Write the post as .mdx
2. Add frontmatter
3. git push - it's live

Task list:

• Set up MDX pipeline
• Wire giscus comments
• Write more posts

Table#

Blockquote & horizontal rule#

This is a longer blockquote to check leading and left-border rendering across multiple lines. It should feel distinct from body text without shouting.

Custom MDX components#

Because posts are MDX, any component in the map is usable inline:

Images#

What's next#

More posts on DevOps, AI infrastructure, LLMOps and everything tech. If you're viewing source and see BlogPosting JSON-LD, a generated OG image, and a giscus thread below - the whole pipeline works end to end.