跳至主要內容

Github+Cloudflare搭建图床

Cactus li2024年11月8日...大约 8 分钟图床图床

📋 目录

前言

💡 教程简介

本教程将指导您搭建一个稳定、免费且隐私安全的图床解决方案，通过结合：

  • GitHub 私有仓库 - 提供免费可靠的存储空间
  • Cloudflare Workers - 提供 CDN 加速和反向代理
  • PicGo 工具 - 简化图片上传流程

适用场景：个人博客、小型网站、文档系统等需要图片托管的场景

✨ 方案优势

  • 🆓 完全免费 - 充分利用 GitHub 和 Cloudflare 的免费服务
  • 🔒 隐私安全 - 使用私有仓库，路径不对外暴露
  • ⚡ 访问快速 - Cloudflare CDN 全球加速
  • 🛠️ 操作简便 - PicGo 一键上传，自动生成链接

准备工作

在开始配置之前，请确保您已准备以下材料：

📋 必需账号和工具

项目说明链接
GitHub 账号用于创建私有仓库存储图片注册 GitHub
Cloudflare 账号用于创建 Workers 反向代理注册 Cloudflare
PicGo 工具图片上传客户端下载 PicGo

⚠️ 网络环境提醒

配置过程中可能需要稳定的网络环境访问 GitHub 和 Cloudflare。

配置步骤

🔹 步骤一：创建 GitHub 私有仓库

1.1 创建新的私有仓库

  1. 登录 GitHub：访问 GitHub 并登录您的账号
  2. 创建新仓库：点击右上角的 "+" 按钮，选择 "New repository"
  3. 配置仓库设置：
    • 仓库名称：建议使用 blogimg 或 image-hosting
    • 可见性：选择 Private（私有）
    • 初始化选项：勾选 "Add a README file"
GitHub 创建私有仓库
GitHub 创建私有仓库

1.2 生成访问令牌（Personal Access Token）

📝 为什么需要 Token？

GitHub Token 是访问私有仓库的身份验证凭据，确保只有授权用户才能上传和访问图片。

详细步骤：

  1. 进入设置页面：点击右上角头像 → Settings
GitHub 设置入口
GitHub 设置入口
  1. 找到开发者设置：在左侧菜单中找到 "Developer settings"
开发者设置
开发者设置
  1. 创建新 Token：选择 "Personal access tokens" → "Tokens (classic)" → "Generate new token"
创建新Token
创建新Token
  1. 配置 Token 权限：
    • Token 名称：填写描述性名称，如 "Image Hosting Token"
    • 过期时间：建议选择 "No expiration"（永不过期）
    • 权限范围：勾选以下权限
      • ✅ repo（完整仓库权限）
      • ✅ write:packages（写入包权限）
配置Token权限
配置Token权限
  1. 生成并保存 Token：点击 "Generate token" 按钮
生成Token
生成Token
  1. 复制保存 Token：⚠️ 立即复制并保存 Token，页面刷新后将无法再次查看
保存Token
保存Token

🔐 Token 安全提醒

  • Token 具有与密码相同的权限，请妥善保管
  • 建议将 Token 保存在密码管理器中
  • 如果 Token 泄露，请立即删除并重新生成

🔹 步骤二：配置 Cloudflare Workers 反向代理

2.1 创建并部署 Workers

  1. 登录 Cloudflare：访问 Cloudflare Dashboard
  2. 进入 Workers 管理页面：在左侧导航栏找到 "Workers 和 Pages"
  3. 创建新 Worker：点击 "创建应用程序" → "创建 Worker"
Cloudflare Workers 创建
Cloudflare Workers 创建
  1. 配置 Worker 基本信息：
    • Worker 名称：如 github-image-proxy
    • 点击 "部署" 创建基础 Worker
Worker 基本配置
Worker 基本配置

2.2 编辑 Worker 代码

  1. 进入代码编辑器：在 Worker 详情页面点击 "编辑代码"
进入代码编辑器
进入代码编辑器
  1. 替换 Worker 代码：将以下完整代码粘贴到编辑器中
🔧 Worker 代码（点击展开）
let token = "";

