Sorry, your browser cannot access this site
This page requires browser support (enable) JavaScript
Learn more >

Github+jsDelivr图床

经常写博文的朋友对床图肯定不陌生。使用markdown撰写博客,将图片放在床图网站生成外链统一管理,这样一份博文就可以发布在不同的平台,也避免了不同网页对同一张图片引用的。不过免费的床图网站有时不稳定,付费价格又都不便宜。

最近了解到了Github+jsDelivr的方式搭建个人床图,稳定快速免费。

搭建方法也比较简单,本文默认已经:

  • 有Github账号
  • 通过SSH与本地Git绑定
  • 掌握基本的Git操作

那么,搭建床图仅需三步。

在GIthub建立一个仓库

创建GitHub仓库并与本地Git绑定中已经完成

将本地图片push到仓库

  • 先将建好的仓库clone到本地
  • 将需要上传的图片添加到对应文件夹
  • git push

图片就是保存在github仓库,每个仓库有1个G的容量限制。1个G?不叫事,那能存很多图片。如果你图片存满,那再建个新仓库就是了。

Github的资源在国内加载速度比较慢,所以需要用到CDN技术来加速。

CDN的全称是Content Delivery Network,即内容分发网络。CDN是构建在网络之上的内容分发网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。

jsDelivr(https://cdn.jsdelivr.net)就是一种免费且快速的CDN,通过jsDelivr引用资源GIthub图片资源,即可实现图片加速。所以接下来的第三步,改写一下链接就搞定了。主题内部也是用了这种方法。

通过jsDelivr引用资源

使用方法:

1
https://gcore.jsdelivr.net/gh/你的用户名/你的仓库名@发布的版本号/文件路径

此处

1
https://gcore.jsdelivr.net/gh/jxclbx/blogImages/文件路径

例如访问https://gcore.jsdelivr.net/gh/jxclbx/blogImages/imageSource/bg.jpg

得到如下效果:

1683047388149

图床接入

1683085112814

markdown的图片URL可以填入网络地址,并且paste image插件所输出的格式就是标准的markdown格式,而不是hexo的引用图片格式,我们只需在写完一篇blog后,多加入一步上传图片到github的步骤即可。

1683085490877

1683085475240

在merge后,直接将md文件中的url做替换,加入

1
https://gcore.jsdelivr.net/gh/jxclbx/blogImages/imagePost/

1683085590957
1683085670620

即可完成。

评论