图床_Github+JsDelivr+PicGo+Typora

已于 2024-06-15 14:28:50 修改
阅读量801 收藏 26
点赞数 26
分类专栏： 个人学习 文章标签： github
于 2024-06-11 17:15:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CSDN_JAVA_CC/article/details/139594540
版权

文章目录

前言

大家在进行博客的编写时，会剪贴到很多图片到我们的文档当中。在我们使用Typora进行markdown文件的编写，可以有很好的一个展示效果。

但是markdown是基于引用的形式将图片展示给我看的，而不是将图片插入到文档之中。如果只是我们个人观看并无什么问题，但是当我们想要将文档分享给到别人时，我们所插入的图片就会发现全部都是无法查看。

tips: 图片保存在本地目录，文档引用图片的存储路径

在这里我们可以引用图床的概念来解决这个问题

所谓图床，其实可以就相当于我们手机上的相册，不过他是在线的，而且是对大家开放的，大家都可以访问查看，但是编辑删除这些功能仅限于拥有者，就相当于用百度云分享的公开照片，你可以查看，也可以下载下来编辑，但是拥有权还是属于分享者。

以下是网络上的概念：

图床其实是互联网中存储图片的空间。

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

ok，引入Github，其实我们就可以很好的知道这样的一个概念了，就是相当于本地代码与Github上面托管的代码。既然如此我们可以直接将图片资源放到Github托管上去，就像托管代码一样，然后通过Typora引用图片的地址，这样就可以去访问我们想要的图片了。

操作

1. 问题前沿

图床可以有其他的一个配置方法，这是我的一个配置过程记录

Github + PicGO + JsDelivr + Typora

以上：Gitee不可替代Github，因为Gitee开启了防盗连接，之前是可以的，现在不行了。其他工具均有替代款，以上只是笔者选型。

照旧先把可能出现的问题放在前面，寻找解决方案可以先看这里，否则可以先跳过这部分。

最重要的就是观察url

1.1 Github访问不了/过慢

科学上网(配置完成的话不太依赖需要科学上网了)

1.2 PicGo上传失败

可以检查PicGo的Github配置，我配置的时候是新建的，不是使用的默认配置，上传区域可以选择上传位置检查是否是配置那个

image-20231218173512559

1.3 路径无法访问到图片

PicGo图片上传成功，但是剪贴板的路径无法访问到图片

检查剪贴板的PicGo路径，与通过JeDelivr加速的路径有何区别，路径对不对

picture：本地图片文件夹

yeasher：github账户名

shine-oss：github图床仓库名

img：github上图片保存的目录

本地路径
picture/xxx.png
JeDelivr加速的路径
https://cdn.jsdelivr.net/gh/yeasher/shine-oss/img/xxx.png
PicGo生成的剪贴板路径
(未配置自定义域名)
https://raw.githubusercontent.com/yeasher/shine-oss/main/img/xxx.png
(配置了JeDelivr域名)
https://cdn.jsdelivr.net/gh/yeasher/shine-oss/img/xxx.png

检查是否配置了：

C:\Windows\System32\drivers\etc路径下的hosts文件。

配置方法看这里

1.4 JeDelivr加速失败
// 加载任何Github发布、提交或分支
https://cdn.jsdelivr.net/gh/user/repo@version/file

https://cdn.jsdelivr.net/gh/yeasher/shine-oss/img/xxx.png ## 获取最新资源
https://cdn.jsdelivr.net/gh/yeasher/shine-oss@1.0/img/xxx.png 
## 获取1.0版本的资源

检查路径是否配置正确。

https://

cdn.jsdelivr.net/gh

/yeasher

/shine-oss

/img

/image-20231218163720355.png

请求头 + 域名前缀 + github用户名 + 仓库名 + 图片文件夹 + 图片名

1.5 Typora没有图片上传功能

检查客户端版本号，我用的是0.9.98

1.6 个别情况----github上图片已上传成功，本地Typora图片不显示

个别文件上传成功，但是本地无法访问，github上面存在

解决方法: 将https 换成http 问题解决

依旧出现无法访问情况

文件–>偏好设置–>图像–>对网络位置的图片应用上述规则–>取消勾选

这里Typora会首先将图片保存在本地，然后再进行上传，问题得以解决。

image-20231218183425612

image-20231218183345752

2. 分工

​ Github：图片托管存储位置(访问慢，上传繁琐)

