图床搭建与 CDN 加速指南
前言
本章节讲解图床的搭建、管理图片工具以及如何访问图片。
GitHub 图床
创建仓库
- 在 GitHub 创建一个仓库,记得勾选公开和 md 文档
- 访问 https://github.com/settings/apps
- 点击 Personal access tokens → Tokens → New personal access token (classic)
- 时间选择永久过期,勾选
repo再生成 - 保存好 token 等会用
💡 也可以将这个仓库同步到 Vercel,再配置一个二级域名进行访问
PicGo
管理上传的图片工具,结合 Typora 使用。
下载并启用,如果不能启动,右键勾起兼容模式,管理员身份启动。
配置

配置示例:
1 | 仓库名:luckyNwa/lucky-pic-bed |
注意事项
- 自定义域名格式:
https://cdn.jsdelivr.net/gh/[GitHub用户名]/[仓库名]@main - 分支必须填
@main,否则默认使用 master 分支,会导致图片上传失败 - picgo-server 端口: PicGo 设置 → 设置 Server →
36677 - 仓库大小限制: GitHub 图床仓库大小不能超过 1G,超过后会有人工审核,轻则删库重则封号
Typora
Typora 支持粘贴或拖入图片时自动上传到图床,这里用了脚本将图片传到自己的服务器。
配置步骤
- 打开
文件→偏好设置→图像 - 上传服务 选择
Custom Command - 命令 填写上传脚本路径:
1 | D:\workspace\java\lucky-admin2\lucky-api-v2\bin\upload_prod.bat |
💡 配置完成后,插入图片时会自动调用脚本上传并返回图床链接,无需手动处理图片托管。
npm 图床
采用提交到 GitHub,让 GitHub Actions 自动打包到 npm,通过加速访问 npm 里的资源。
注册与登录
- 去 npm 官网 注册账号并绑定邮箱
- 拉取上面 GitHub 仓库,进入根目录,CMD 执行:
1 | npm config set registry https://registry.npmjs.org |
初始化与发布
运行 npm 初始化指令,把整个图床仓库打包,按照指示进行配置。
⚠️ 需要事先确认包名没有和别人已发布的包重复,可以在 npm 官网搜索,搜不到说明还没被占用。
1 | npm init # 绑定 npm 仓库,配置唯一包名、版本、作者名 |

GitHub Actions 自动发布
每次本地 npm publish 需要架梯子且耗时,交给 GitHub Actions 自动完成。
1. 获取 npm Token
npm 官网 → 头像 → Access Tokens → Generate New Token → 勾选 Automation
💡 Token 只会显示这一次,务必保存好
2. 配置 GitHub Secrets
在 GitHub 图床仓库设置项里添加一个名为 NPM_TOKEN 的 secrets,把 npm 的 Access Token 输入进去。
3. 添加 GitHub Actions
新增文件 .github/workflows/autopublish.yml:
1 | name: Node.js Package |
4. 更新与提交
1 | 将更改提交 |
⚠️ 此处四行指令顺序严格。每次更新 npm 图床都需要先修改
package.json里的 version。npm version patch会将末尾版本号 +1(如 0.0.1 → 0.0.2)。大版本更新还是需要手动改的。
Cloudflare 图床
先去GitHub上fork,https://github.com/MarSeventh/CloudFlare-ImgBed
再去Cloudflare 官网 用luckywei015@gmail.com|1656213092@qq.com登录,密码N…@

开始使用,导入现有Git存储库,开始使用,连接GitHub
(1)找到 Pages → 创建 → 连接到 GitHub
(2)登录发现往下看,可以选择仓库,选刚刚fork过来的那个
1 | npm install 构建命令 |

保存并部署

命名空间:cloud
再去worker 和pages下找到项目里的设置,去绑定这个kv空间

变量名:img_url (必须是这个)
再去部署—>最下面下面…,重新部署
再去存储和数据库那,点击R2存储里概述,闲鱼买了个邮箱转移的,不然没卡绑定
桶名字:cloud 创建
再去和绑定kv一样,绑定–>添加,R2,变量名:cloudR2
重新部署,等待部署完,点击域名查看

上传不了,服了,还是用java弄一个吧,集成到自己的后台管理系统里
R2对象存储的 跨域策略:
1 | [ |
安全性
└── 安全规则
创建规则:非中国访问观察
表达式
1 | (ip.geoip.country ne "CN" and not http.host in { |
外国人访问要走机器人认证
回源加速
提交完就可以访问了,国内有 CDN 加速访问 jsdelivr 官网
jsdelivr + npm
1 | https://cdn.jsdelivr.net/npm/lucky-img/img/lucky675.png |
指定版本:
1 | https://cdn.jsdelivr.net/npm/lucky-img@1.0.0/img/lucky675.png |
jsdelivr + GitHub
1 | https://cdn.jsdelivr.net/gh/luckyNwa6/lucky-pic-bed@main/pic/Somewhere.jpg |
unpkg 回源 npm
1 | https://unpkg.com/lucky-img@1.0.0/pic/Somewhere.jpg |
其他 CDN 回源
| CDN | 格式 | 说明 |
|---|---|---|
| npm.onmicrosoft.cn | https://npm.onmicrosoft.cn/:package@:version/:file |
推荐使用 |
| npm.elemecdn.com | https://npm.elemecdn.com/:package@:version/:file |
百度出品,网宿国内节点 |
| code.bdstatic.com | https://code.bdstatic.com/npm/:package@:version/:file |
饿了么出品,网宿国内节点 |
| unpkg.com | https://unpkg.com/:package@:version/:file |
香港节点 |
⚠️ Cloudflare Pages 回源在国内访问不稳定,推荐使用
npm.onmicrosoft.cn回源。
效果展示








