MDX でブログを書く仕組み

全体像

記事は content/tech/*.mdx に置き、ビルド時に静的 HTML へ変換します。

frontmatter の検証

zod スキーマ

src/lib/content/schemas.ts:

export const techSchema = baseSchema.extend({
  tags: z.array(slugSchema).default([]),
  series: z.string().optional(),
});

ビルドエラーにする

不正な frontmatter は ビルド時に 例外を投げます。

コードハイライト の設定

Shiki を rehype プラグインとして使います。

pnpm add @shikijs/rehype shiki