图床存储分享：配图不求人，免费图床搭建与提速优化

引言

写文章配图，配视频是博客的灵魂，所谓图床不稳，写作心累。
告别404！本文利用GitHub+Cloudflare+PicList的完美组合，手把手教你搭建永不消失的免费图床，优化图片加载速度，提升博客体验。

图床是什么？

图床是指用于存储和分享图片的网络服务或平台。用户可以将图片上传到图床，图床会为图片生成一个可外链的地址链接，这个链接可以直接嵌入到网页、博客、论坛帖子、文档等各种支持图片显示的平台中，使图片能够在这些平台展示出来。

图床的主要作用是为提供图片存储和快速访问的能力，尤其一些大型网站、论坛或博客平台，若所有用户上传的图片都存储在自身服务器上，会占用大量存储空间和带宽资源，而借助图床可以将图片存储在外部服务器，通过外链调用展示，减轻自身服务器的负担。

为什么选择GitHub？

七牛云、腾讯云、阿里云、又拍云都是收费的，SM.MS和Imgur有免费版也有收费版，免费的量也不多。
当前GitHub公开仓库个数不限，而且单个仓库容量为1GB，如不够就再建一个公开仓库，现在有微软托管GitHub稳定、免费、可靠。

Cloudflare 提升访问速度

Cloudflare 拥有全球分布的大量 CDN 节点，当用户请求 GitHub 图床中的图片时，请求会被路由到距离用户最近的 CDN 节点，节点会缓存 GitHub 上的图片数据，使用户能够快速加载图片，减少了因地理位置不同而产生的网络延迟。
Cloudflare 的 CDN 技术会对图片进行缓存优化，根据用户请求的频率和数据的热度等因素，合理地分配和利用缓存资源，进一步提高图片的加载速度。

graph TD
    A[用户请求图片] --> B[DNS解析到Cloudflare]
    B --> C{Cloudflare缓存中是否有图片}
    C -->|是| D[直接返回图片给用户]
    C -->|否| E[Cloudflare向GitHub图床请求图片]
    E --> F[GitHub图床返回图片给Cloudflare]
    F --> G[Cloudflare缓存图片并返回给用户]

PicList 强大的云存储与图床管理工具

PicList是一款高效的云存储和图床平台管理工具，基于PicGo深度二次开发，提供完整的图床功能和全面的云存储管理能力，主要特点包括：

完整保留PicGo所有功能，兼容大部分PicGo插件
扩展了内置图床平台，如WebDav、本地图床和SFTP等
相册支持同步云端删除文件
全面的云存储管理功能，包括文件操作、搜索和预览
内置图像处理工具，如水印、压缩、缩放、旋转和格式转换

经过前期调研软件并综合需求，帮助其轻松实现免费、高效、稳定的图床搭建，满足图片存储与分享需求。

使用场景	用户群体	特点	常见需求
个人博客	博客作者	- 需要稳定的图片托管服务 - 支持Markdown格式链接 - 图片加载速度快	- 生成Markdown格式的图片链接 - 图片与博客内容分离，便于管理
社交媒体分享	社交媒体用户	- 支持生成短链 - 支持BBCode格式链接 - 图片加载速度快	- 快速分享图片到社交媒体平台 - 生成适合社交媒体的图片链接格式
Markdown编辑	Markdown用户	- 支持Markdown格式链接 - 图片加载速度快 - 支持本地图片上传	- 在Markdown编辑器中插入图片 - 避免本地图片路径问题
网站开发	开发者	- 支持多种图片格式 - 图片加载速度快 - 支持代码编辑器集成	- 在开发过程中快速引用图片 - 提高开发效率
电商运营	电商运营者	- 支持多种图片格式 - 图片加载速度快 - 支持HTTPS - 支持CDN加速	- 在电商平台展示商品图片 - 提高页面加载速度，优化SEO
论坛发帖	论坛用户	- 支持生成外链 - 支持BBCode格式链接 - 图片加载速度快	- 在论坛或社区中发布带有图片的帖 - 生成适合论坛的图片链接格式
视频创作	视频创作者	- 支持生成外链 - 图片加载速度快 - 支持HTTPS	- 在视频描述或字幕中插入图片链接 - 生成适合视频平台的图片链接格式
小型商业站点	小型企业或个人站长	- 支持HTTPS - 支持CDN加速 - 图片加载速度快 - 支持外链	- 在商业网站中展示图片 - 提高页面加载速度，优化SEO

本文章教程通过GitHub、Cloudflare与PicList组合形式，搭建免费图床的方法，下面开始教程。

1、搭建准备工作

