本教程将教你如何使用 R2 作为 Pages 应用的静态资源存储桶。若你遇到 Pages 的文件数量限制或最大文件大小限制，这尤其有用。
为说明如何实现，我们将使用 R2 作为虚构猫咪博客的静态资源存储。
假设你运营一个静态猫咪博客，包含有趣的猫咪视频和实用的养猫技巧。博客正在增长，你需要添加更多包含猫咪图片和视频的内容。
博客托管在 Pages 上，当前目录结构如下：
.
├── public
│ ├── index.html
│ ├── static
│ │ ├── favicon.ico
│ │ └── logo.png
│ └── style.css
└── wrangler.jsonc添加更多视频和图片会很好，但我们的资源大小超过了 Pages 文件限制。让我们用 R2 来解决这个问题。
第一步是创建 R2 存储桶来存储静态资源。可通过仪表板或使用 Wrangler 创建新存储桶。
使用仪表板时，导航到 R2 选项卡，然后点击 Create bucket。我们将博客的存储桶命名为 cat-media。请始终为存储桶使用描述性名称：
创建存储桶后，我们可以将媒体文件上传到 R2。我将拖放两个包含若干猫咪图片和视频的文件夹到 R2 存储桶：
或者，可以使用 Wrangler 从命令行创建 R2 存储桶：
npx wrangler r2 bucket create <bucket_name>
# i.e
# npx wrangler r2 bucket create cat-media可以使用以下命令将文件上传到存储桶：
npx wrangler r2 object put <bucket_name>/<file_name> -f <path_to_file>
# i.e
# npx wrangler r2 object put cat-media/videos/video1.mp4 -f ~/Downloads/videos/video1.mp4要将创建的 R2 存储桶绑定到猫咪博客，需要更新 Wrangler 配置。
打开 Wrangler 配置文件，向文件添加以下绑定。bucket_name 应为之前创建的存储桶的确切名称，binding 可以是引用 R2 资源的任意自定义名称：
{
"r2_buckets": [
{
"binding": "MEDIA",
"bucket_name": "cat-media"
}
]
}[[r2_buckets]]
binding = "MEDIA"
bucket_name = "cat-media"保存 Wrangler 配置文件，即可进入最后一步。
或者，可以在仪表板上为 Pages 项目添加绑定：导航到项目的 Settings 选项卡 > Functions > R2 bucket bindings。
最后一步是从 R2 在博客上提供媒体资源。为此，我们将创建一个函数来处理媒体文件请求。
在项目文件夹中，创建 functions 目录。然后创建 media 子目录，并在其中创建名为 [[all]].js 的文件。所有对 /media 的 HTTP 请求都将路由到此文件。
创建文件夹和 JavaScript 文件后，博客目录结构应如下：
.
├── functions
│ └── media
│ └── [[all]].js
├── public
│ ├── index.html
│ ├── static
│ │ ├── favicon.ico
│ │ └── icon.png
│ └── style.css
└── wrangler.jsonc最后，我们在 [[all]].js 中添加处理函数。此函数接收所有媒体请求，并从 R2 返回相应的文件资源：
export async function onRequestGet(ctx) {
const path = new URL(ctx.request.url).pathname.replace("/media/", "");
const file = await ctx.env.MEDIA.get(path);
if (!file) return new Response(null, { status: 404 });
return new Response(file.body, {
headers: { "Content-Type": file.httpMetadata.contentType },
});
}在部署到目前为止所做的更改之前，让我们在 index.html 中添加几篇新文章。这些文章依赖从 R2 提供的媒体资源：
<!doctype html>
<html lang="en">
<body>
<h1>Awesome Cat Blog! 😺</h1>
<p>Today's post:</p>
<video width="320" controls>
<source src="/media/videos/video1.mp4" type="video/mp4" />
</video>
<p>Yesterday's post:</p>
<img src="/media/images/cat1.jpg" width="320" />
</body>
</html>保存所有文件后，打开新的终端窗口部署应用：
npx wrangler deploy部署后，媒体资源将从 R2 存储桶获取并提供。
