利用 GitHub 仓库的免费存储空间和 Cloudflare 的 CDN 加速服务,可以轻松构建一个适合个人、博客和小型网站的图床,既能快速加载图片,又具备较高的稳定性和安全性。
为什么选择 GitHub Pages + Cloudflare?
- 高性能加速:Cloudflare 的全球 CDN 网络可以缓存 GitHub Pages 的内容,减少对 GitHub 的直接请求,加快图片加载速度。
- 自定义域名支持:Cloudflare 能将你的自定义域名(如
img.example.com )绑定到 GitHub Pages,使图床看起来更专业、更易管理。
- 安全性保障:Cloudflare 提供免费的 HTTPS 保护,并可启用 HSTS(HTTP 严格传输安全)以防止流量劫持。
- 高稳定性:通过 Cloudflare 的 DNS 服务,可以避免 GitHub Pages 默认域名
github.io 可能的不稳定性。
- 比 jsDelivr 更加可靠:相比 jsDelivr,GitHub Pages + Cloudflare 的组合在国内访问更加稳定,不受 jsDelivr 偶发性延迟或不稳定的影响。对于需要长期使用的图床,这种方案无疑更具优势。
- 完全免费:GitHub Pages 和 Cloudflare 的基础服务都是免费的,这一方案无需额外费用,非常适合小团队和个人使用。
教程概览
- 创建 GitHub 仓库并启用 GitHub Pages。
- 将自定义域名接入 Cloudflare 并配置 DNS 解析。
- 在 Cloudflare 中启用 HTTPS 加密、缓存加速和安全选项。
- 配置图床工具,方便图片上传和生成链接。
详细步骤
第一步:创建 GitHub 仓库用于存储图片
创建 GitHub 仓库:
- 登录 GitHub,创建一个新的公开仓库,用于存放图床图片。你可以将仓库命名为
image-hosting 或其他喜欢的名称。
上传图片:
- 在仓库中创建文件夹结构,比如
img/ 、avatars/ 等文件夹用于分类管理图片。
- 将图片直接上传到这些文件夹。GitHub 会自动生成每张图片的永久链接。
第二步:启用 GitHub Pages
启用 GitHub Pages:
- 在仓库的“Settings”页面中,找到“Pages”选项。
- 将“Source”设置为
main 分支的根目录(Root),以启用 GitHub Pages。
- 启用后,GitHub Pages 会为你分配一个默认链接,例如
https://your-username.github.io/image-hosting/ 。
设置自定义域名:
- 将自己的域名绑定到 GitHub Pages。在 GitHub Pages 的“Custom Domain”中,填写你的域名并启用“Enforce HTTPS”。
第三步:将自定义域名接入 Cloudflare
在 Cloudflare 添加站点:
- 登录到 Cloudflare,点击“添加站点”,输入你的域名。
- Cloudflare 会扫描当前 DNS 记录,确认后继续选择“免费”计划。
配置 DNS 记录:
- 进入 Cloudflare 的 DNS 设置页面,添加以下 DNS 记录:
- A 记录:添加四条 A 记录,每条的“名称”字段填
@ (根域名),IP 地址依次为 185.199.108.153 、185.199.109.153 、185.199.110.153 和 185.199.111.153 。启用“小黄云”以进行加速。
- 子域名记录(可选):可以配置一个子域名(如
img.example.com ),用于专门的图床访问。在“名称”字段中输入 img ,并使用 CNAME 记录指向 GitHub Pages 地址,例如 your-username.github.io 。
第四步:在 Cloudflare 中配置 SSL/TLS 和缓存加速
SSL/TLS 设置:
- 在 Cloudflare 的“SSL/TLS”页面中,选择 “完全”模式。这样 Cloudflare 会将你的自定义域名指向 GitHub Pages,并提供 HTTPS 保护。
启用 HSTS(增强 HTTPS 安全性):
- 在“SSL/TLS”页面的“Edge Certificates”下找到“HTTP Strict Transport Security (HSTS)”选项并启用。
- 设置
max-age 为 6 个月(或更长),并勾选 Include subdomains 和 Preload 选项,确保整个站点始终通过 HTTPS 访问。
配置缓存设置:
- 在 Cloudflare 的“Caching”页面中,启用缓存,并选择 “Cache Everything” 选项。这样可以将所有图片文件缓存到 Cloudflare,进一步提高加载速度。
- 建议在“Page Rules”中创建规则,强制对图床的 URL 进行缓存,最大限度提升性能。
启用自动 HTTPS 重定向:
- 在“SSL/TLS”设置中,开启 “Always Use HTTPS” 选项,确保所有访问都会自动转到 HTTPS,提升安全性。
第五步:配置上传工具 PicGo(可选)
使用 PicGo 这样的工具可以方便地上传图片到 GitHub 仓库,并自动生成直链:
- 下载 PicGo 并安装。
- 设置 GitHub 图床:
- 在 PicGo 中选择“图床设置”,添加“GitHub 图床”。
- 配置以下信息:
- 仓库名:格式为
username/image-hosting 。
- 分支名:填写
main 。
- Token:前往 GitHub 设置页面生成一个 Personal Access Token,勾选
repo 权限。
- 存储路径:可以选择
img/ 或其他文件夹路径,按需调整。
- 自定义域名:填写你在 Cloudflare 中设置的自定义域名,例如
https://img.example.com 。
- 上传图片:设置完成后,PicGo 会将图片上传到你的 GitHub 仓库,并生成加速后的链接,方便直接复制使用。
通过 GitHub Pages 与 Cloudflare 的结合,你现在拥有了一个稳定、免费、高性能的图床方案:
- 全球访问速度更快,因为 Cloudflare CDN 将为你的图片进行加速和缓存。
- 比 jsDelivr 更加稳定,GitHub Pages + Cloudflare 的组合在国内和全球访问均更加流畅,不受 jsDelivr 抽风现象的影响,长期使用体验更优。
- 无需担心安全问题,Cloudflare 提供 HTTPS 和 HSTS 支持,确保所有数据安全传输。
- 自定义域名便捷管理,将你的图床集成在个人域名下,提升专业度。
这个图床方案特别适合博客、个人网站或小型项目的图床需求。 |