本文介绍使用 GitHub
+ jsDelivr
(CDN) + PicGo
(图库上传) + TinyPng
(压缩)+Typora
结合来处理Markdown 图片上传存储。
✔️ 需求
在 Markdown 编辑器 Typora
中插入图片,图片经过压缩后上传到 GitHub 图床,通过 CDN 地址访问。
🛠️ 工具
新建 GitHub 仓库
打开https://github.com/ ,新建一个公共仓库,比如:https://github.com/varm/my-assets
生成 Token
点击 GitHub 个人头像,【Settings】->【Developer settings】->【Personal access tokens】,点击 【Generate new token】,复制生成的 token 备用。
配置 PicGo 图片上传
打开 PicGo ,点击【图床设置】->【GitHub 图床】
- 仓库名:用户名/图床仓库名(e.g.:varm/my-assets)
- 设定分支名:Master
- 设定 Token:第二步获取的 Token
- 指定存储路径:比如
avatar/
(将会在当前仓库下新建改目录,传入图片将存储在改目录) - 设定自定义域名:
https://gcore.jsdelivr.net/gh/用户名/图床仓库名
, 比如https://gcore.jsdelivr.net/gh/varm/my-assets
配置 PicGo 图片压缩(TinyPng)
申请 TinyPng API Key
使用 TinyPng 压缩图片前需要申请 API key,打开 https://tinypng.com/developers,输入姓名和邮箱后收取邮件,点击邮件中的注册地址就会跳转到 TyniPng 的 API 控制面板,在 Available API keys 中激活 API Key 即可。免费用户限制每月500张图,可以开通多个账号。
安装 compress 图片压缩插件
在 PicGo 【插件设置】中搜索:“compress”,点击安装。
🔈 需要搭配梯子,开启全局,参考:compress 无法安装
安装成功后点击【配置插件】,compress 中选择 tinypng
,填入 key, 点击【确定】,最后在插件菜单中点击【启用transformer-compress】即可。
Typora 中配置使用 PicGo 服务
- 点击【文件】->【偏好设置】->【图像】
- 插入图片时,选择“上传图片”,勾选“对本地位置的图片应用上述规则”。
- “上传服务”选择
PicGo(app)
,PicGo 路径中设置 PicGo 安装路径,比如:C:\Program Files\PicGo\PicGo.exe,可以点击【验证图片上传选项】进行图片上传测试。
访问CDN图片
将图片拖入到上传区,即可将图片上传到 GitHub,CDN 加速访问地址是:https://gcore.jsdelivr.net/gh/{user}/{repo}/图片路径
,比如:https://gcore.jsdelivr.net/gh/varm/my-assets/img/avatar.png