免费图床搭建 (GitHub + PicFlow)
免费图床搭建指南:GitHub + PicFlow
Section titled “免费图床搭建指南:GitHub + PicFlow”你是否想让你的博客拥有稳定的图片服务,但又不想支付昂贵的云存储费用?或者你希望你的图片数据完全掌握在自己手中?
GitHub + PicFlow 的组合将是你的不二之选!本文将教你如何利用 GitHub 的免费存储空间,配合 PicFlow 插件,零成本搭建一个稳定、高速的个人图床。
为什么选择 GitHub 搭建图床?
Section titled “为什么选择 GitHub 搭建图床?”- 完全免费:GitHub 提供免费的公共仓库存储空间,对于个人博客和笔记图片来说完全够用。
- 稳定可靠:作为全球最大的代码托管平台,GitHub 的服务稳定性毋庸置疑,图片链接长期有效。
- 版本控制:GitHub 自带强大的版本控制,误删图片也有机会找回。
- CDN 加速:结合免费的 jsDelivr CDN 服务,可以大幅提升国内访问速度。
第一步:创建 GitHub 仓库
Section titled “第一步:创建 GitHub 仓库”首先,你需要一个在 GitHub 上存储图片的地方。
- 登录 GitHub:访问 GitHub 官网 并登录你的账号。
- 创建新仓库:点击页面右上角的 + 号,选择 New repository(新建仓库)。
- 填写仓库信息:
- Repository name (仓库名称): 填写一个你喜欢的名称,例如
image-hosting或blog-images。 - Description (描述): (可选) 简单描述用途,如“我的个人图床”。
- Public/Private (公开/私有): 务必选择 Public (公开)。私有仓库的图片无法直接通过链接公开访问。
- Initialize this repository: 建议勾选 Add a README file,这样仓库创建后不为空,方便后续操作。
- Repository name (仓库名称): 填写一个你喜欢的名称,例如
- 点击绿色的 Create repository(创建仓库)按钮。
第二步:获取访问令牌 (Token)
Section titled “第二步:获取访问令牌 (Token)”为了让 PicFlow 能够上传图片到你的 GitHub 仓库,你需要创建一个 Personal Access Token (PAT) 进行授权。
- 点击 GitHub 页面右上角的头像,选择 Settings(设置)。
- 在左侧菜单栏最下方,点击 Developer settings(开发者设置)。
- 选择 Personal access tokens -> Tokens (classic)。
- 点击 Generate new token (classic)。
- 填写 Token 信息:
- Note (备注): 填写便于识别的名称,如
PicFlow Token。 - Expiration (有效期): 建议选择 No expiration (永不过期),避免频繁更新 Token。
- Select scopes (权限选择): 务必勾选
repo(Full control of private repositories)。这包含了对仓库读写的所有权限。
- Note (备注): 填写便于识别的名称,如
- 点击底部的 Generate token 按钮。
- 复制 Token:生成的 Token 只会显示一次,请务必立即复制并保存到安全的地方!
第三步:在 PicFlow 中配置 GitHub 图床
Section titled “第三步:在 PicFlow 中配置 GitHub 图床”打开 Obsidian,进入 PicFlow 的设置界面,配置你的免费图床。
- 打开 Obsidian 设置面板,点击左侧的 PicFlow。
- 找到 2. 图床配置 (Uploader) 区域。
- 点击顶部的图床列表,选择 GitHub。
- 填写以下信息:
- Owner (用户名): 你的 GitHub 用户名。
- Repo (仓库名): 你在第一步创建的仓库名称(例如
image-hosting)。 - Branch (分支): 默认为
main(如果你创建仓库时默认是master,请填写master)。 - Token: 粘贴你在第二步生成的 Personal Access Token。
- CDN (加速域名): (可选但推荐) 为了提升国内访问速度,建议使用 jsDelivr 加速。
- 格式为:
https://cdn.jsdelivr.net/gh/{owner}/{repo}@{branch} - PicFlow 通常会自动识别并应用 CDN,如需手动指定,可填写
https://cdn.jsdelivr.net。
- 格式为:
- 配置完成后,点击底部的 Test Connection(测试连接)按钮。
- 如果提示 “Connection Successful”,说明配置成功!
- 最后,确保 Auto Upload (通用设置中) 已开启,或者在图床配置页将其设为 Default Uploader (默认图床)。
第四步:开始使用
Section titled “第四步:开始使用”现在,你已经拥有一套完全免费的图床系统了!
- 截图粘贴:在 Obsidian 中粘贴截图,PicFlow 会自动将其上传到你的 GitHub 仓库。
- 本地图片:拖拽本地图片到笔记中,也会自动上传。
- 查看图片:你可以在 GitHub 仓库中看到上传的图片文件。
- 访问速度:得益于 jsDelivr CDN,你的图片在全球范围内都能快速加载。
注意:虽然 GitHub 免费且好用,但请勿上传违反 GitHub 服务条款的内容(如违规图片),否则仓库可能会被封禁。对于重要数据,建议定期备份。
限制与注意事项 (Limits & Considerations)
Section titled “限制与注意事项 (Limits & Considerations)”虽然 GitHub 是一个非常优秀的图床选择,但在使用过程中也需要注意以下限制:
-
API 调用限制:
- GitHub 对 API 调用设有速率限制。对于使用 Personal Access Token (PAT) 的认证请求,限制为 每小时 5,000 次。
- 对于个人图床使用场景,这个额度通常绰绰有余(平均每分钟可上传/读取 80+ 张图片)。但如果进行极高频的批量操作,可能会触发限制。
-
文件大小限制:
- GitHub 建议单个文件大小不超过 50MB。
- 硬性限制:GitHub 不支持上传超过 100MB 的单个文件。如果尝试上传超过 100MB 的图片或文件,上传将会失败。
- 建议在 PicFlow 中开启 Auto Compress (自动压缩) 功能,以减小图片体积,提高加载速度并节省空间。
-
仓库容量:
- 虽然 GitHub 仓库没有明确的硬性容量上限,但建议仓库大小保持在 1GB 以内以获得最佳性能。如果仓库过大,建议创建一个新的仓库继续存储。
进阶玩法:利用 Vercel 实现随机图片 API
Section titled “进阶玩法:利用 Vercel 实现随机图片 API”如果你希望让你的博客或个人主页拥有每次刷新都不同的随机背景图,可以利用 Vercel 配合 GitHub 图床轻松实现。
1. 准备工作
Section titled “1. 准备工作”- 确保你已经完成了上述的 GitHub 仓库创建,并上传了一些图片。
- 注册并登录 Vercel,建议直接使用 GitHub 账号登录。
2. 添加配置文件
Section titled “2. 添加配置文件”在你的 GitHub 图床仓库根目录下,创建以下两个文件:
文件 1: vercel.json
{ "rewrites": [ { "source": "/", "destination": "/api" } ], "functions": { "api/index.js": { "maxDuration": 10 } }}文件 2: api/index.js (需要先新建 api 文件夹)
const fs = require('fs');const path = require('path');
module.exports = (req, res) => { // 图片所在的根目录,如果你的图片在 img 子目录,请修改为 '../img' const directoryPath = path.join(__dirname, '../');
fs.readdir(directoryPath, (err, files) => { if (err) { return res.status(500).send('Unable to scan directory: ' + err); }
// 过滤出图片文件 (jpg, jpeg, png, gif) const images = files.filter(file => /\.(jpg|jpeg|png|gif)$/i.test(file));
if (images.length === 0) { return res.status(404).send('No images found'); }
// 随机选择一张图片 const randomImage = images[Math.floor(Math.random() * images.length)];
// 重定向到图片地址 (如果在子目录,请加上前缀,如 `/${randomImage}`) res.redirect(307, `/${randomImage}`); });};3. 部署到 Vercel
Section titled “3. 部署到 Vercel”- 在 Vercel 控制台点击 Add New -> Project。
- 选择 Import Git Repository,找到你的图床仓库并点击 Import。
- 在配置页面,Framework Preset 选择 Other,保持默认设置。
- 点击 Deploy。
4. 使用随机图片
Section titled “4. 使用随机图片”部署成功后,Vercel 会分配一个域名(例如 https://your-repo.vercel.app)。
现在,你可以将这个链接用作博客背景或头像:
https://your-repo.vercel.app/
每次访问该链接,都会自动重定向到仓库中的一张随机图片。