写在前面

Typora 是一款非常好用的markdown文本编辑器，所以一直使用它来做文档的记录。并且通过配置 坚果云 可以实现本地远程同步，在手机上也能实时查看操作，可以说非常完美了，但其中有一点比较头疼的问题就是在Typora上传的图片都是保留在PC端本地，无法在云端查看，因此这就诞生出了Typora+PicGo的配置方案。

image-20201021103353749

安装PicGo

首先我们从Typora官方下载安装好对应的客户端后，再去PicGo官网下载对应的版本，官方描述PicGo是一个用于快速上传图片并获取图片 URL 链接的工具，下面是PicGo客户端界面。

image-20201021101857115

PicGo 本体支持如下图床：

  • 七牛图床 v1.0
  • 腾讯云 COS v4\v5 版本 v1.1 & v1.5.0
  • 又拍云 v1.2.0
  • GitHub v1.5.0
  • SM.MS V2 v2.3.0-beta.0
  • 阿里云 OSS v1.6.0
  • Imgur v1.6.0

可以从上图看到我配置的是七牛图床，如果有条件的同学也可以配置对应的内容存储服务厂商图床，本文主要介绍的是使用Github图床，看如下界面，下文将详解相关设置参数。

image-20201021105244213

创建Github仓库

从上图GitHub设置我们可以看到，需要5个配置参数，前4个参数是来源Github的，那我们先去创建一个仓库吧。

image-20201021105514855

我这里创建好了一个files的仓库，用于存在静态资源文件，仓库创建好了我们还需要获取一个Github Token，这个Token可以理解为上传时的授权令牌，生成Token操作路径如下：

Settings -> Developer settings -> Personal access tokens -> Generate new token

image-20201021105804944image-20201021105833494image-20201021110108463

到了Generate new token 这一步，我们填写好对应的名字Note，勾选复选框repo，然后在最下面点击Generate token 就可以了。

image-20201021110432085

生成之后跳转的页面上会有一串字符，那就是token，将其复制保存好，因为它只出现一次，如果忘记了或者没有保存可以重新生成。

那么此时，我们已经得到了PicGo上GIthub设置的前4个参数，剩下1个参数是指定自定义域名，如果不指定域名就会使用Github的地址，当然这访问是没有问题，就是访问会比较慢。这里题外可以说聊下，如果自己有购买存储服务厂商，可以配置自定义域名然后进行域名绑定以及文件回源等操作进行个人域名访问Github内容。我们本文主要介绍使用 JsDelivr。

JsDelivr介绍使用

看 JsDelivr 官方介绍，A free CDN for Open Source fast, reliable, and automated。JsDelivr是一个开源免费的CDN平台，快速可靠自动化。

image-20201021112655415

截止目前，JsDeliver 服务每个月有840亿个请求，也是在中国大陆唯一有执照的公有CDN，而且实际使用中的访问速度也是极快的，在中国有很多节点了。

image-20201021113143445

JsDelivr现在已经支持npm、Github、WordPress资源库，我们来看使用JsDelivr 访问Github资源URL规则。

// load any GitHub release, commit, or branch
// note: we recommend using npm for projects that support it
// 规则
https://cdn.jsdelivr.net/gh/user/repo@version/file
// 示例
https://cdn.jsdelivr.net/gh/zhangfeibiao/files@master/images/avatar.png

其中：https://cdn.jsdelivr.net/gh 表示方式Github资源库，可以支持任何版本、分支。
/user 表示你的Github用户名，如示例中的 zhangfeibiao
/repo 表示你的Github仓库名，如示例中的files
@version 表示你的仓库版本或者分支，如示例中的master
/file 表示的就是你具体要访问的文件，如示例中/images/avatar.png

其中 @version 线上环境建议使用正式发布版本，如下 1.0.1

https://cdn.jsdelivr.net/gh/zhangfeibiao/files@1.0.1/images/avatar.png

配置PicGo

已经获取到PicGo上Github图床的设置参数后，我们来配置下吧。

image-20201021120334313

上面配置中，自定义域名为：

https://cdn.jsdelivr.net/gh/zhangfeibiao/files@master

配置好后确定，将其设置为默认图片。

配置Typora

PicGo配置好后，我们就差最后一步了，就是将Typora上传图片使用PicGo工具。我们切到Typora界面，打开偏好设置，选择图像，将上传服务选择为PicGo.app，此时我们就算整体配置完成了。

image-20201021120704131

现在在 Typore 上来上传图片验证一下吧，

image-20201021000332039

成功得到图片链接：

https://cdn.jsdelivr.net/gh/zhangfeibiao/files@master/images/image-20201021000332039.png