GitHub 注册账号(必须)
用于创建仓库存放图片等资源。
Cloudflare 注册账号(必须)
可能需要信用卡，用于验证身份，选择免费套餐用。
PicList软件下载安装(必须)
PicList是一款高效的云存储和图床平台管理工具，完整保留了PicGo的所有功能，还增添了许多新的feature。
PicGo软件下载安装(非必须)
用于管理图片上传的工具，功能上比PicList少一点，推荐使用PicList。

2、GitHub上创建图床

➢2.1 登录github，点击New repository

➢2.2 输入自定义仓库名（如：img)，推荐勾选私有，原因如下：

隐私保护：私有仓库中的图片不会对外公开，只有授权用户可以访问。
安全性高：通过访问令牌和代理服务，可以有效保护仓库中的图片不被未经授权的访问。
访问限制：私有仓库的图片无法直接通过 GitHub 的 URL 访问，通过token方式访问，真要蹭图就一张张的截图了。

➢2.3 创建个人Token
点击右上角的个人头像→设置（Settings）→开发者设置（Developer Settings）→个人访问令牌（Personal access tokens）→通用令牌（Tokens (classic)）→生成新的令牌（Generate new token (classic)）

➢2.4 生成新令牌页面中设置参数 Generate new token (classic)
Note：自定义填写备注
Expiration：不要选择具体时间，选择不过期（No Expiration）
Select scopes：勾选（repo）
其他权限不用勾选，点击底部按钮 “Generate token”

➢2.5 将生成的 Token 复制记录下来，关闭页面后就再也看不到该令牌了。后续配置需使用

3、PicList or PicGo配置

PicList是一款高效的云存储和图床平台管理工具，在PicGo的基础上经过深度的二次开发，不仅完整保留了PicGo的所有功能，还增添了许多新的feature。

➢3.1 下载安装PicList软件，打开GitHub设置页，配置如下

图床配置名：本地标识用，自定义取名
设定仓库名：github用户名/仓库名
设定分支名：master
设定 Token：github中生成的token
设定存储路径：空=上传到跟目录，建议创建用于分类
设定自定义域名：为了使用 CDN 加快图片的访问速度，可在下面方法中2选一
1️⃣使用方法1：用Cloudflare方法，此处为空(接着步骤4、Cloudflare加速访问图床)
2️⃣使用方法2：直接使用CDN服务加速的链接访问
填写格式：https://cdn.jsdelivr.net/gh/github用户名/仓库名
如不可用，请尝试替换以下地址
https://cdn.jsdelivr.net
https://fastly.jsdelivr.net
https://gcore.jsdelivr.net
https://testingcf.jsdelivr.net
https://test1.jsdelivr.net

设置PicList软件页面：点击图床→Github

设置PicGo软件页面：点击图床设置→Github

➢3.2 点击上传区，选择图片或拖入或剪切板粘贴，上传成功后得到图片地址。

仓库为公开时，图片链接不带token
仓库为私有时，图片链接带token

