前言

  • 之前使用了很多在线博客的编辑器都觉得很坑不顺手，我还是比较喜欢用 Typora 来写一些东西

  • Tpyora是一款优雅的 MarkDown 编辑器，也推荐给大家，至于安装和配置，也十分的简单，就和安装普通的应用程序一样。

  • 在编写文档和记笔记的时候，都需要插入很多图片，通常情况下这些图片（截图）都是保存在本地的，当你分享文档或者你在本地编写的文档放到在线博客的时候就会出现图片丢失的问题，不然就得一张一张全部复制，体验极差，所以我想找一个图床来托管我的图片。

    图床：

    图床简单来说就是一个便于在博文中插入在线图片连接的个人图片仓库。设置图床之后，在自己博客中插入的图片链接就可以随时随地在线预览了，并且不会因为任何意外原因无法查看，除非自己亲自删除。

    图床工具：

    所谓图床工具，就是自动把本地图片转换成链接的一款工具，网络上有很多图床工具，就目前使用种类而言，PicGo 算得上一款比较优秀的图床工具。它是一款用 Electron-vue 开发的软件，可以支持微博，七牛云，腾讯云 COS，又拍云，GitHub，阿里云 OSS，SM.MS，imgur 等 8 种常用图床，功能强大，简单易用。这里我们使用 PicGo。

  • 我看大多数推荐的七牛云，腾讯云，微博等等，一方面需要各种注册收费，另一方面十分不稳定，既然是程序员，大家都会有自己的 GitHub 仓库，不如专门开一个仓库做自己的图床好了，既方便又简单。

准备工作

环境：

​ 当然我还是在 windows 环境下来进行安装。如果你要使用 PicGo 的插件，还需要电脑安装 node 环境，因为 PicGo 的插件是用 npm 包管理工具进行安装的。

下载软件并安装

  • Typora：你可以点击 这里 进行下载。

  • PIcGo：你可以点击 这里 进行下载。

    • 注：mac 系统选择 dmg 下载，windwos 系统选择 .exe 下载

下载和安装过程都十分的简单，这里我们就不再赘述。安装好后，我们就正式开始！

GitHub 配置

  • 如果你嫌弃 GitHub 访问速度太慢的话，也可以用同样的方法布置到 Gitee 码云，不过我个人使用 GitHub 更多一点，所以我直接部署到了 GitHub。

新建仓库

我们可以新建一个仓库或者使用已经有的库也可以。那么我新建一个库叫做 picgo。

创建 Token

创建好后，需要在 GitHub 上生成一个 token 以便 PicGo 来操作我们的仓库，来到个人中心，选择 Developer settings 就能看到 Personal access tokens_，我们在这里创建需要的 _token

点击 Generate new token 创建一个新 token，选择 repo，同时它会把包含其中的都会勾选上，我们勾选这些就可以了。然后拉到最下方点击绿色按钮，Generate token 即可。之后就会生成一个 token ，记得复制保存到其他地方，这个 token 只显示一次！

配置 PicGo

配置默认图床

  • 仓库名格式为 用户名/仓库名
  • 分支名：master
  • token：刚刚在 GitHub 创建的 token

然后点击确定，设为默认图床。

检查配置信息

  • 先看一下 Typora 的端口号

  • 打开 PicGo 设置，选择设置 Server，打开开关，并设置监听地址和端口与上面保持一致

  • 打开配置文件，找到 server，保持一致。

建议和一些其他事项

建议打开设置里的按照时间戳重命名，防止图片名字重复可能导致的一些失败。顺便提供一些常见错误的解决办法。

错误：Failed to fetch

这个错误一般是由端口设置错误造成的，打开 picgo 的 log 文件

解决办法：打开 picgo 设置，点击设置代理选项，将端口改为 36677 端口，这是 picgo 推荐的默认端口号，然后保存，成功。

不过有的时候，设置好了后还是会报错 Failed to fetch，打开端口设置一看，端口变成了 366771，这是因为如果你打开了多个 picgo 程序，就会端口冲突，picgo 自动帮你把 36677 端口改为 366771 端口，导致错误。log 文件里也写得很清楚。

解决办法：先把 picgo 中的端口设置改回 36677，然后退出所有 picgo 程序，再使用 typora 上传功能（会自动启动 picgo 程序）

错误：{“success”,false}

这个错误是最常遇到的，第一个原因是文件名冲突了，如果你上传过一张 image1.jpg 的图片，再上传名称一样的图片就会失败。

解决办法：打开 picgo 设置，将上传前重命名和时间戳重命名都打开。如图所示：

再次上传文件，出现一个确认文件名称的对话框（暂时没有找到默认确定的选项），点击确定，上传成功。

第二个原因，可能就是网络问题，显示服务端错误，这种情况下，可以更换默认图床，或者稍后再试。

解决办法：更换默认图床或者多试几次，我经常遇到这种情况，在 github 上传失败的时候，我就把默认图床更改为 Gitee 上传到码云。

一些使用方法

上传

把需要的图片拉进去，这里有三种上传图片的方式：

  • menubar 图标拖拽上传（仅支持 macOS）
  • 主窗口拖拽或者选择图片上传
  • 剪贴板图片（最常见的是截图）上传（支持自定义快捷键）

上传完成之后，我们到相册就会看到上传成功后的照片了，另外在自己的仓库里，也能够看到上传的图片

与此同时，除了单张上传外，其实还支持多张，批量上传，只需要选中多个文件，将其导入，或者拖入其中便可以了，这样再多的文件，也能够做到一次上传就能用的效果。

其他功能

  • 上传照片前，我们想重新命名这个图片名称，或者是在上传之后我们需要给图片重新命名，打开上传前重命名即可。

  • 查看当前上传的图床

如果你设置了除 GitHub 以外的图床，而不清楚当前上传到了哪个图床时，没关系，在上传区能够看到这个图床是哪一个。

在 Gitee 上部署图床

与在 GitHub 部署操作类似，同样是新建仓库，获取 token 的步骤，然后配置 picgo，不过我们需要安装一个插件 gitee-uploader 1.1.2。

插件配置方法也与 GitHub 配置类似。GitHub 不好用的时候（报错服务端出错上传失败），可以试着切换默认图床到 Gitee。

结语

到此，使用 Picgo GitHub（Gitee）配置一个 markdown 图床就完成了。以后再也不用担心 markdown 文档的图片问题了！