图床_Github+JsDelivr+PicGo+Typora

已于 2024-06-15 14:28:50 修改
阅读量616 收藏 25
点赞数 25
分类专栏： 个人学习 文章标签： 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

楚辞大魔王
关注
  • 25
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
IMG:GitHub + jsDelivr + PicGo + Imagine 打造稳定快速、高效免费图床
04-07
IMG GitHub + jsDelivr + PicGo + Imagine 打造稳定快速、高效免费图床
jsDelivr失效了，用什么免费图床比较靠谱？
小朱的专栏
07-19 1476
jsDelivr 失效，国内无法访问，还是自制图床靠谱
【开源图床】使用Typora+PicGo+Github+CDN搭建个人博客图床
热门推荐
朝花夕拾
02-17 1万+
利用Typora+PicGo+Github+CDN搭建个人博客图床的方法在技术圈中备受关注。通过Typora编写博文、PicGo上传图片至Github仓库，并借助CDN实现加速，形成了一个高效的个人博客图床解决方案。这一方法简洁易行，不仅提升了博客编辑效率，还有效解决了图片存储和加载速度的问题。
GitHub + PicGo + Typora 搭建个人图床
07-23
GitHub + PicGo + Typora 搭建个人图床详细教程(个人博客)
GitHub+jsdelivr 搭建稳定快速、高效免费图床
02-23
国内的几大云存储又要收费所以现在安利一种基于github和jsdeliver加速的免费图床,操作简单高效,GitHub和jsDelivr都是大厂,不用担心跑路问题,不用担心速度和容量. 教程开始： 新建GitHub仓库 点击NEW新建，填写仓库名...
github图床+picgo+vscode yyds.md
03-03
github图床+picgo+vscode yyds.md
PicGo+Typora+Github
05-05
PicGo的主要功能是将本地图片上传到用户的图床。它提供了图形化界面的配置向导，让用户轻松完成图床的设置。在配置过程中，用户需要填写GitHub仓库名、分支名以及生成的Token。PicGo还允许用户自定义存储路径，这...
hexo搭建博客（github node git ）（失败版本）
m0_48362854的博客
07-17 302
同时回顾一下github git 和 node的基础知识。打算明天把git和node版本全部重新安装后再弄。搭建失败了 是因为git命令一直报错。
Spring Authorization Server实战
wsb_2526的博客
07-20 458
OAuth是一个开放标准的授权协议，允许用户授权第三方应用访问其在某个服务提供者上的受保护资源，而无需将其实际的凭证（比如用户和密码）分享给第三方应用。OAuth2.0协议的流程如下：用户打开客户端后，客户端要求用户给与授权；用户同意给客户端授权；客户端使用上一步获得授权，向服务器申请令牌；授权服务器对客户端认证后，向客户端发放令牌；客户端使用令牌，向资源服务器申请获取资源；资源服务器确认令牌有效后，向客户端开发资源；
Github07-16 Python开源项目日报 Top10
老孙正经胡说
07-16 1328
根据Github Trendings的统计，今日(2024-07-16统计)共有10个项目上榜。
Github 2024-07-17 开源项目日报 Top10
老孙正经胡说
07-17 802
根据Github Trendings的统计，今日(2024-07-17统计)共有10个项目上榜。
wx470校园保修系统小程序-springboot+vue+uniapp.zip（可运行源码+sql文件+文档）
07-20
基于web的校园报修系统使用Java语言进行编码，使用Mysql创建数据表保存本系统产生的数据。系统可以提供信息显示和相应服务，总之，基于web的校园报修系统集中管理信息，有着保密性强，效率高，存储空间大，成本低等诸多优点。它可以降低信息管理成本，实现信息管理计算机化。 学生信息管理页面，此页面提供给管理员的功能有：学生信息的查询管理，可以删除学生信息、修改学生信息、新增学生信息，还进行了对用户名称的模糊查询的条件。维修人员管理页面，此页面提供给管理员的功能有：查看已发布的维修人员数据，修改维修人员，维修人员作废，即可删除，还进行了对维修人员名称的模糊查询 维修人员信息的类型查询等等一些条件。故障上报管理页面，此页面提供给管理员的功能有：根据故障上报进行条件查询，还可以对故障上报进行新增、修改、查询操作等等。论坛信息管理页面，此页面提供给管理员的功能有：根据论坛信息进行新增、修改、查询操作等等。
wx447火锅店点餐系统-ssm+vue+uniapp.zip（可运行源码+sql文件+文档）
07-20
本火锅店点餐系统采用Java语言和Vue技术，框架采用SSM，搭配Mysql数据库，运行在Idea里，采用小程序模式。本火锅店点餐系统提供管理员、用户两种角色的服务。总的功能包括菜品的查询、菜品的购买、餐桌预定和订单管理。本系统可以帮助管理员更新菜品信息和管理订单信息，帮助用户实现在线的点餐方式，并可以实现餐桌预定。本系统采用成熟技术开发可以完成点餐管理的相关工作。 本系统的功能围绕用户、管理员两种权限设计。根据不同权限的不同需求设计出更符合用户要求的功能。本系统中管理员主要负责审核管理用户，发布分享新的菜品，审核用户的订餐信息和餐桌预定信息等，用户可以对需要的菜品进行购买、预定餐桌等。用户可以管理个人资料、查询菜品、在线点餐和预定餐桌、管理订单等，用户的个人资料是由管理员添加用户资料时产生，用户的订单内容由用户在购买菜品时产生，用户预定信息由用户在预定餐桌操作时产生。 本系统的功能设计为管理员、用户两部分。管理员为菜品管理、菜品分类管理、用户管理、订单管理等，用户的功能为查询菜品，在线点餐、预定餐桌、管理个人信息等。 管理员负责用户信息的删除和管理，用户的姓名和手机号都可以由管理员在此功能里看到。管理员可以对菜品的信息进行管理、审核。本功能可以实现菜品的定时更新和审核管理。本功能包括查询餐桌，也可以发布新的餐桌信息。管理员可以查询已预定的餐桌，并进行审核。管理员可以管理公告和系统的轮播图，可以安排活动。管理员可以对个人的资料进行修改和管理，管理员还可以在本功能里修改密码。管理员可以查询用户的订单，并完成菜品的安排。 当用户登录进系统后可以修改自己的资料，可以使自己信息的保持正确性。还可以修改密码。用户可以浏览所有的菜品，可以查看详细的菜品内容，也可以进行菜品的点餐。在本功能里用户可以进行点餐。用户可以浏览没有预定出去的餐桌，选择合适的餐桌可以进行预定。用户可以管理购物车里的菜品。用户可以管理自己的订单，在订单管理界面里也可以进行查询操作。
【独家首发】Matlab实现金枪鱼优化算法TSO优化Transformer-BiLSTM实现负荷数据回归预测.rar
07-20
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
物联网工程_基于ZigBee技术的图书馆节约用电管理系统设计.docx
07-20
物联网工程_基于ZigBee技术的图书馆节约用电管理系统设计
算法与数据结构 分布式算法课程 第13章 实用互斥算法.具有读-修改-写操作的算法 共72页.pdf
07-20
【课程大纲】 第01章 简介 共68页.pdf 第02章 分布式算法简介 共59页.pdf 第03章 集群领导选举 分布式锁 共83页.pdf 第04章 通用同步网络的集群领导选举 共69页.pdf 第05章同步网络中的基础计算 共76页.pdf 第06章 分布式一致性 共48页.pdf 第07章 Byzantine协议 共34页.pdf 第08章 异步系统模型 共47页.pdf 第09章 基本异步网络算法 共71页.pdf 第10章 同步化器 共39页.pdf 第11章 异步共享内存系统 共49页.pdf 第12章 ASM - Peterson’s算法 共43页.pdf 第13章 实用互斥算法.具有读-修改-写操作的算法 共72页.pdf
Python-函数.doc
最新发布
07-20
Python
125N2RG-VB一种N-Channel沟道TO220封装MOS管
07-20
125N2RG-VB；Package：TO220；Configuration：Single-N-Channel；VDS：30V；VGS：20（±V）；Vth：1.7V；RDS(ON)=2.8mΩ@VGS=4.5V；RDS(ON)=2mΩ@VGS=10V；ID：140A；Technology：Trench；
毕业设计javajsp银行业务在线申请系统(jsp+mysql)-qkrp源码含文档工具包
07-20
毕业设计javajsp银行业务在线申请系统(jsp+mysql)-qkrp源码含文档工具包 页面是jsp，数据库mysql，jdk1.8，开发工具用ecplise、myecplise、sts、idea都可以 该系统主要包括管理员管理，理财产品管理，用户管理，贷款审批，账户管理，消费管理，交费管理，转账管理，理财产品，我的贷款等功能模块 包含：源码、数据库脚本、论文、环境工具包、相同框架项目的安装教程（在说明文档中）
github private链接访问_将github配置为图床+PicGo配置
05-16
以下是将 GitHub 配置为图床并配置 PicGo 的步骤： 1. 在 GitHub 上创建一个新的仓库，用于存储图片。请确保此仓库是私有的，因为我们将使用私有链接来访问图片。 2. 安装 PicGo。PicGo 是一款开源的图床工具，支持将图片上传到多个图床平台，包括 GitHub。您可以在 PicGo 的官方网站（https://picgo.github.io/PicGo-Doc/zh/guide/getting-started.html）查看安装和配置指南。 3. 在 PicGo 中配置 GitHub 作为图床。在 PicGo 的设置中，选择“上传”选项卡，然后选择“GitHub”作为图床平台。输入您的 GitHub 仓库的访问令牌和存储图片的文件夹名称。 4. 在 PicGo 中配置自定义域名。在“上传”选项卡中，选择“高级设置”并输入您的 GitHub Pages 网站的自定义域名。如果您没有设置自定义域名，则可以使用 GitHub 提供的默认域名。 5. 上传图片。在 PicGo 的主界面中，单击“上传”按钮，然后选择要上传的图片。上传完成后，PicGo 将返回一个私有链接，您可以使用它来访问上传的图片。 6. 在需要使用图片的地方，使用 PicGo 返回的私有链接来引用图片。根据您的使用情况，您可以选择使用 Markdown 等文本格式来引用图片。 希望这些步骤对您有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值