图床是什么?

图床其实是互联网中存储图片的空间,举个栗子:

假设你在微博分享一张图片,你的粉丝可以通过互联网看到你分享的图片,那么他是去访问你的手机的相册吗?其实不是的,你分享图片,也就是把图片上传到微博的服务器,微博将为你生成一个独一无二的访问链接,这个链接指向的空间其实就是图床。

为什么要用图床?

因为像我一样热爱在网上分享博客的人,需要使用图床来进行表达。使用图床的人通常采用Markdown的方式去编辑文字。

有什么直接去使用的图床?

自己搭建一个属于自己博客

使用Github + JsDelivr

Github更稳定,配置起来也还是很方便

一 首先新建一个公开仓库:

生成token令牌

其中的token是十分重要的,我来带大家生成一下这个token

1.在自己的头像选择setting—» Developer setting —» Personal access tokens —-» token( classic ) ——» Generate new token —> (the second) New personal access token(classic)

生成后的token必需要保留,因为只显示一次的!!!!

二 上传一张图片到仓库之后,就已经可以当做图床使用

// 我蠢,我还不会上传文件或者图片,我学我学

  1. 创建一个新文件

  2. 按步骤来完成配置

  3. 然后点击该文件,上传文件就好啦

效果要这样的哦

  1. 怎么让图片显示呢? 先复制图片的地址

  2. 编写代码

    ![](复制的路径)  //显示图片的语法

那会创建了,那就要使用,看看使用的情况

就这样了

那怎么在外面去使用呢?例如:Markdown 一般上传一张图片到仓库之后,就已经可以当做图床使用

蠢蠢的我想到了cv大法,但是图片显示不出来

后来知道了:

![](https://github.com/KlayPeter/mmx_img/blob/main/iu%E5%A3%81%E7%BA%B8.webp)

--- 将blob改为raw

![](https://github.com/KlayPeter/mmx_img/raw/main/iu%E5%A3%81%E7%BA%B8.webp)
不信试试

真的诶!

github加载图片是很慢的,怎么去引入JsDeliver的加速地址?

github引入JsDeliver的加速地址

jsDelivr简介

是一个免费、快速和可信赖的CDN加速服务,声称它每个月可以支撑680亿次的请求。服务在Github上是开源的,jsDelivr地址 。目前,它提供了针对npm、Github和WordPress的加速服务,只需要一行代码就可以获得加速效果。只要我们的项目中用到了第三方的静态资源,譬如JavaScript脚本,css样式表,图片,图标,Flash等静态资源文件都应该考虑接入到CDN中

开始操作: 首先在图床仓库中点击release发布版本

https://pic4.zhimg.com/v2-4350b19a0496049bc7cd35cbaadabb87_r.jpg

自定义发布版(记得版本填写时要enter)

img

这是github图上的原始路径
![](https://github.com/KlayPeter/mmx_img/raw/main/iu%E5%A3%81%E7%BA%B8.webp)
加速之后!!!----- https://cdn.jsdelivr.net/gh/你的用户名/你的仓库名@发布的版本号/文件路径

##注意不要把`raw/main/`加进去哦
![](https://fastly.jsdelivr.net/gh/KlayPeter/mmx_img@v1.0.0/iu%E5%A3%81%E7%BA%B8.webp)

知道怎么去手动创建了,但是好累,费时间,那么有什么工具提供给我们学习呢?

采用工具来帮我们做事

  • PicGo:一个用于快速上传图片并获取图片链接的跨平台工具
  • uPic:功能和上面一样,纯 macOS 系统支持,所以在 mac 下面交互体验比上面流畅不少,还有对应移动端 APP

上面两款工具使用方式都是一样的,针对Github做图床都需要获取token供第三方图床工具使用。

推荐使用工具的理由如下:

  • 快速方便:只需要建立仓库配置一下接口
  • 稳定,毕竟大厂商(但需要注意的是Github图片仓库过大的时候记得换仓库)
  • JsDelivr解决Github在国内访问慢以及流量问题

现在就让我们来学习学习使用PicGo来实现上传github图床吧!

  1. 首先先下载PicGo 到官网下载即可https://picgo.github.io/PicGo-Doc/zh/guide/#picgo-is-here
#run
./PicGo-2.4.0-beta.6.AppImage

  1. 然后打开PicGo在PicGo里面进行配置( 每一项都要配置清楚 )

  1. 将这些东西配置好之后,就可以正常上传图床啦!(留意token,库名等等的正确性)

最后记得再把加速链接jsdelivr设置一下, 就大功告成啦!

https://fastly.jsdelivr.net/gh/[Username]/[Ku]@main

到这里就结束啦,好好写markdown和博客吧!


参考博客

1.https://mp.weixin.qq.com/s/l7rB4uhs7STzAFohc9Bw1g

2.Typora结合PicGo + 使用Github搭建个人免费图床_picgo整合typora-CSDN博客