[博客][Pages] ⚡基于 Cloudflare Pages + Workers + D1 + R2 的动态博客

GitHub仓库

Fork GitHub仓库

新建Pages

构建设置

构建命令：bun b

构建输出目录：client/dist

环境变量

NAME=Xeu

# 昵称，显示在左上角

DESCRIPTION=

# 个人描述，显示在左上角昵称下方

AVATAR=

https://avatars.githubusercontent.com/u/36541432 # 头像地址，显示在左上角

API_URL=

https://rin.xeu.life # 服务端域名，可以先使用默认值查看效果，后续部署服务端后再修改

PAGE_SIZE=

# 默认分页大小，推荐 5

SKIP_DEPENDENCY_INSTALL=

true

UNSTABLE_PRE_BUILD=

asdf install bun latest && asdf global bun latest && bun i

存储桶设置cros策略设置：

[
  {
    "AllowedOrigins": [
      "https://cros.id.x10.mx"
    ],
    "AllowedMethods": [
      "GET",
      "DELETE",
      "HEAD",
      "POST",
      "PUT"
    ],
    "AllowedHeaders": [
      "Content-Type"
    ]
  }
]

访问以下连接接入github验证 https://github.com/settings/developers

接入github: Homepage URL 填写上面的前端地址 Authorization callback URL 填写 https://<你的后端地址>/user/github/callback

仓库变量：

FRONTEND_URL=

前端地址，填写上文前端所绑定的域名，如 https://blog.obdo.cc

S3_BUCKET=

R2 存储桶名称，如上文示例中的 rin-storage

S3_REGION=

auto

S3_ENDPOINT=

R2 的 S3 API，去掉域名后面的路径，如 https://1234567890abcdef1234567890abcd.r2.cloudflarestorage.com

S3_ACCESS_HOST=

R2 公开访问域名，如上文示例中的 https://rin-storage.obdo.cc

仓库secret：

CLOUDFLARE_ACCOUNT_ID=

Cloudflare 的账户ID

CLOUDFLARE_API_TOKEN=

Cloudflare 的用户API令牌值

RIN_GITHUB_CLIENT_ID=

上文生成的 Github Client ID

RIN_GITHUB_CLIENT_SECRET=

上文生成的 Github Client Secret

JWT_SECRET=

加密用的密钥，你可以使用密码生成器随机生成一个

S3_ACCESS_KEY_ID=

存储桶API的访问密钥ID

S3_SECRET_ACCESS_KEY=

存储桶API的机密访问密钥

添加路由：

点击添加自定义域，绑定自己的后端域名

点击添加路由，依次加入前端域名/sub/* 前端域名/seo/*

回到前面创建的前端 Pages 设置

将制作与预览的 APL_URL 均修改为后端域名

最后重新部署pages

访问以下连接接入github验证 https://github.com/settings/developers

秘钥生成器地址： https://www.avast.com/random-password-generator

Previous[博客][Workers]CloudFlare搭建永久免费动态博客，无需服务器，可绑定自己的域名！Next[书签][Workers] Card-Tab 书签卡片式管理

Last updated 7 months ago

Was this helpful?