​ JeDelivr：CDN加速工具(加速Github访问)

​ PicGo：图床上传工具(简化上传步骤，直接拖拽上传即可)

​ Typore：markDown文件编写工具(文档编写方便支持富文档，但是图片是通过引用展示，分享比较依赖图床)， 有付费版有免费版的，免费版的高版本也具有图片上传功能(依赖图床)。我使用的是0.9.98版本。

3. 图床的使用
3.1 Github 直接使用Github挂载的图片(暂时没试过)
3.2 Github + JsDelivr

我是在本地目录同级创建一个picture文件夹保存图片，Typora引用路径是![](picture/xxx.png),我们可以使用

全局替换CTRL + F

image-20231218164341146

3.3 Github + PicGo

图片拖拽上传，点击上传，剪贴板上传等，然后上次成功剪贴板上有图片上次之后链接，可以直接使用

https://raw.githubusercontent.com/yeasher/shine-oss/main/img/Snipaste_2023-12-18_16-07-53.png

3.4 Github + PicGo + JsDelivr

PicGo 配置自定义域名为

https://cdn.jsdelivr.net/gh/yeasher/shine-oss

图片拖拽上传，点击上传，剪贴板上传等，然后上次成功剪贴板上有图片上次之后链接，可以直接使用

https://cdn.jsdelivr.net/gh/yeasher/shine-oss/img/image-20231218163720355.png

3.5 Github + PicGO + JsDelivr + Typora(需要支持图片上传功能—高版本有)

直接粘贴到Typora，可以选择上传到图床

可以选择命令行也可以选择客户端，客户端需要依赖PicGo客户端

image-20231218165418207

4. Github图床

前景提示: 这部分如果可以进行科学上网，可以更快地实现，如果加载缓慢的话。

4.1 首先创建一个新的公共仓库

1702871377936

新建一个仓库到Github

1702871721259

4.2 克隆代码到本地

1702871786699

1702871820734

1702872025559

4.3 新建一个文件夹，将图片复制进去。

1702879471106

4.4 commint 代码，然后push到Github。

第一次会有一个弹窗让你授权账号，选择添加账号，傻瓜式同意过去输入账号密码(这个是在网页已经登录了Github账号的情况下)。

1702879674494

4.5 自定义发布版本

0.0.0.2是因为我0.0.0.1已经创建过了，建议依次这样子去迭代(第一次输入进去是直接创建的)。那个发行版是我为发布拉了一个新的分支release,展示是因为汉化插件所以展示的是发行版。

1702880020501

1702880300861

5. Picgo简化上传

这是一个开源的图床上传工具，PicGo可以将其用作我们的图片上传工具

可以去它的官网下载，也可以去Github找它的release

5.1 下载安装之后打开

在这里插入图片描述

5.2 Github创建一个token

点击头像打开 Settings -> Developer settings -> Personal access tokens，最后点击 generate new token；

1702884076757

左边菜单拉到最下面

1702884337661

1702883398117

填写用途，然后勾选repo就可以点击下面按钮生成!在这里插入图片描述

然后就可以看到token

token 生成，注意它只会显示一次，所以你最好把它复制下来到你的备忘录存好，方便下次使用，否则下次有需要重新新建；

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

在这里插入图片描述

5.3配置PicGo

自定义域名可以填这个

https://cdn.jsdelivr.net/gh/yeasher/shine-oss

https://cdn.jsdelivr.net/gh/github账号的用户名/仓库名时

1702884033201

1702883852018

重中之重的是一定要把配置的配置设置为默认配置！！！

否则会出现you must be logged in to use

如果不配置也可以在上传区选择(但是小白容易漏掉)

image-20231218165602599

1702883852018

5.4 设置上传的快捷键

通过上传区上传即可（Ctrl V 或者将图片拖拽都可以），也可以通过快捷键的方式上传（默认上传键为 Ctrl + Shift + P）

1702884433697

1702884464184

5.5 问题处理
5.5.1 新配置的PicGo上传失败
5.5.2 上传之后剪贴板的路径无法展示

用记事本打开C:\Windows\System32\drivers\etc路径下的hosts文件。

在后面加下面的。

  1. 如果在设置配置的时候自定义域名为空

    185.199.111.133 raw.githubusercontent.com

    1702885846395

  2. 自定义域名为https://cdn.jsdelivr.net/gh/github账号的用户名/仓库名时。

    104.16.85.20 cdn.jsdelivr.net

    1702886673384

