抱歉,您的浏览器无法访问本站
本页面需要浏览器支持(启用)JavaScript
了解详情 >

本文介绍使用 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 服务

  1. 点击【文件】->【偏好设置】->【图像】
  2. 插入图片时,选择“上传图片”,勾选“对本地位置的图片应用上述规则”。
  3. “上传服务”选择 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

评论