我是如何搭建这个博客的

详细介绍如何从零开始搭建一个基于 Next.js 和 MDX 的静态博客，包括组件开发、PWA 配置、Open Graph 图片生成等技术细节

Note

这篇文章已经过时了，请参考使用 FumaDocs 重构这个博客

信息

MDX Playground

组件

图片

可以直接在相对路径下引入图片，使用 remark-static-image 插件，自动导入图片，具体可以查看 Next.js 中使用 MDX 静态图片。

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

为你的网站添加 PWA 和 Service Worker

添加 OG 图片

Next.js 中添加 Open Graph

Changelog

升级 tailwindcss v4

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

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

添加 OG 图片

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
静态生成 OG 图片
- 使用 [og/[slug]/route.tsx] 更改 slug 为 [post.pageName].png
- generateStaticParams 生成 posts 的 OG 图片
- remark-mdx-slug 获取 slug
- remark-mdx-formatter 配置 openGraph 使用 [/og/${post.pageName}.png] 作为 OG 图片