image-20231218163720355

6. JsDelivr进行CDN加速

我是在文件同级路径下创建picture文件夹保存图片

image-20231218165739615

可以再Typora配置好，然后就不用自己创建文件夹，直接粘贴到Typora即可

image-20231218170141010

Typora引用路径是![](picture/xxx.png),我们可以使用全局替换CTRL + F

image-20231218164341146

将picture替换成

https://cdn.jsdelivr.net/gh/yeasher/shine-oss/img

然后也可以看到图片。

如果添加了PicGO，可以通过Typora的上传功能直接粘贴在Typora，就不用通过PicGo客户端进行上传操作，然后再通过剪贴板粘贴到文本。

image-20231218182051949

最后

在有Github挂载，JeDelivr加速，PicGo代替上传，Typora配置图像设置

直接可以实现Snipaste剪切图片，然后直接复制到Typora，直接一起实现了本地图片留底和图床托管一系列操作。

剪贴之后点击上传按钮，本地

路径对比:

image-20231218171222754

本地文件:

image-20231218171352042

Github文件:

image-20231218172842564

补充：

补充一个Typora批量上传操作。

在Typora写博客，全部写好之后，里面所粘贴的图片全部都是本地的，我们需要一张张的去上传到图床或者边写边上传。

格式 --> 图像 -->上传所有本地图片

image-20231219160055095

结果:

复制到Typora，直接一起实现了本地图片留底和图床托管一系列操作。

剪贴之后点击上传按钮，本地

路径对比:

在这里插入图片描述

本地文件:

在这里插入图片描述

Github文件:

在这里插入图片描述

补充：

补充一个Typora批量上传操作。

在Typora写博客，全部写好之后，里面所粘贴的图片全部都是本地的，我们需要一张张的去上传到图床或者边写边上传。

格式 --> 图像 -->上传所有本地图片

[外链图片转存中…(img-4AnSqTk3-1718076458834)]

结果:

image-20231219160231138

