How I built this blog

Learn how to build a static blog using Next.js and MDX, including component development, PWA configuration, and Open Graph image generation.

Note

This article is outdated, please refer to Refactor This Blog With FumaDocs

MDX Playground

Components

Images

Can directly import images in the relative path, use the remark-static-image plugin, automatically import images, see Using MDX Static Images in Next.js for details.

GitHub Alert

> [!NOTE]  
> Highlights information that users should take into account, even when skimming.

> [!TIP]  
> Optional information to help a user be more successful.

> [!IMPORTANT]  
> Crucial information necessary for users to succeed.

> [!WARNING]  
> Critical content demanding immediate user attention due to potential risks.

> [!CAUTION]  
> Negative potential consequences of an action.

Note

Highlights information that users should take into account, even when skimming.

Tip

Optional information to help a user be more successful.

Important

Crucial information necessary for users to succeed.

Warning

Critical content demanding immediate user attention due to potential risks.

Caution

Negative potential consequences of an action.

PWA

Add PWA and Service Worker to Your Site

Add OG Image

Add Open Graph in Next.js

Changelog

Upgrade tailwindcss v4

https://github.com/Debbl/aiwan.run/pull/19

https://tailwindcss.com/docs/upgrade-guide

Add OG Image

https://github.com/Debbl/aiwan.run/pull/14

https://og-playground.vercel.app/
https://vercel.com/docs/functions/og-image-generation
https://orcascan.com/tools/open-graph-validator
Static generate OG Image
- Use [og/[slug]/route.tsx] to change the slug to [post.pageName].png
- generateStaticParams to generate OG images for posts
- remark-mdx-slug to get the slug
- remark-mdx-formatter to configure openGraph to use [/og/${post.pageName}.png] as the OG image