利用 GitHub 仓库的免费存储空间和 Cloudflare 的 CDN 加速服务,可以轻松构建一个适合个人、博客和小型网站的图床,既能快速加载图片,又具备较高的稳定性和安全性。


为什么选择 GitHub Pages + Cloudflare?



  1. 高性能加速:Cloudflare 的全球 CDN 网络可以缓存 GitHub Pages 的内容,减少对 GitHub 的直接请求,加快图片加载速度。

  2. 自定义域名支持:Cloudflare 能将你的自定义域名(如 img.example.com)绑定到 GitHub Pages,使图床看起来更专业、更易管理。

  3. 安全性保障:Cloudflare 提供免费的 HTTPS 保护,并可启用 HSTS(HTTP 严格传输安全)以防止流量劫持。

  4. 高稳定性:通过 Cloudflare 的 DNS 服务,可以避免 GitHub Pages 默认域名 github.io 可能的不稳定性。

  5. 比 jsDelivr 更加可靠:相比 jsDelivr,GitHub Pages + Cloudflare 的组合在国内访问更加稳定,不受 jsDelivr 偶发性延迟或不稳定的影响。对于需要长期使用的图床,这种方案无疑更具优势。

  6. 完全免费:GitHub Pages 和 Cloudflare 的基础服务都是免费的,这一方案无需额外费用,非常适合小团队和个人使用。




教程概览



  1. 创建 GitHub 仓库并启用 GitHub Pages。

  2. 将自定义域名接入 Cloudflare 并配置 DNS 解析。

  3. 在 Cloudflare 中启用 HTTPS 加密、缓存加速和安全选项。

  4. 配置图床工具,方便图片上传和生成链接。




详细步骤


第一步:创建 GitHub 仓库用于存储图片




  1. 创建 GitHub 仓库



    • 登录 GitHub,创建一个新的公开仓库,用于存放图床图片。你可以将仓库命名为 image-hosting 或其他喜欢的名称。




  2. 上传图片



    • 在仓库中创建文件夹结构,比如 img/avatars/ 等文件夹用于分类管理图片。

    • 将图片直接上传到这些文件夹。GitHub 会自动生成每张图片的永久链接。




第二步:启用 GitHub Pages




  1. 启用 GitHub Pages



    • 在仓库的“Settings”页面中,找到“Pages”选项。

    • 将“Source”设置为 main 分支的根目录(Root),以启用 GitHub Pages。

    • 启用后,GitHub Pages 会为你分配一个默认链接,例如 https://your-username.github.io/image-hosting/




  2. 设置自定义域名



    • 将自己的域名绑定到 GitHub Pages。在 GitHub Pages 的“Custom Domain”中,填写你的域名并启用“Enforce HTTPS”。




第三步:将自定义域名接入 Cloudflare




  1. 在 Cloudflare 添加站点



    • 登录到 Cloudflare,点击“添加站点”,输入你的域名。

    • Cloudflare 会扫描当前 DNS 记录,确认后继续选择“免费”计划。




  2. 配置 DNS 记录



    • 进入 Cloudflare 的 DNS 设置页面,添加以下 DNS 记录:

      • A 记录:添加四条 A 记录,每条的“名称”字段填 @(根域名),IP 地址依次为 185.199.108.153185.199.109.153185.199.110.153185.199.111.153。启用“小黄云”以进行加速。

      • 子域名记录(可选):可以配置一个子域名(如 img.example.com),用于专门的图床访问。在“名称”字段中输入 img,并使用 CNAME 记录指向 GitHub Pages 地址,例如 your-username.github.io






第四步:在 Cloudflare 中配置 SSL/TLS 和缓存加速




  1. SSL/TLS 设置



    • 在 Cloudflare 的“SSL/TLS”页面中,选择 “完全”模式。这样 Cloudflare 会将你的自定义域名指向 GitHub Pages,并提供 HTTPS 保护。




  2. 启用 HSTS(增强 HTTPS 安全性)



    • 在“SSL/TLS”页面的“Edge Certificates”下找到“HTTP Strict Transport Security (HSTS)”选项并启用。

    • 设置 max-age 为 6 个月(或更长),并勾选 Include subdomainsPreload 选项,确保整个站点始终通过 HTTPS 访问。




  3. 配置缓存设置



    • 在 Cloudflare 的“Caching”页面中,启用缓存,并选择 “Cache Everything” 选项。这样可以将所有图片文件缓存到 Cloudflare,进一步提高加载速度。

    • 建议在“Page Rules”中创建规则,强制对图床的 URL 进行缓存,最大限度提升性能。




  4. 启用自动 HTTPS 重定向



    • 在“SSL/TLS”设置中,开启 “Always Use HTTPS” 选项,确保所有访问都会自动转到 HTTPS,提升安全性。






第五步:配置上传工具 PicGo(可选)


使用 PicGo 这样的工具可以方便地上传图片到 GitHub 仓库,并自动生成直链:



  1. 下载 PicGo 并安装

  2. 设置 GitHub 图床

    • 在 PicGo 中选择“图床设置”,添加“GitHub 图床”。

    • 配置以下信息:

      • 仓库名:格式为 username/image-hosting

      • 分支名:填写 main

      • Token:前往 GitHub 设置页面生成一个 Personal Access Token,勾选 repo 权限。

      • 存储路径:可以选择 img/ 或其他文件夹路径,按需调整。

      • 自定义域名:填写你在 Cloudflare 中设置的自定义域名,例如 https://img.example.com





  3. 上传图片:设置完成后,PicGo 会将图片上传到你的 GitHub 仓库,并生成加速后的链接,方便直接复制使用。


通过 GitHub Pages 与 Cloudflare 的结合,你现在拥有了一个稳定、免费、高性能的图床方案:



  • 全球访问速度更快,因为 Cloudflare CDN 将为你的图片进行加速和缓存。

  • 比 jsDelivr 更加稳定,GitHub Pages + Cloudflare 的组合在国内和全球访问均更加流畅,不受 jsDelivr 抽风现象的影响,长期使用体验更优。

  • 无需担心安全问题,Cloudflare 提供 HTTPS 和 HSTS 支持,确保所有数据安全传输。

  • 自定义域名便捷管理,将你的图床集成在个人域名下,提升专业度。


这个图床方案特别适合博客、个人网站或小型项目的图床需求。

举报· 244 次点击
登录 注册 站外分享
5 条回复  
drfy 初学 2024-10-29 14:13:05

AI风满满~

longsays 小成 2024-10-29 14:13:05

别人玩剩下的,github做图床小心封号:warning:

formant 限制会员 2024-10-29 14:13:05

直接大善人r2吧

banlan 初学 2024-10-29 14:13:05

好像一个仓库4g内存

handsome 限制会员 2024-10-29 14:13:05

不会被封号吗?

返回顶部