环境要求#

• Node.js >= 22
• pnpm >= 9

1. 克隆仓库#

你可以直接克隆主仓库，但更推荐先 Fork 到自己名下再克隆：

1
git clone https://github.com/jeio258/Firefly.git
2
cd Firefly

2. 安装依赖#

1
npm install -g pnpm   # 如果尚未安装 pnpm
2
pnpm install

3. 创建 GitHub OAuth App（友链审核功能必需）#

前往 GitHub Developer Settings 新建一个 OAuth App：

• Application name：任意填写，如 My Blog Admin
• Homepage URL：你的博客首页地址
• Authorization callback URL：https://你的Worker域名/api/auth/callback

创建完成后，你将获得 Client ID 和 Client Secret。
接着生成一个具有 repo 权限的 Personal Access Token，用于向仓库推送友链数据。

4. 配置 Cloudflare 环境变量#

登录 Cloudflare Dashboard，进入你的 Worker 设置，添加以下加密环境变量：

配置无误后，友链审核后台即可正常工作。

5. 自定义博客配置#

所有可配置项都在 src/config/ 目录下，推荐至少修改以下文件：

• siteConfig.ts：站点名称、语言、域名等基础信息
• profileConfig.ts：个人头像、昵称、社交链接
• navBarConfig.ts：导航菜单
• sidebarConfig.ts：侧边栏布局与小组件

更多细节见 Firefly 使用文档。

6. 启动开发服务器#

1
pnpm dev

浏览器访问 http://localhost:4321 即可实时预览。

🧞 常用命令#

现在，你可以轻松打造属于自己的个性博客了。如果在使用中遇到任何问题，欢迎到 GitHub Issues 反馈，或加入 QQ 交流群：1087127207 一起讨论。

1.1 克隆项目#

1
git clone https://github.com/MarSeventh/CloudFlare-ImgBed.git
2
cd CloudFlare-ImgBed
3
npm install

1.2 配置环境变量#

复制 .env.example 为 .env，填写必要配置：

1
# 必填：Telegram Bot Token（用于存储文件到 Telegram）
2
TG_BOT_TOKEN=你的Telegram Bot Token
3

4
# 必填：管理员密码
5
ADMIN_PASSWORD=你的管理员密码
6

7
# 可选：自定义域名
8
CUSTOM_DOMAIN=https://imge.yourdomain.com

1.3 部署到 Cloudflare Pages#

1
# 构建
2
npm run build
3

4
# 部署（需要先安装 wrangler 并登录）
5
npx wrangler pages deploy dist --project-name=imge

或在 Cloudflare Dashboard 中：

1. Workers & Pages → Create → Pages → Connect to Git
2. 选择仓库，框架预设选 None
3. 构建命令：npm run build
4. 输出目录：dist
5. 添加环境变量（TG_BOT_TOKEN 等）

1.4 配置 Telegram 存储#

1. 在 Telegram 搜索 @BotFather，创建 Bot 获取 Token
2. 创建一个频道，将 Bot 添加为管理员
3. 发送一条消息到频道，转发给 @getidsbot 获取频道 ID
4. 将 Token 和频道 ID 填入 .env

1.5 生成 API Token#

1. 访问 https://你的域名/admin 登录管理后台
2. 系统设置 → 安全设置 → API Token 管理
3. 新建 Token，勾选 list 权限
4. 复制保存 Token（仅显示一次）

二、对接 Firefly 相册#

1
export const imgBedConfig = {
2
  baseUrl: "https://你的图床域名",
3
  apiToken: "你的API Token（list权限）",
4
  pageSize: 50,
5
};

1
{
2
    id: "imgbed",
3
    name: "图床相册",
4
    description: "来自 ImgBed 的图片（构建时自动同步）",
5
    location: "CloudFlare-ImgBed",
6
    date: "2026-01-01",
7
    tags: ["图床", "自动同步"],
8
},

1
pnpm build    # 构建时自动从 API 拉取最新图片列表
2
pnpm preview  # 本地预览

三、工作原理#

1
pnpm build
2
    │
3
    ├─ src/utils/imgbed-utils.ts
4
    │     └─ fetchImgBedImages()
5
    │           │
6
    │           ├─ GET /api/manage/list?fileType=image&start=0&count=50
7
    │           │  Authorization: Bearer <token>
8
    │           │
9
    │           └─ 循环分页拉取直到全部获取
10
    │
11
    ├─ src/utils/gallery-utils.ts
12
    │     └─ scanAlbumPhotos("imgbed")
13
    │           └─ 调用 fetchImgBedImages()
14
    │
15
    └─ 生成静态 HTML，图片 URL 硬编码为 /file/<name>

• 图片在构建时拉取，生成静态页面
• 新增图片后需要重新构建才会显示
• 支持分页，自动处理大量图片

四、常见问题#