使用 Cloudflare Pages 部署带图片的 Next.js 博客

本篇博客是一篇测试文章，用来演示如何在基于 Velite + Next.js 的博客系统中引用并展示静态图片。

方案介绍

在博客写作时，我们经常需要配图。如果直接使用绝对根路径（例如 /static/...）来引用静态图片：

1. 本地开发：Next.js 会自动将 public/ 目录映射为根目录 /。因此，放在 public/static/ 目录下的图片在本地可以直接通过 /static/filename.png 访问。
2. Cloudflare Pages 部署：推送代码至 GitHub 并被 Cloudflare 自动构建后，Cloudflare 会把 public/ 目录里的所有静态资源分发到其全球 CDN。当用户在网页中请求 /static/filename.png 时，它会指向 CDN 上的这张图片，从而实现极速、稳定的加载。

演示图片 1：云端计算与部署

第一张演示图片展示了云端计算、数据库与部署网络的关系。它存放在项目中的 public/images/demo-pic-1.png，在 MDX 中以 /images/demo-pic-1.png 的路径进行引用：

演示图片 2：Markdown 与构建发布工作流

第二张演示图片展示了 Markdown 正文经由静态网站生成器构建并推送至 GitHub 触发部署的工作流。它存放在项目中的 public/images/demo-pic-2.png，在 MDX 中以 /images/demo-pic-2.png 的路径进行引用：

通过以上两张图片我们可以看到，通过 /images 目录引用图片是非常方便且直观的方法，不仅对本地开发极其友好，对 Cloudflare Pages 这种自带全球 CDN 的平台来说更是天作之合。