使用 PicGo+Github+JsDelivr 搭建免费图床
BlueWhale52的博客
07-02 804
前言 在搭建我的博客时，想着写 Markdown 文档有个图床方便点，所以有了这篇文。 一开始是使用 PicGo+Gitee 来搭建，但在测试过程中发现当图片超过1M时，必须登录 Gitee 账号才能访问到仓库内的图片，否则会404，后来发现使用 Gitee Pages 可以解决这个问题。但是，Gitee Pages 不能自动部署，每上传一张图片，必须手动部署一次，才能正常访问（自动部署为Gitee Pages Pro付费内容），效率太低。因此改用GitHub。 但
Typora+PicGo+Github+Jsdelivr实现高效图文写作
米司博客
05-27 557
这段时间有看到小伙伴儿讨论图床的问题，都想知道有没有好用的图床，答案肯定是有的，比如国内的：腾讯云、阿里云、七牛云、又拍云等等，基本都是提供的有免费的CDN供用户使用，大概都是10个G左右的空间（具体的我不清楚，毕竟自己只用过七牛的，别的只是知道而已。。。），对于一般需求量不大的用户来说肯定是没问题了，但是对于技术产出较高的大佬们来说，肯定不够，所以这里结合我自己使用的一些方法总结了这篇文章，跟大家分享我自己的解决方案。 工具简介 typora 我现在自己写文章、文档什么的基本都使用markdown，这是.
Github+jsDelivr+PicGo 打造稳定快速、高效免费图床
Niko_Yu的博客
12-23 556
Github+jsDelivr+PicGo 打造稳定快速、高效免费图床 – 前言图床是个啥东西就不用过多介绍了，先来对比一下各路图床： 微博图床：以前用的人比较多，从2019年4月开始开启了防盗链，凉凉 SM.MS：运营四年多了，也变得越来越慢了，到了晚上直接打不开图片，速度堪忧 其他小众图床：随时有挂掉的风险 Imgur等国外图床：国内访问速度...
利用GitHub+jsdelivr搭建一个图床
一曲横笛的博客
03-23 466
新建 GitHub 仓库 生成一个 Token 点击用户头像 -> 选择 设置 点击开发者设置 点击Personal access tokens 点击Generate new token 填写Token描述，勾选repo然后点击Generate token生成一个Token 获取 Token密钥 注意这个 Token 只会显示一次，自己先保存下来，或者等后面配置好 PicGo 后再关闭此网页 配置 PicGo 并使用 jsdelivr 作为 CDN 加....
哇！用github+jsDelivr搭建图床真香
XJHui
05-22 1060
本文章最初发表在XJHui’s Blog，未经允许，任何人禁止转载！ 为使您获得最好的阅读体验，强烈建议您点击 这里 前往 XJHui’s Blog 查看！ 前言 之前的这篇图床安装使用教程中，我对典型的几种错误给出了解决方法，但好多用上github图床+PicGo工具的小伙伴都在吐槽上面的解决方法有时候也会失效，于是我想起了小康之前安利给我的这种方法。 会报各种错误的原因还是github在国内处于半墙不墙的状态，其它就不多说了。 我试了试那种方法，遇到了几个坑但最后也成功了，用上之后可以说是真香！ 可以
JSDelivr+GitHub+PicGo搭建免费图床
qq_42118119的博客
07-30 793
jsDelivr+GitHub+PicGo搭建免费图床 一、概念简介 1.图床 图床一般是指储存图片的服务器，有国内和国外之分。国外的图床由于有空间距离等因素决定访问速度很慢影响图片显示速度。国内也分为单线空间、多线空间和cdn加速三种。简而言之，就是能提供一些可以把图片存放到网上并且引用到其他网站使用的服务。 2.CDN CDN的全称是Content Delivery Network，即内容分发网络。CDN是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等
《Typora+PicGo +Github + jsDelivr + TinyPNG打造稳定快速、高效免费图床》的体验
wsdchong的博客
09-17 700
《Typora+PicGo +Github + jsDelivr + TinyPNG打造稳定快速、高效免费图床》 前言 参考Evan Xu的GitHub + jsDelivr + TinyPNG+ PicGo 打造稳定快速、高效免费图床。我目前已完成Typora+PicGo图床配置以及PicGo上传失败的解决办法。不过看了Evan Xu的这个图床后，发现还可以改进。原先我用的typora+PicGo+Gitter打造图床，而Evan Xu的方法是用GItHub做仓库，用jsDelivr做CDN来加速，用Ti
Typora结合PicGo + 使用Github搭建个人免费图床
qq_39921135的博客
02-25 4978
图床配置名：自己取设定仓库名：用户名+仓库名设定分支名：设定Token：就是上面我们刚刚在Github上获取的token设定存储路径：需要放到仓库中的哪个文件夹下。如果直接放到仓库的根目录下就不需要填写这一栏如果需要放到某个目录下，直接写目录名就行，不需要在目录名前加 /。eg：test当有多级目录时，也是直接写路径。当填写的目录不存在时，PicGo会自动帮你在Github上创建目录，这个不用担心！设定自定义域名：此时就需要结合jsDelivr来加速了。
Typora+Picgo+Github搭建本地图床
qq_58470013的博客
05-17 572
我们选择github作为我们的图床,因为github能上传超过1m的图片,而gitee只能上传小于1m的图片,上传超过1m的图片需要压缩,而且需要安装node.js,非常的不人性化。typora笔记软件在插入图片时,需要图片在本地,否则图片就无法显示,有一些麻烦,但是如果搭配上图床,把图片上传到云端,就不会有这种烦恼了,只要是在有网络的情况下,就能正常显示。typora显示上传成功,并且在picgo也成功看到了图片,这就表明我们已经成功搭建完成了。
Typora+PicGo+GitHub图床的搭建和常见问题的个人解决方法
qq_62229338的博客
09-02 1999
Typora+PicGo+GitHub图床的搭建和常见问题的个人解决方法
通过jsDelivr实现Github的图床CDN加速
学而思(xiejava的blog)
03-20 1172
jsdelivr是一个免费的公共CDN（内容分发网络）服务，它允许网站开发者将他们的代码库、JavaScript库、字体和其他资源托管在jsdelivr上，并通过jsdelivr的CDN网络进行快速分发。使用jsdelivr可以有效地减少用户下载资源的时间，提高网页加载速度，同时减轻原始服务器的负载。
2023使用picgo + github搭建图床（typora）,解决jsdelivr问题
qq_53131850的博客
01-01 1083
2023使用picgo + github搭建图床（typora）,!!!!!解决jsdelivr问题!!!!
Github+jsDelivr+PicGo 搭建图床
Leatitia的博客
12-05 549
一开始搭建图床用了gitee来搭建，感觉效果不错。折腾的毛病有点犯了，准备吧jsDelive倒腾一下，Github不错啊，利用jsDelivr CDN加速访问（jsDelivr 是一个免费开源的 CDN 解决方案），PicGo工具一键上传，操作简单高效。有工具的途径总是那么让人心欢~ 1. 新建github仓库 github的登陆注册需要的爬楼吧。在仓库下新建一个我们的图床仓库，记得新增一份REA...
个人图床：jsDelivr+Github+PicGo
weixin_44226752的博客
08-03 250
为了方便将自己的图片可以在网上不限平台的访问，搭建一个个人图床很有必要，搭建图床有很多方法，这里选用github+picgo，选用github是因为github稳定性很大，已经被微软托管，不会因为平台倒闭而出现上传的图片资源丢失。 同时由于国内访问github速度较慢，然后使用jsDeliver作为cdn来加速github图片的访问速度 注意：jsDeliver CDN最大只能缓存一个仓库中50M大小的图片资源，因此在仓库大小达到50M后，要新建一个仓库，同时推荐使用截图工具Snipaste，它截取的图片.
Github+jsDelivr+PicGo搭建图床
DotNeter-Hpf的博客
05-11 216
文章目录1.GitHub创建仓库，申请Token2.下载PicGo客户端3.设置代理4.实际操作 1.GitHub创建仓库，申请Token Setting → Developer Settings → Personal access Tokens → Personal access Tokens → Generate new token 创建 如图所示，输入名字和勾选repo即可 2.下载PicGo客户端 图床设置 → GitHub图床 两处标红的地方根据自己GitHub实际用户名和仓库名称来填写
Github+jsDelivr搭建免费快速的个人图床
量子孤岛
12-19 1663
香！手把手搭建免费快速的个人图床 本文同步发表如下平台： CSDN：https://editor.csdn.net/md?not_checkout=1&articleId=122026285 知乎专栏： 经常写博文的朋友对床图肯定不陌生。岛主习惯使用markdown撰写博客，将图片放在床图网站生成外链统一管理，这样一份博文就可以发布在不同的平台。不过免费的床图网站有时不稳定，付费价格又都不便宜。 最近了解到了Github+jsDelivr的方式搭建个人床图，既稳定又快速还免费，突出一个香！ 搭
搭建免费图床——github+picGo+jsdelivr
好记性不如烂笔头，记录学习，记录bug
10-15 487
如果我们平时写博客用的是markdown来进行编写，肯定会遇到图片的存储问题。如果放在本地，文章发送给别人看，图片将无法解析出来，这时候就需要用到图床——一种在云端上存储图片的服务器，提供链接供我们访问图片，我们只需要在文章中插入对应链接即可实现一次储存，多地使用。本文将交大家如何利用github+picGo快速搭建免费图床，并使用jsdelivr免费做CDN加速。
GitHub + jsDelivr + PicGo 搭建个人图床
小阮的博客
01-21 215
具体步骤： Github 仓库 新建一个 public 的 Github 仓库，参照 官方文档 生成一个 token密钥 PicGo 下载 PicGo ，安装完成后打开，图床设置 选 GitHub图床，并填写相应的信息 设定仓库名：上面新建的 Github 仓库，格式：<用户名>/<仓库名> 设定分支名：填写主分支名，比如 main 设定Token：上面生成的 token密钥 指定存储路径：指定存储在GitHub对应仓库的路径，比如 img/ 设定自定义域名：图片上传后，Pi.
GitHub+PicGo+jsDelivr搭建高速稳定免费图床
leehoward
12-01 1295
Gitee也是一个比较不错的图片搭建思路，国内访问速度快，Mac下也有uPic工具进行快速的图片上传管理，采用Gitee搭建自己的图床存储资源可查看《采用Gitee搭建自己的图床存储资源》 但是，Gitee对Windows系统的用户搭建图床不是很友好，没有图片上传管理工具，有能力的大神可以自己写一个插件也可以满足。 此文章介绍，如何通过Github搭建图床，采用jsdelivr做高速CDN，采用...
在写免费图床
最新发布
03-16
用户提供的引用1到4分别提到了不同的免费图床搭建方法，比如使用Oracle Cloud对象存储、Gitee、GitLab、Github结合PicGo等工具。 接下来，我应该先整理每个引用的核心方案，然后总结出不同的方法。用户可能希望了解...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值