export default {
  async fetch(request, env) {
    const url = new URL(request.url);

    if (url.pathname !== '/') {
      let githubRawUrl = 'https://raw.githubusercontent.com';

      if (new RegExp(githubRawUrl, 'i').test(url.pathname)) {
        githubRawUrl += url.pathname.split(githubRawUrl)[1];
      } else {
        if (env.GH_NAME) {
          githubRawUrl += '/' + env.GH_NAME;
          if (env.GH_REPO) {
            githubRawUrl += '/' + env.GH_REPO;
            if (env.GH_BRANCH) githubRawUrl += '/' + env.GH_BRANCH;
          }
        }
        githubRawUrl += url.pathname;
      }

      // Token 处理逻辑
      if (env.GH_TOKEN && env.TOKEN) {
        if (env.TOKEN == url.searchParams.get('token')) {
          token = env.GH_TOKEN || token;
        } else {
          token = url.searchParams.get('token') || token;
        }
      } else {
        token = url.searchParams.get('token') || env.GH_TOKEN || env.TOKEN || token;
      }

      const githubToken = token;

      if (!githubToken || githubToken == '') {
        return new Response('TOKEN不能为空', { status: 400 });
      }

      // 构建请求头
      const headers = new Headers();
      headers.append('Authorization', `token ${githubToken}`);

      // 发起请求
      const response = await fetch(githubRawUrl, { headers });

      // 检查请求是否成功
      if (response.ok) {
        return new Response(response.body, {
          status: response.status,
          headers: response.headers
        });
      } else {
        const errorText = env.ERROR || '无法获取文件，检查路径或TOKEN是否正确。';
        return new Response(errorText, { status: response.status });
      }
    } else {
      // 处理首页访问
      const envKey = env.URL302 ? 'URL302' : (env.URL ? 'URL' : null);
      if (envKey) {
        const URLs = await ADD(env[envKey]);
        const URL = URLs[Math.floor(Math.random() * URLs.length)];
        return envKey === 'URL302'
          ? Response.redirect(URL, 302)
          : fetch(new Request(URL, request));
      }

      // 返回伪装页面
      return new Response(await nginx(), {
        headers: {
          'Content-Type': 'text/html; charset=UTF-8',
        },
      });
    }
  }
};

// Nginx 伪装页面
async function nginx() {
  const text = `
  <!DOCTYPE html>
  <html>
  <head>
  <title>Welcome to nginx!</title>
  <style>
    body {
      width: 35em;
      margin: 0 auto;
      font-family: Tahoma, Verdana, Arial, sans-serif;
    }
  </style>
  </head>
  <body>
  <h1>Welcome to nginx!</h1>
  <p>If you see this page, the nginx web server is successfully installed and
  working. Further configuration is required.</p>

  <p>For online documentation and support please refer to
  <a href="http://nginx.org/">nginx.org</a>.<br/>
  Commercial support is available at
  <a href="http://nginx.com/">nginx.com</a>.</p>

  <p><em>Thank you for using nginx.</em></p>
  </body>
  </html>
  `;
  return text;
}

