title: PicGo+GitHub图床，让Markdown飞
date: 2020-05-21 19:19:47
tags:
- 软件

PicGo+GitHub图床

一次偶然的机会让我接触到Markdown语法，随后便疯狂地爱上了这种**“轻量级标记语言”。笔记、文章、技术评审文档、业务逻辑文档等等，我都想要使用Markdown去记录。几次寻觅，我找到了两款能够大部分符合我的需求的Markdown编辑器：Typora和马克飞象**。

目前我是两款编辑器混合时候，当编写的Markdown文档需要和印象笔记对接的时候，则使用马克飞象；至于其他用途的文档就使用Typora。则两款编辑器都近乎完美但是却又不能达到完美。我写文档的时候经常需要截图，然后从剪贴板从直接黏贴放进文档，则两款编辑器虽然都能满足这种操作，但是其实现原理不过是将截图存放在本机电脑上，所以，一旦文档中有了截图，将Markdown文档的迁移到别的电脑上展示的成本就大大增加（图片也要一并复制过去）。

这两款编辑器对图片处理的方法简直是丧尽天良，也是我在使用过程中唯一觉得不爽的一点。辛苦搜寻之下，终于让我找到了一种解决方案：PicGo+GitHub图床

注：实际上，Mac OS 上的Typora编辑器已经支持将本地图片或者截图先上传到服务器生成访问链接后，在存放到Markdown文档中，简单点说，Mac OS上的Typora是完美的（😭无奈我是Windows用户）

PicGo介绍

这是一款图片上传的工具，目前支持

微博图床

，

七牛图床

，

腾讯云

，

又拍云

，

GitHub

等图床，未来将支持更多图床。

所以解决问题的思路就是，将本地的文件，或者剪切板上面的截图发送图床，然后生成在线图片的链接，这样就可以让Markdown文档飞起来了，走到哪就可以用到哪😊。

Pic Go支持的图床

在众多的图床中，我选择的GitHub图床，其它类型的图床如果你们有兴趣的话可以试一下。

创建自己的GitHub图床

1. 创建GitHub图床之前，需要注册/登陆GitHub账号

申请GitHub账号很简单，我就不演示了

2. 创建Repository

点击"New repository"按钮

• 我已经建立过一个同名的repository的，所以第一步会显示红色
• 第三步，为repository初始化一个README.md文件可以根据需求选择，非必选

3.生成一个Token用于操作GitHub repository

回到主页，点击"Settings"按钮

进入页面后，点击"Developer settings"按钮

点击"Personal access tokens"按钮

创建新的Token

填写描述，选择"repo",然后点击"Generate token"按钮

注：创建成功后，会生成一串token，这串token之后不会再显示，所以第一次看到的时候，就要好好保存

配置PicGo

1. 下载运行PicGo

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x5nyTcR2-1591441023277)(https://cdn.jsdelivr.net/gh/zhangliyuangit/img/20200523184734.png)]

推荐下载exe可执行文件

2. 配置图床

如图配置

• 设定仓库名的时候，是按照“账户名/仓库名的格式填写”
• 分支名统一填写“master”
• 将之前的Token黏贴在这里
• 存储的路径可以按照我这样子写，就会在repository下创建一个“img”文件夹
• 自定义域名的作用是，在上传图片后成功后，PicGo会将“自定义域名+上传的图片名”生成的访问链接，放到剪切板上

  https://raw.githubusercontent.com/用户名/RepositoryName/分支名，

  ，自定义域名需要按照这样去填写

总结

将上面的步骤都设置好之后，就可以让自己的Markdown文档飞起来了，每次截图之后，都可以按一下

ctrl+shift+c

，这样就会将剪切板上面的截图转化为在线网络图片链接，简直就是爽的不要不要的！！
。

自己在本地用确实没有什么问题，但是提交到博客上发现图片加载失败，或者加载异常慢，于是我发现了一种加速的方法

CDN 简介

内容分发网络（英语：Content Delivery Network或Content Distribution Network，缩写：CDN）是指一种透过互联网互相连接的电脑网络系统，利用最靠近每位用户的服务器，更快、更可靠地将音乐、图片、影片、应用程序及其他文件发送给用户，来提供高性能、可扩展性及低成本的网络内容传递给用户。
—— Wikipedia

简而言之就是让服务器距离大陆较远的 GitHub ，将托管在那里的静态资源缓存到一个近一点的服务器，从而加快访问。

看了这样的解释你应该能够理解，CDN 虽然能缓解互联压力，可也是要耗费一定的资源的，从而市面上的 CDN 大多是收费的。Cloudflare 虽然有免费 CDN ，可是国内节点致开放给专业版用户使用，价格偏高，而海外的节点又类似负优化，可能还会降低速度。

jsDelivr

jsDelivr是一款公共免费 CDN ，调用多家 CDN 保证全球服务质量、拥有多层缓存和灾后保障 SLA 100 。也是为数不多的有 ICP 备案，提供许多中国节点的海外 CDN 服务商。

有搜索引擎，支持一键复制文件 URL 和标签，支持分发 NPM、GitHub、WordPress SVN 的文件

基础使用

可能看起来，官方的使用方法十分复杂，但其实就一句话：把仓库链接的域名替换成 jsDelivr 的域名。

如托管在 GitHub 的仓库链接都是

https://github.com/username/repo/branch/file

的形式，而我们就可以将前面的

github.com

改成 jsDelivr 提供加速 GitHub 仓库的域名

cdn.jsdelivr.net/gh

。

嗯，兴冲冲配置一发，发现什么都没有？其实还是有一点点小差别的。比如分支那里，jsDelivr 默认要直接在仓库名后面

@

，所以真正其实是

https://cdn.jsdelivr.net/gh/username/repo@branch/file

的形式。当然，如果你放在仓库的默认分支，还可以直接将

branch

这个关键字直接删了，变成

https://cdn.jsdelivr.net/gh/username/repo/file

一样能获取到！

另外，如果是一些比较稳定的文件，后面不会频繁地改动，还可以发布成一个版本，然后在

repo

后

@version

就可以引用对应的版本。

加速图床

如果你还记得笔者之前写的 PicGo + GitHub 搭建免费图床 的话，不难发现 jsDelivr 也是能加速这个图床（本质不还是一个 GitHub 仓库嘛）的。我们只需要在 GitHub 图床设置 中将链接设置为

https://cdn.jsdelivr.net/gh/username/repo

即可！前提是你上传到默认分支。