全真教程：给你的图片安个家—基于 PicGO、gitee 快速配置 Typora 免费图床
全真教程：给你的图片安个家 —— 基于 PicGO、gitee 快速配置 Typora 免费图床
标签：Markdown，Typora，图床
背景知识
图床是什么？
网页图片存放于哪里？这是个好问题。在网页，无论是头条新闻还是个人博客，图片司空见惯。那么网页、特别是个人博客上的图片，储存于哪里呢？都是在网站服务提供商的服务器上吗？这里只能说，不尽然，有的是，有的不是，但必须是有网址、互联网能访问到的地方，肯定不是个人笔记本电脑的硬盘。
我人生第一篇博客的 第一张图片 就存放在了 CSDN 的服务器上，访问地址是 https://img-blog.csdn.net/20180921111615848? 。
这篇博文的所有图片则存放在码云（gitee）个人图片仓库 gsf9588pic，本博文 顶上那张图片 的访问地址是 https://gitee.com/gsf9588/gsf9588pic/raw/master/img/coder.jpeg 。
能储存 Jpeg、GIF 等各种格式图片文件、为图片文件提供外链地址和访问服务的存储空间，我们即称之为图床。这篇博文，我就是把 gitee 上的个人代码仓库作为图床，用于储存博文所加入的图片。图床有多种形式，常见的有使用 SM.MS 等专门的图床网站，也有用微博、gitee 的个人空间作为图床，或者租用阿里云空间作为图床等，更有甚者自建服务器或租用云服务器。
Typora 为什么要图床？
Markdown 能让写作者专注于内容，而 Typora 是我所见到的最优雅的 Markdown 离线编辑器。
如果不使用图床，在 Typora 编辑器可以输入图片，但输入图片地址是图片的本地路径，例如输入本博文顶上的图片的 Markdown 代码如下。
这样的链接地址，浏览器无法访问，图片无法显示，效果如下。
CSDN 等一些博客网站是把博文中的图片根据代码中的访问地址直接上传到自己的服务器，而上面代码中的地址 CSDN 是无法访问的，所以显示图片转存失败，效果如下。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EZszauuk-1616033548823)(D:\下载\FirefoxDownload\coder.jpeg)]
而使用图床后，在 Typora 编辑器中输入图片，Typora 即自动把图片上传到指定图床，并把图片打开地址设定为图片的外链地址。
为了能用 Typora 离线写作博文并发表到多个博客网站，让自己的图片有个固定的家，就需要为 Typora 设置图床。
为什么是 PicGO 和 gitee?
PicGO 是 Typora 可设定的唯一图形界面上传服务工具，其他都是命令行工具，如下图所示。所以 Typora 中的上传服务工具就只能用 PicGO 了，现在还有谁在用命令行工具呢？
图床有很多。如果用自己的服务器是最佳的，但成本很高；租用阿里云、七牛云等大牌云服务商提供的云空间储存图片也很稳定、快速，但如果忘记续租了，外链就失效了，图片就会成图裂；专门的图床服务很多，被推荐的就有 SM.MS 、聚合图床、小贱贱图床 等，但这些图床不是服务器在国外就是太小众，有种种的不如意，用它们储存图片，说不准哪天博文上的图片就像下面的样子了。
图床，服务器在国内的、大牌的、免费的、加载速度快的，我全都要。这样的图床有吗？还真有，国内替代 github 的代码托管网站 gitee 的个人代码仓库就能成为你图片很好的家。据说微博图床也很稳定，但设置难度高，更何况 PicGO 还没有微博图床的插件。图床，我就要码云了。
gitee 图片仓库配置
登录 gitee 个人账号
进入 gitee 主页并用个人账号登录，进入 gitee 工作台页面，如果还没有 gitee 账号则申请一个。
创建 gitee 图片仓库
把鼠标移动到 gitee 工作台页面右上角的图标 
位置、弹出菜单，点击菜单上的“新建仓库”项，即进入新建仓库页面开始创建图片仓库。
在新建仓库页面，1、填写仓库名称，2、填写路径，3、“是否开源”选“公开”，4、选中“使用Readme文件初始化这个仓库”，5、点击“创建” ，gitee 图片仓库创建完毕。
获取 gitee 私人令牌
在工作台页面点击头像右边的 
图标进入设置页面进行设置，点击“私人令牌”项进入私人令牌设置页，点击图标 
即进入生成新令牌页面。
在生成私人令牌页面，填写好私人令牌描述后提交，生成了新的私人令牌，即下面图片上那串长长的由数字和小写字母构成的字符串。如果已经有私人令牌，则用既有的即可。
把生成的私人令牌复制后存放于记事本或者截图后保存备用。因为往后，私人令牌的明文在平台上是看不到的，所以私人令牌丢了很麻烦、不知能不能再找回，至少我还不能。
上传服务工具 PicGO 配置
下载安装 Node.js
需要提前安装 Node.js 才能安装 PicGO 的 gitee 图床插件。选择最新版本下载 Node.js 并安装，安装时全部选默认选项。
下载安装 PicGO
选择适合自己平台的版本下载 PicGO 并安装，示例安装的是 PicGo-Setup-2.3.0-beta.4.exe 版本，安装时同样全部选默认选项。
安装 gitee 图床插件
打开 PicGO 后进入“插件设置” 选项卡，在搜索栏输入 gitee ，会找到多个gitee 插件，示例选择 gitee 2.0.3 点击“安装”，选择 gitee-uploader 1.1.2 也是可以的，后面的“图床设置”略有差异。安装完毕在“PicGO设置”中能显示的图床就增加了“Gitee图床”。
设置 PicGO
进入“PicGO设置”选项卡，在“选择显示的图床”项复选框选中“Gitee图床”，其他图床按默认，这时在“图床设置”项下就出现了“Gitee图床”。
如果要把 Markdown 文档发表在博客网站 CSDN，在“时间戳重命名”项设置为“开”。“时间戳重命名”项设置为“开”，无论图片文件原有的文件名怎么样、是不是有括号，都按上传时间重新命名，同一张图片多次上传，在图床就有多张不同名称的相同图片；“时间戳重命名”项设置为“关”，图片文件上传到图床后名称不变，多次上传在图床只有一张跟原文件名一致的图片。
设置 gitee 图床
进入“图床设置”选项卡，1、选中“Gitee图床”，2、输入 gitee 用户名，3、输入图片仓库名，4、路径默认、也可以按自己的想法输入，5、逐个输入先前获得的 gitee 私人令牌的字符、不能复制黏贴，6、设为默认图床并确定。
这样上传服务工具 PicGo 和 gitee 图床都设置完毕，已经可以把图片上传到图床了。在上传区试一下吧。
配置 Typora 图片上传服务
打开“偏好设置”页面
在 Typora 的“文件”菜单栏，点击“偏好设置”项，即打开了“偏好设置”页。
设定图片上传服务
在“偏好设置”页，1、选择“图像”选项，2、选“上传图片”，3、选中“对本地位置的图片应用上述规则”，4、选择“PicGo(app)”作为上传服务工具，5、选择 PicGO 安装路径，6、设置已经完成、验证图片上传效果。
Typora 图床应用
上传服务工具 PicGO、gitee 图床设置完毕， Typora 的上传服务配置完毕，就可以在Typora 的 Markdown 文档中插入图片、图片能自动上传到 gitee 图床并在文档中输入该图片在 gitee 中的外链地址作为图片打开地址。
最简单的应用方式是把图片直接拖放到文档想要的地方。也可以在右键菜单中打开“插入”项，插入图片。
后续事项
gitee 对图片文件大小的约定
由于 gitee 的原因，访问仓库中大于 1M 的文件需要登录，如下图。
为了避免网页无法加载上传到图床的图片文件，在 Typora 编辑的 Markdown 文档中不要加入大于1M 的图片。
视频转 GIF 的应用问题
Typora 的 Markdown 文档无法加入视频。为了直观说明问题，一些聪明的作者把视频转换成 GIF 图片加入文档。但这样的 GIF 图片文件大小往往超出 1M，上传到 gitee 图床后网页无法访问这个图片、无法正确显示，所以这样的 GIF 图片文件需要检查大小，如果超出规定，请重新转换。
CSDN 转存图片文件名问题
CSDN 博文无法转存像这个地址的图片 https://gitee.com/gsf9588/gsf9588pic/raw/master/img/20210317141844(1).jpg
一样文件名中带括号 () 的图片。这就要求我们，PicGO 的“时间戳重命名”项尽量设置为“开”，要不然在 Typora 上编辑的文档就不能加入文件名带括号 () 的图片、否则文档发布到 CSDN 上图片就不能正确显示。
segmentfault 外链图片文件名问题
博客网站 segmentfault（思否）的 Markdown 语法不允许外链地址带括号。这就同样要求我们，PicGO 的“时间戳重命名”项尽量设置为“开”，要不然在 Typora 上编辑的文档就不能加入文件名带括号 () 的图片、否则文档发布到 segmentfault 上图片也不能正确显示。
至此，我们已经基于 PicGO、gitee 为 Typora 配置了免费图床，给图片安了个家。让我们沉浸在 Typora 这个优雅的 Markdown 编辑器中，充分展示我们的学识、分享我们的快乐吧。
Enjoy yourself !