// 处理环境变量
async function ADD(envadd) {
  var addtext = envadd.replace(/[\t|"'\r\n]+/g, ',').replace(/,+/g, ',');
  if (addtext.charAt(0) == ',') addtext = addtext.slice(1);
  if (addtext.charAt(addtext.length - 1) == ',') addtext = addtext.slice(0, addtext.length - 1);
  const add = addtext.split(',');
  return add;
}
  1. 保存并部署：点击 "保存并部署" 按钮

2.3 配置自定义域名（可选）

如果您有自己的域名，可以为 Worker 添加自定义域名：

添加自定义域名
添加自定义域名

2.4 配置环境变量

  1. 进入设置页面：在 Worker 详情页点击 "设置" 选项卡
  2. 添加环境变量：点击 "变量" → "编辑变量"
Worker 设置页面
Worker 设置页面
  1. 配置必要的环境变量：
配置环境变量
配置环境变量

📊 环境变量配置表

变量名示例值必填说明
GH_TOKENghp_xxxxxxxxxxxx❌您的 GitHub Personal Access Token
TOKENyour-custom-token❌访问鉴权令牌（与 GH_TOKEN 同时存在时作为访问验证）
GH_NAMEcactusli❌您的 GitHub 用户名
GH_REPOblogimg❌您的 GitHub 仓库名（需设置 GH_NAME）
GH_BRANCHmain❌仓库分支名（需设置 GH_NAME 和 GH_REPO）
ERROR无法获取文件，检查路径或 TOKEN❌自定义错误提示信息

💡 环境变量配置建议

  • 必填变量：GH_TOKEN、GH_NAME、GH_REPO
  • 推荐配置：GH_BRANCH（通常为 main）
  • 安全增强：TOKEN（可设置额外访问密钥）
  1. 保存配置：添加完所有变量后，点击 "保存并部署"

🔹 步骤三：配置 PicGo 上传工具

3.1 安装 PicGo

  1. 下载 PicGo：从 GitHub Releases 下载适合您系统的版本
  2. 安装应用：按照安装向导完成 PicGo 的安装

3.2 配置 GitHub 图床

  1. 打开 PicGo：启动 PicGo 应用
  2. 选择图床设置：在左侧菜单选择 "图床设置" → "GitHub图床"
PicGo GitHub 配置界面
PicGo GitHub 配置界面
  1. 填写配置信息：按照下表填写各项配置

📝 PicGo 配置参数说明

配置项示例值说明
图床配置名我的图床便于识别的配置名称，可自定义
设定仓库名lixuanfengs/blogimg格式：用户名/仓库名
设定分支名main通常为 main 或 master
设定Tokenghp_xxxxxxxxxxxx步骤一中生成的 GitHub Token
设定存储路径img1/图片在仓库中的存储目录（可选，留空表示根目录）
设定自定义域名https://your-worker.domain.com/your-name/repo-name/main/img1Cloudflare Worker 的访问域名 + 路径

📌 自定义域名配置格式

https://[Worker域名]/[GitHub用户名]/[仓库名]/[分支名]/[存储路径]

示例：

  • Worker 域名：beauties.eu.org
  • GitHub 用户名：lixuanfengs
  • 仓库名：blogimg
  • 分支名：main
  • 存储路径：img1/
  • 完整 URL：https://beauties.eu.org/lixuanfengs/blogimg/main/img1

3.3 测试上传功能

  1. 设为默认图床：在配置完成后，点击 "确定" 并设为默认图床

  2. 测试上传：

    • 在 PicGo 主界面选择 "上传区"
    • 拖拽图片到上传区域或点击选择文件
    • 等待上传完成，查看生成的链接

  3. 验证访问：复制生成的图片链接，在浏览器中访问验证是否能正常显示图片

:::success 🎉 配置完成
恭喜！您已成功搭建了基于 GitHub + Cloudflare 的图床系统。现在您可以：

  • 通过 PicGo 快速上传图片
  • 获得经过 CDN 加速的图片链接
  • 享受私有仓库的安全性
    :::

总结

通过本教程，您已经成功搭建了一个功能完整的图床系统：

🎯 核心功能

  • ✅ 安全存储：图片存储在 GitHub 私有仓库中
  • ✅ CDN 加速：通过 Cloudflare Workers 提供全球 CDN 加速
  • ✅ 便捷上传：PicGo 一键上传，自动生成链接
  • ✅ 隐私保护：仓库路径不对外暴露

🔧 维护建议

  • 定期备份：虽然 GitHub 很可靠，但建议定期备份重要图片
  • Token 管理：定期检查 Token 的有效性，如有泄露及时重新生成
  • 监控使用：关注 Cloudflare Workers 的请求量，避免超出免费额度

🚀 进阶优化

  • 批量上传：使用 PicGo 的批量上传功能提高效率
  • 自动压缩：配置 PicGo 插件实现图片自动压缩
  • 多图床备份：配置多个图床实现图片备份

💡 遇到问题？

如果在配置过程中遇到问题，可以检查：

  1. GitHub Token 是否有正确的权限
  2. Cloudflare 环境变量是否配置正确
  3. PicGo 的自定义域名格式是否正确
  4. 网络连接是否稳定
默认页脚
Copyright © 2018-2025 Cactus li