HQY

×

告别404!本文利用GitHub+Cloudflare+PicList的完美组合,手把手教你搭建永不消失的免费图床,优化图片加载速度,提升博客体验。

hqy hqy 发表于2025-07-21 20:34:54 浏览362 评论0

抢沙发发表评论

写文章配图,配视频是博客的灵魂,所谓图床不稳,写作心累。


告别404!本文利用GitHub+Cloudflare+PicList的完美组合,手把手教你搭建永不消失的免费图床,优化图片加载速度,提升博客体验。

图床是什么?

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

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

为什么选择GitHub?

    七牛云、腾讯云、阿里云、又拍云都是收费的,SM.MS和Imgur有免费版也有收费版,免费的量也不多。

当前GitHub公开仓库个数不限,而且单个仓库容量为1GB,如不够就再建一个公开仓库,现在有微软托管GitHub稳定、免费、可靠。


Cloudflare 提升访问速度

    Cloudflare 拥有全球分布的大量 CDN 节点,当用户请求 GitHub 图床中的图片时,请求会被路由到距离用户最近的 CDN 节点,节点会缓存 GitHub 上的图片数据,使用户能够快速加载图片,减少了因地理位置不同而产生的网络延迟。

Cloudflare 的 CDN 技术会对图片进行缓存优化,根据用户请求的频率和数据的热度等因素,合理地分配和利用缓存资源,进一步提高图片的加载速度。


Image


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、搭建准备工作

  1. 1. GitHub 注册账号(必须)

https://github.com/

用于创建仓库存放图片等资源。

  1. 2. Cloudflare 注册账号(必须)

https://dash.cloudflare.com/login

可能需要信用卡,用于验证身份,选择免费套餐用。

  1. 3. PicList软件下载安装(必须)

https://github.com/Kuingsmile/PicList/releases/latest

PicList是一款高效的云存储和图床平台管理工具,完整保留了PicGo的所有功能,还增添了许多新的feature。

  1. 4. PicGo软件下载安装(非必须)

用于管理图片上传的工具,功能上比PicList少一点,推荐使用PicList。

2、GitHub上创建图床

➢2.1 登录github(https://github.com/),点击New repository


Image


➢2.2 输入自定义仓库名(如:img),推荐勾选私有,原因如下:

  • 隐私保护:私有仓库中的图片不会对外公开,只有授权用户可以访问。

  • 安全性高:通过访问令牌和代理服务,可以有效保护仓库中的图片不被未经授权的访问。

  • 访问限制:私有仓库的图片无法直接通过 GitHub 的 URL 访问,需要通过代理服务或自定义域名,防止蹭图。


Image


随便创建一个文件,点击创建,存储图片的仓库创建完成。




➢2.3 创建个人Token

https://github.com/settings/profile

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


Image
Image


➢2.4 生成新令牌页面中设置参数 Generate new token (classic)

https://github.com/settings/tokens/new

  • Note:自定义填写备注

  • Expiration:不要选择具体时间,选择不过期(No Expiration)

  • Select scopes:勾选(repo)

其他权限不用勾选,点击底部按钮 “Generate token”


Image


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


Image


3、PicList or PicGo配置

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


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

https://github.com/Kuingsmile/PicList/releases/latest

  • 图床配置名:本地标识用,自定义取名

  • 设定仓库名: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


Image



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


Image



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

  • 仓库为公开时,图片链接不带token

  • 仓库为私有时,图片链接带token

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


➢3.3 设定统一图片大小

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


    <img src="$url" width="500px" height="300px">
  • 上传区→选择格式链接=HTML

  • 上传新图片或点击下方复制链接按钮,即可返回设定大小的图片链接

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

PicList or PicGo插件安装

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


Image


配置插件与Github基本一致


Image


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

  1. 1. 关闭 PicGo 应用程序。
  2. 2. 导航到 PicGo 的配置文件目录:
    • 通常是 C:\Users\HUAWEI\AppData\Roaming\picgo。

  3. 3. 删除以下文件和文件夹:
    • package.json

    • package-lock.json

    • node_modules 文件夹。

  4. 4. 重新启动 PicGo,并再次尝试安装插件



4、Cloudflare加速图床访问


➢4.1 登录Cloudflare:
https://dash.cloudflare.com/login

点击左侧菜单栏:Workers 和 Pages菜单,点击创建创建一个Workers的项目

免费套餐:一天10万次请求,如果访问超了说明你是个大网红博主了。


Image
Image


➢4.2 创建Hello World,输入一个自定义域名(如:blog),点击部署


Image


➢4.3 点击编辑代码,将复制worker.js完整代码

主要替换下面两项内容,然后点击部署


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


worker.js代码作用

  1. 1. 代理请求:
    • 当有人访问你的网站时,这段代码会把他们的请求转发到另一个指定的网站(比如 GitHub 的文件服务)。

    • 就像一个“中间人”,帮你从别的地方拿东西给访问者。

  2. 2. 自定义处理:
    • 设备检测:判断访问者是用手机还是电脑访问的。如果是手机,可能会转发到一个更适合移动设备的地址。

    • 地区和IP限制:可以根据访问者的地理位置或IP地址阻止某些请求。比如,你可以设置某些地区或某些IP地址的用户无法访问。

    • 修改请求和响应:在转发请求之前,代码会修改一些请求头(比如添加认证信息),确保请求能正确到达目标网站。同时,它也会修改返回的响应头,比如设置缓存策略或允许跨域访问。

  3. 3. 文本替换:
    • 如果返回的内容是HTML页面,代码会根据预设的规则替换页面中的某些文本。比如,可以把页面中的某个链接地址替换为你自己的域名。

  4. 4. 缓存控制:
    • 你可以选择是否让浏览器缓存返回的内容。如果启用缓存,用户再次访问时可以更快地加载内容;如果禁用缓存,每次访问都会获取最新的内容。

  5. 5. 跨域支持:
    • 为了让你的网站能够安全地从其他域名加载资源,代码会设置一些特殊的响应头,允许跨域访问。


// 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));
});

asyncfunctionfetchAndApply(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 = newURL(request.url);
let url_hostname = url.hostname;

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

if (awaitdevice_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 = newResponse(
      "Access denied: WorkersProxy is not available in your region yet.",
      {
        status: 403,
      }
    );
  } elseif (blocked_ip_address.includes(ip_address)) {
    response = newResponse(
      "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 = newHeaders(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 = awaitfetch(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 = newHeaders(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 = awaitreplace_response_text(
        original_response_clone,
        upstream_domain,
        url_hostname
      );
    } else {
      original_text = original_response_clone.body;
    }

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

asyncfunctionreplace_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;
    } elseif (i == "$custom_domain") {
      i = host_name;
    }

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

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

asyncfunctiondevice_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;
}
Image



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



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地址


https://raw.githubusercontent.com


替换为新的raw地址


https://raw.gitmirror.com


如样例:


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地址


https://gist.githubusercontent.com


替换为新的gist地址


https://gist.gitmirror.com


如样例:


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



4.Github/Gitlab/Bitbucket 加速方法

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

使用URL


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

如样例:


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



使用Markdown软件(如Typora)上传图片(可选)

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

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


Image


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


Image



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



打赏

本文链接:https://www.kinber.cn/post/5356.html 转载需授权!

分享到:


推荐本站淘宝优惠价购买喜欢的宝贝:

image.png

 您阅读本篇文章共花了: 

群贤毕至

访客