
问题场景
我们经常写文章的时候,会插入很多图片素材,这些图片素材的管理就显得非常重要~
同时在本地使用文章的图片会产生一系列让人懊恼的问题~
相信长期写文档的你一定也和我一样遇见过以下这些问题~
1.本地图片太麻烦
文章和图片放一起,移动、改名、拷贝,一不小心图片就找不到,文章直接裂图。
2.复制文章到别的平台就失效
发到各个平台,本地图片带不过去,要一张张重新上传,超级浪费时间!
3.在线笔记容量受限
语雀、印象笔记、飞书这些,免费版都有每月流量限制,传多了就不让传,还要删东西~
当然,也许你也想过要像语雀文档一样粘贴即上传, 也就是说截图一粘就自动上传到某个地方,自动变链接,文章干干净净,只需要拷贝文字,发布到哪个平台都能看, 这是我们想要的结果~
所以就诞生出了一个Typora+PicGo+Github的方案来解决以上这些问题~
Typora+PicGo+Github文档在线图床部署方案
让我们写文章粘贴图片自动传云端,markdown文档中全是在线图片链接~
这种方式的好处在于,免费无限空间、国内速度一般、图片必须公开,所有人能看!
最适合发博客、公开文章,不怕别人看图片!
如图

本质上就是Typora粘贴图片→PicGo上传到 GitHub→GitHub生成在线地址→PicGo返回给Typora,这样来实现了粘贴即自动生成可跨平台访问的图片链接 这就是我们的解决方案!
那么接下来就跟着我的操作一起来实现~
前期准备
- 安装好Typora
- 下载PicGo
- 注册GitHub账号
GitHub创建公开仓库
首先,在GitHub中新建一个公开仓库, 找到点右上角(+)号
然后选择: New repository(新建仓库)
如图

在Repository name(仓库名称):你可以随便填,如 PicGo
在Choose visibility(可见性) : 这里要设置为Public
最后点击Create repository
如图

创建完成~
如下

token令牌生成
然后继续, 我们此时需要在 GitHub 上生成一个token
一会用来在PicGo中根据这个token信息上传图像到我们的仓库~
首先点击右上角头像 选择Settings
如图

然后往下拉,找到并选择: Developer settings
如图

继续点击: Personal access tokens(个人访问令牌) 然后选择:Tokens(classic)
最后点击Generate new token
如图

Generate new token (classic):经典通用版,操作简单、权限全、适合新手和 PicGo 这种老工具,直接勾 repo 权限就能用。
如图

而Fine-grained, repo-scoped:精细化权限版,权限更细、更安全,但设置复杂PicGo目前不支持这种 token别选它!
然后继续进入到创建token页面
Note填写刚刚创建的仓库。
Expiration选择 No expiration
Select scopes只用选择repo同时它会把包含其中的都会勾选上
如图

最后点击最下方绿色按钮生成令牌
如图

然后就会生成一个token,把这个记下来~
如图

注意:这个token只会显示一次~(要牢记) , 到此GitHub的配置到这里就完成了~
PicGo部署
PicGo就是一个专门帮你自动传图片的 中间工具 ,
也就是说我们只负责粘贴,它默默把图片传到 GitHub/Gitee/其他并生成链接,不用我们手动上传!
流程就是你在 Typora 粘贴图片 → 图片先到 PicGo, 然后PicGo 自动上传到GitHub/Gitee
再把在线图片链接放回Typora, 我们全程不用打开网页、不用点上传、不用复制链接岂不乐哉~
下载安装PicGo
下载地址
https://github.com/Molunerfinn/PicGo/releases/tag/v2.5.3
根据你的电脑系统,直接选下面对应的版本下载
Windows系统直接下 PicGo-2.5.3-x64.exe就可以了
如图

正常执行安装即可
如图

正常启动~

配置PicGo
选择左侧Picbeds settings(图床设置)里面的Github 里面的加号
如图

如图

填写相应的配置如下
Configuration Name:随便写,比如 GitHub图床
Set Repo Name:填 你的GitHub用户名/仓库名(例:zhangsan/img-bed)
这里也就是回到我们自己刚刚创建的GitHub仓库
找到网址github.com/用户名/仓库名 复制后面的用户名/仓库名
如图

Set Branch:填 main
Set Token:粘贴我们刚刚生成的Token
Set Path:填 img/
Set Custom URL:填 https://cdn.jsdelivr.net/gh/你的GitHub用户名/仓库名@main
如图

jsDelivr 加速 GitHub 图片
简单的说jsDelivr就是一个免费全球加速节点,
让我们的GitHub上的图片在国内打开更快、不卡顿、不裂图,只需要在 PicGo 里填一行自定义域名就行!
解决什么问题?
GitHub 图片国内慢、有时打不开 , jsDelivr 就是给 GitHub 图片开高速通道
设置
只改PicGo一个地方,也就是Set Custom URL(自定义域名), 在这里启用jsDelivr 加速
填入固定格式:
https://cdn.jsdelivr.net/gh/你的GitHub用户名/你的仓库名
或者
https://cdn.jsdelivr.net/gh/你的GitHub用户名/你的仓库名@main
加@main是指定读取main分支,确保图片稳定读取、不报错、不失效。
例如
用户名:zhangsan
仓库名:img-bed
那么填写如下
https://cdn.jsdelivr.net/gh/zhangsan/img-bed
注意
1. GitHub 仓库必须是公开的
2. jsDelivr 只加速 GitHub,不支持 Gitee
设置以后所有新图片自动加速, 上传图片自动走加速链接!
不用额外注册、不用花钱、完全免费
最后点Confirm 就搞定!
如图

然后显示如下形式
如图

PicGo设置中文
直接在PicGo Settings中设置简体中文即可
如图

PicGo 上传测试
配置完成之后, 我们就可以来测试一下效果, 随便一个截图到剪贴板
注意:在测试上传的时候,要把一些加速工具关闭了,例如Steam++加速工具必须关闭,否则会冲突
然后在主界面点击剪贴板图片, 你就能看到会自动上传剪贴板中的图片了!
如图

当上传成功之后,我们就可以在自己创建的Github仓库中,看到上传的图片了!
如图

这些图片你都可以使用github命令来进行控制

typora 配置
打开typora, 进入到文件 → 偏好设置 → 图像
插入图片时: 选择上传图片
上传服务设定:
上传服务:PicGo (app)
选择 PicGo.exe 安装路径
其他根据需求进行勾选~
如图

然后点 验证图片上传,成功就完事~
如图

现在我们在typora中直接粘贴一张图片来看看效果如何~
如下

注意
在打开typora写文档的时候,PicGo也要一直打开, typora才能自动上传图片, 关了就传不起!
另外如果上传失败的图片,可能会直接保存到typroa本地的指定目录, 通常都是在C盘~自行查看即可!
全路径如下
C:\用户\主机名\AppData\Roaming\Typora\typora-user-images
例如
C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images
最后
此时此刻~我们在写文章的时候,直接粘贴到文档中的图片就会自动上传GitHub,并且链接公开,无限空间!
国内速度一般,适合公开的写作内容~