你是否也曾被这些问题困扰过:

  • 写博客记笔记时,markdown中的一堆图片究竟该塞在哪儿?
  • 图片放本地,路径管理实在是太麻烦,还占用一堆存储空间
  • 图片放免费图床,谁知道哪天服务商就跑路了?

别慌!今天杜子源来给大家带来一个终极白嫖方案!

方案

利用 GitHub + jsDelivr,搭建一个属于你自己的、免费、稳定且全球加速的私人图床!

这篇教程保证过程清晰明了,就算是小白也能够轻松搞定!

为什么选择Github?

这时候有一堆大佬就要站出来说,XXX不香吗?我知道xxx更雕,你这太麻烦等等。

但我想说!

免费!免费!免费!

重要的事情说三遍!只要你的仓库是公开的,就完全免费,省下的钱买杯奶茶不香吗?

稳定如山

背后是微软爸爸,全球最大同性平台,安全性还是有保障的。

全球加速

配合 jsDelivr 这个免费的公益 CDN,你的图片在全球各地都能秒开,访问速度还可以,我现在的博客图片访问速度还可以!

管理方便

所有图片都在一个仓库里,配合 Git 进行版本控制,误删还能找回!

主流图床方案对比

这里我们快速对比一下市面上的几种主流方案:

  1. 专业云存储服务 (OSS)

    • 代表:阿里云 OSS、腾讯云 COS、七牛云 Kodo。
    • 优点:超稳定、速度飞快、功能强大。
    • 缺点收费(虽然不多,但终究要花钱),配置对新手有一定门槛。
    • 结论:适合商业项目或不差钱的大佬。
  2. 第三方免费/付费图床

    • 代表:Imgur、路过图床等。
    • 优点:极其简单,拖拽上传即可。
    • 缺点最大的隐患是不稳定!随时可能关停或跑路,导致图片全军覆没。强烈不推荐用于正式博客!
    • 结论:只适合临时分享,别当真。
  3. 自建服务器 (VPS)

    • 优点:数据完全自己掌控,高度灵活。
    • 缺点成本高、技术门槛高,需要自己运维、备份、防护,心累。
    • 结论:适合热爱折腾的运维大神。
  4. GitHub / Gitee 代码托管平台(我们的主角)

    • 优点:免费、稳定、全球加速、管理方便。
    • 缺点:仓库需公开,不能放私密图片。
    • 结论:个人博客、知识库的完美选择!

Part1: 基础搭建(手动档)

理论结束,实践开始!

步骤1:拥有一个GitHub账号

这是我们的万恶的开始,

各位同志,GitHub以后将是你们痛苦的深渊,爱的越深,恨的越深!

如果你还没有,赶紧去官网注册一个。

brand:github立即前往 GitHub 官网
如果你访问

GitHub 缓慢或困难,可能需要一些科学的上网技巧,比如配置 Clash 等工具。这部分内容可以自行搜索相关教程哦。

创建成功的仓库如下图所示:

杜子源源的Github仓库
杜子源源的Github仓库

步骤2:创建你的图床

图床,顾名思义就是存放图片的仓库 (Repository)。我们需要在 GitHub 上创建一个专属的仓库来存放图片。

  1. 登录 GitHub,点击右上角的 “+” 号,选择 New repository
点击“+”号创建仓库
点击“+”号创建仓库
  1. 填写仓库信息,这里有几个关键点:
    • Repository name (仓库名):取个好记的名字,比如 my-image-bedblog-pics 等。
    • Description (描述):简单写一下用途,方便自己识别。
    • 务必选择 Public (公开):这是关键!只有公开仓库,图片才能被外部访问。
    • 勾选 Add a README file:这是一个好习惯,让你的仓库看起来更专业。
填写信息
填写信息

点击 Create repository,搞定!🎉

步骤3:上传图片 & 获取链接

现在,我们来试试手动上传一张图片。

  1. 进入你刚创建的仓库,点击 Add file -> Upload files
  2. 直接把图片拖拽进来,或者点击 choose your files 选择文件。
选择你需要的图片(提前将图片名称改成简洁的英文)
选择你需要的图片(提前将图片名称改成简洁的英文)
  1. 上传后,在页面下方点击 Commit changes 提交。

步骤4:套上CDN,加速访问

直接从GitHub获取原始链接,在国内访问速度可能不太理想,因此需要——jsDelivr。

转换规则超级简单:

👇 变身为 👇

举个栗子:

  • 我的用户名是: doublesevenshop
  • 我的仓库名是: Picture
  • 图片路径是: images/cat.png

那么CDN加速链接就是:

https://cdn.jsdelivr.net/gh/doublesevenshop/Picture/images/cat.png

这就是你最终要在博客文章里使用的链接!把它贴到你的

Markdown 文件里试试吧!

在Hexo中,你可以这样优雅地插入图片:

1
{% image https://cdn.jsdelivr.net/gh/你的用户名/仓库名/图片路径 '这里是图片的描述' %}

Part2: PicGo配置(自动挡)

手动上传、复制、转换链接还是有些繁琐,对于我们这种懒人,那必须自动挡安排起来。

PicGo 是一款开源的图床上传工具,可以实现截图、拖拽后自动上传到你的 GitHub 仓库,并自动将CDN链接复制到剪贴板。一步到位!

步骤1: 安装PicGo

brand:github前往 PicGo Release 页面下载
根据你的操作系统下载对应的版本并安装。

步骤2:配置PicGo

打开 PicGo,进入 图床设置 -> GitHub图床,按照下图填写信息:

PicGo配置界面
PicGo配置界面
  • 设定仓库名:格式是 用户名/仓库名,例如 doublesevenshop/Picture。
  • 设定分支名:一般填写 main。
  • 设定 Token:这是让 PicGo 有权限操作你仓库的“令牌”。
    • 前往 GitHub -> Settings -> Developer settings -> Personal access tokens -> Tokens (classic) -> Generate new token。
    • 给 Token 起个名字,勾选 repo 权限,然后生成。
    • 警告!这个

      Token 只会显示一次,请立即复制并保存到安全的地方!关掉页面就再也找不到了!

  • 指定存储路径:可以设置一个文件夹,比如 img/,这样所有图片都会传到这个文件夹里,方便管理。
  • 设定自定义域名:这里填上我们的 CDN 加速地址 https://cdn.jsdelivr.net/gh/用户名/仓库名。

步骤3:德芙一般丝滑

问: 把大象放进冰箱需要几步?

  • 打开 PicGo 主窗口,把图片拖进去。
  • 使用快捷键截图上传(默认为 Ctrl+Shift+P / Cmd+Shift+P)。
  • 上传成功后,格式化好的 Markdown 链接会自动复制到你的剪贴板,直接粘贴到文章里即可!是不是爽到飞起?

总结

恭喜你!现在你已经拥有了一个专属于你的、免费、稳定又高速的个人图床。无论是写博客、做分享,还是在 Typora、Obsidian 里记笔记,都将变得无比顺畅。

希望这篇教程对你有所帮助!如果觉得不错,别忘了点赞、收藏,分享给更多有需要的朋友!

参考文献

知乎:如何使用jsDelivr+Github实现免费CDN加速


共发表 5 篇Blog · 总计 4.5k 字
© 2024 杜子源 使用 Stellar 创建
总访问 113701 次 | 本页访问 326