1	![上传成功后图片地址样例](https://raw.githubusercontent.com/chinapmcc/img/master/PicGO+Typora.gif?token=BSMHKMVPOCRJNNKVTPNKAXTIFV3DM)

➢3.3 设定统一图片大小

PicList设置→上传设置→自定义链接格式→点击设置→输入以下格式

1	<img src="$url" width="500px" height="300px">

上传区→选择格式链接=HTML
上传新图片或点击下方复制链接按钮，即可返回设定大小的图片链接
如样例：

1	<img src="https://raw.githubusercontent.com/chinapmcc/img/master/PicGO+Typora.gif" width="500px" height="300px"/>

PicList or PicGo插件安装

如同步删除云端图片需要安装插件：picgo-plugin-github-plus

配置插件与Github基本一致

如遇到安装失败：尝试清理并重置本地配置

关闭 PicGo 应用程序。
导航到 PicGo 的配置文件目录：
- 通常是 C:\Users\HUAWEI\AppData\Roaming\picgo。
删除以下文件和文件夹：
- package.json
- package-lock.json
- node_modules 文件夹。
重新启动 PicGo，并再次尝试安装插件

4、Cloudflare加速访问图床

➢4.1 登录Cloudflare，点击左侧菜单栏：Workers 和 Pages菜单，点击创建创建一个Workers的项目
免费套餐：一天10万次请求，如果访问超了说明你是个大网红博主了。

➢4.2 输入一个自定义域名(如：blog)，点击部署

➢4.3 点击编辑代码，将复制worker.js完整代码
替换下面两项内容，然后点击部署

1 2	const upstream_path = "/github用户/github仓库名/分支" const github_token = "github的token";

worker.js代码作用

代理请求：
- 当有人访问你的网站时，这段代码会把他们的请求转发到另一个指定的网站（比如 GitHub 的文件服务）。
- 就像一个“中间人”，帮你从别的地方拿东西给访问者。
自定义处理：
- 设备检测：判断访问者是用手机还是电脑访问的。如果是手机，可能会转发到一个更适合移动设备的地址。
- 地区和IP限制：可以根据访问者的地理位置或IP地址阻止某些请求。比如，你可以设置某些地区或某些IP地址的用户无法访问。
- 修改请求和响应：在转发请求之前，代码会修改一些请求头（比如添加认证信息），确保请求能正确到达目标网站。同时，它也会修改返回的响应头，比如设置缓存策略或允许跨域访问。
文本替换：
- 如果返回的内容是HTML页面，代码会根据预设的规则替换页面中的某些文本。比如，可以把页面中的某个链接地址替换为你自己的域名。
缓存控制：
- 你可以选择是否让浏览器缓存返回的内容。如果启用缓存，用户再次访问时可以更快地加载内容；如果禁用缓存，每次访问都会获取最新的内容。
跨域支持：
- 为了让你的网站能够安全地从其他域名加载资源，代码会设置一些特殊的响应头，允许跨域访问。

// Website you intended to retrieve for users.
// GitHub提供的直接访问仓库原始文件的域名（如代码、图片、文本）。
const upstream = "raw.githubusercontent.com";

// Custom pathname for the upstream website.
// ①自定义上游网站的路径：格式为 /<用户>/<仓库名>/<分支>
const upstream_path = "/chinapmcc/img/main";

// github personal access token.
// ②填写github个人令牌
const github_token = "ghp_rYMGrgOuZoxxxxxxx3qWSpN";

// Website you intended to retrieve for users using mobile devices.
// 你打算为使用移动设备的用户检索的网站。
const upstream_mobile = upstream;

// Countries and regions where you wish to suspend your service.
// 你希望暂停服务的国家和地区
const blocked_region = [];

// IP addresses which you wish to block from using your service.
// 你希望阻止使用服务的IP地址
const blocked_ip_address = ["0.0.0.0", "127.0.0.1"];

// Whether to use HTTPS protocol for upstream address.
// 是否使用HTTPS协议访问上游地址
const https = true;

// Whether to disable cache.
// 是否禁用缓存
const disable_cache = false;

// Replace texts.
// 替换文本
const replace_dict = {
  $upstream: "$custom_domain",
};

addEventListener("fetch", (event) => {
  event.respondWith(fetchAndApply(event.request));
});

async function fetchAndApply(request) {
  const region = request.headers.get("cf-ipcountry")?.toUpperCase();
  const ip_address = request.headers.get("cf-connecting-ip");
  const user_agent = request.headers.get("user-agent");

  let response = null;
  let url = new URL(request.url);
  let url_hostname = url.hostname;

  if (https == true) {
    url.protocol = "https:";
  } else {
    url.protocol = "http:";
  }

  if (await device_status(user_agent)) {
    var upstream_domain = upstream;
  } else {
    var upstream_domain = upstream_mobile;
  }

  url.host = upstream_domain;
  if (url.pathname == "/") {
    url.pathname = upstream_path;
  } else {
    url.pathname = upstream_path + url.pathname;
  }

  if (blocked_region.includes(region)) {
    response = new Response(
      "Access denied: WorkersProxy is not available in your region yet.",
      {
        status: 403,
      }
    );
  } else if (blocked_ip_address.includes(ip_address)) {
    response = new Response(
      "Access denied: Your IP address is blocked by WorkersProxy.",
      {
        status: 403,
      }
    );
  } else {
    let method = request.method;
    let request_headers = request.headers;
    let new_request_headers = new Headers(request_headers);

    new_request_headers.set("Host", upstream_domain);
    new_request_headers.set("Referer", url.protocol + "//" + url_hostname);
    new_request_headers.set("Authorization", "token " + github_token);

    let original_response = await fetch(url.href, {
      method: method,
      headers: new_request_headers,
      body: request.body,
    });

    connection_upgrade = new_request_headers.get("Upgrade");
    if (connection_upgrade && connection_upgrade.toLowerCase() == "websocket") {
      return original_response;
    }

    let original_response_clone = original_response.clone();
    let original_text = null;
    let response_headers = original_response.headers;
    let new_response_headers = new Headers(response_headers);
    let status = original_response.status;

    if (disable_cache) {
      new_response_headers.set("Cache-Control", "no-store");
    } else {
      new_response_headers.set("Cache-Control", "max-age=43200000");
    }

    new_response_headers.set("access-control-allow-origin", "*");
    new_response_headers.set("access-control-allow-credentials", true);
    new_response_headers.delete("content-security-policy");
    new_response_headers.delete("content-security-policy-report-only");
    new_response_headers.delete("clear-site-data");

    if (new_response_headers.get("x-pjax-url")) {
      new_response_headers.set(
        "x-pjax-url",
        response_headers
          .get("x-pjax-url")
          .replace("//" + upstream_domain, "//" + url_hostname)
      );
    }

    const content_type = new_response_headers.get("content-type");
    if (
      content_type != null &&
      content_type.includes("text/html") &&
      content_type.includes("UTF-8")
    ) {
      original_text = await replace_response_text(
        original_response_clone,
        upstream_domain,
        url_hostname
      );
    } else {
      original_text = original_response_clone.body;
    }

    response = new Response(original_text, {
      status,
      headers: new_response_headers,
    });
  }
  return response;
}

async function replace_response_text(response, upstream_domain, host_name) {
  let text = await response.text();

  var i, j;
  for (i in replace_dict) {
    j = replace_dict[i];
    if (i == "$upstream") {
      i = upstream_domain;
    } else if (i == "$custom_domain") {
      i = host_name;
    }

    if (j == "$upstream") {
      j = upstream_domain;
    } else if (j == "$custom_domain") {
      j = host_name;
    }

    let re = new RegExp(i, "g");
    text = text.replace(re, j);
  }
  return text;
}

async function device_status(user_agent_info) {
  var agents = [
    "Android",
    "iPhone",
    "SymbianOS",
    "Windows Phone",
    "iPad",
    "iPod",
  ];
  var flag = true;
  for (var v = 0; v < agents.length; v++) {
    if (user_agent_info.indexOf(agents[v]) > 0) {
      flag = false;
      break;
    }
  }
  return flag;
}

🎉恭喜~你的图床已搭建完毕，即可分享图片，文件等内容。

GitHub 加速资源方法（可选）

1.文件加速方法

加速下载 Github Release、Archive 等文件。
在源网址前加上 https://hub.gitmirror.com/，例如：

https://hub.gitmirror.com/https://github.com/chinapmcc/img/blob/master/chinapmcc.png
如链接无法使用，请尝试替换成以下链接：
https://ghproxy.com/
https://ghps.cc/
https://gh.ddlc.top/

使用说明

GitHub文件链接带不带协议头都可以，支持 Release、Archive 以及文件，右键复制出来的链接都是符合标准的。不支持项目文件夹，合法的输入示例：

分支源码：https://github.com/chinapmcc/img/archive/main.zip
Release 源码：https://github.com/chinapmcc/img/archive/refs/tags/v1.1.0.zip
Release 文件：https://github.com/chinapmcc/img/releases/download/v1.2.0/chinapmcc.exe
分支文件：https://github.com/chinapmcc/img/blob/main/README.md

2.RAW加速方法

为了在亲爱的祖国流畅地访问 Github RAW 资源，您只要替换一下网址。就可以在任何地方、任何时候轻松访问 Github 的各种 RAW 资源，包括代码片段、文件和其他相关内容。
原raw地址

1	https://raw.githubusercontent.com

替换为新的raw地址

1	https://raw.gitmirror.com

如样例：

1
2
3

https://raw.githubusercontent.com/chinapmcc/img/master/PicGO+Typora.gif

https://raw.gitmirror.com/chinapmcc/img/master/PicGO+Typora.gif

3.Gist加速方法

为了在亲爱的祖国流畅地访问 Github Gist 资源，您只要替换一下网址。就可以在任何地方、任何时候轻松访问 Github Gist 的各种资源，包括代码片段、文件和其他相关内容。
原gist地址

1	https://gist.githubusercontent.com

替换为新的gist地址

1	https://gist.gitmirror.com

如样例：

1	https://gist.gitmirror.com/chinapmcc/5a8ufjytwh1b/raw/520/create-user.sh

4.Github/Gitlab/Bitbucket 加速方法

为了在亲爱的祖国流畅地加速访问 Github/Gitlab/Bitbucket RAW 资源。
使用URL

1	https://cdn.gitmirror.com

使用说明

GitHub /gh/:user/:repo/:tag/:file
GitLab /gl/:user/:repo/:tag/:file
Bitbucket /bb/:user/:repo/:tag/:file
其中：
:user Github/Gitlab/Bitbucket username
:repo Project repository
:tag Branch/commit/hash
:file File name with patch
如样例：

1	https://cdn.gitmirror.com/gh/chinapmcc/img/main/maker.ps1

使用Markdown软件（如Typora）上传图片（可选）

若你在使用 Typora 撰写 Markdown 文档，可实现图片自动上传至图床GitHub。

设置路径：格式 → 图像 → 全局图像设置 → 图像(左侧菜单) → 上传服务=PicList → PicList路径=安装路径 → 点击验证图片上传选项

编辑文档内的图片右键点击，选择上传图片，URL地址即替换为在线链接了。

通过以上步骤，你就成功搭建了一个免费、稳定、高效的图床，无论是博客写作、论坛发帖还是其他需要图片存储与分享的场景，都能轻松应对，快去试试吧！