利用 GitHub + PicGo + Typora 搭建属于自己的图床
道阻且长，行则将至。埋头苦干，不鸣则已，一鸣惊人！加油，骚年！！！
1 前言&基本介绍
之前直接在网页上用 Markdown 写博客，可以直接复制粘贴。但是现在发现了 Typora 这么好一个 Markdown 编辑器后，就想在本地写博客了，然后上传到 GitHub 上备份。
但是在本地写博客，总不能不插入图片吧？但是插入图片，上传到GitHub时，图片不显示怎么办？这个问题困扰了我好几天，今天终于搞定了，一定要写篇博客记录一下！
1.1 整体方案
整体上使用的是：GitHub + Typora + PicGo 来实现。
1.2 参考网址
在实现我想要的功能的时候，参考了几个很有用的博客，但他们的文章跟我自己想要的方案并不完全一样，所以我自己就参考他们的文章，总结出自己的经验。
1、相当于启蒙的文章：一款markdown编辑器typora和图床的搭建过程
2、这个使用的是 Gitee：windows本地markdown环境配置：使用typora，并实现图片自动插入并上传图床
3、这个是第二篇文章中的链接，排坑用的：手把手教你用Typora自动上传到picgo图床【教程与排坑】
1.3 软件下载地址
-
Typora 官网：Typora
-
上不去官网的，可以直接使用国内的软件管家，然后在软件内升级到最新版本即可。例如我用的腾讯电脑管家 -> 软件管家：
-
PicGo 蓝奏云下载地址：PicGo-Setup-2.2.2.exe
-
PicGo 在 GitHub 上的地址：GitHub - PicGo
-
node.js 插件下载地址：node.js下载
-
没有 GitHub 账号的，自己需要先注册一个账号~
做好上边的准备工作，下边开始配置步骤~
2 GitHub
2.1 创建图片库
在自己的 GitHub 上创建一个库，当做图床，专门用来存储图片。具体操作流程与建仓库的流程一样。
由于 GitHub 不允许存在空的仓库，也不允许存在空的文件夹，因此可以勾选默认创建一个 ReadMe 文件
2.2 获取令牌
GitHub 的令牌，其实就是 token，自我感觉就像自己的 GitHub 对外的一个公钥一样，可以让拥有此 token 的软件访问 GitHub 的 API 接口。
生成过程，参考经验即可，大致步骤如下：
- 点击自己的 GitHub 头像
- Settings
- Developer settings
- Personal access tokens
- Generate new token
如下图，注意下边的选项全部勾选。（具体不清楚，大概是赋予使用此 token 的软件一些权限）
此时可以保存备用，也可以在下边用到的时候，再按照上述步骤生成 token 。注意 token 是私密的，需要做好安全保护！
3 本地配置步骤
3.1 安装配置PicGo
win10 电脑，直接安装下载下来的 EXE 文件即可，整个安装步骤一路 next 。
安装后的软件界面如下：
-
接下来配置 GitHub 作为图床，在左侧找到图床设置，找到GitHub图床。
-
前边有星号的为必填项，依次填入之前创建的仓库名，注意是：账户名/仓库名；
-
然后填入设定的分支名（创建仓库时如果没有创建其他分支，默认就是 master 分支）；
-
最后填入之前生成的 token 令牌，点击确定。
-
然后找到 PicGo 设置，打开里边的 时间戳重命名，这样可以避免图床在上传文件时，由于文件名相同造成的错误。
-
然后剩下的配置项可以不用管，参考的文章不建议设置为开机自启，因为等会配置好 typora 后，typora 在上传图片时会自动打开 PicGo 软件。
3.2 安装配置node.js
这个我具体不知道是什么东西，不过我对于不知道的东西，还是踩着前人的脚印前进吧，后续有时间在深入了解。
整个安装过程也很简单，一路 next ，全部使用默认配置即可。
3.3 测试PicGo
到这一步，可以打开软件，直接拖动到首页上传区，测试是否上传成功；或者直接利用截图，然后点击右下角的剪贴板图片上传，即可快速实现上传。
经过实际验证，有一些理解：
- 在上传时，如果进度条到一半出现红色，代表上传失败；
- 在上传时，如果进度条一直是蓝色，应该就是上传成功了；
- 在
PicGo设置此选项下，可以找到对应的日志文件，查看相关错误信息，进而辅助我们排查问题。
3.3 安装配置Typora
Typora 的安装教程，应该也可以一路 next。。。我自己当时直接用的软件安装管家，然后后续在软件内更新到最新版即可。
安装过后，可以进行一个简单的配置，点击文件，然后选择偏好设置。
3.3.1 通用
在此页面，勾选自动保存，对写文件有很大的帮助。
3.3.2 外观
我自己的设置如下：
3.3.3 编辑器
我自己的配置参考下图：
3.3.4 图像
这个是我们这次的重点，依次按照图示配置
在配置完成的时候，可以点击验证图片上传选项，进行测试，查看配置的 PicGo 插件是否有用。此时会出现如下界面，由于使用的是 GitHub ，因此很容易受到网速影响
此时上传成功后，是如下界面：
上述过程，很容易出现错误，具体可以参考文章开头借鉴的博客。文件名已存在这个错误，如果之前勾选打开时间戳选项，此处应该不会有这个错误。
本次测试，我刚开始使用的家里的 WiFi 进行上传测试，但是报错。于是我使用自己的手机热点测试上传，不久就看到 ok 啦，本篇博客的图片也是使用手机热点上传的，我也不清楚为啥 WiFi 会失败。
还有一个错误：Failed to fetch，这个错误参考文章经验，一般是由于端口设置错误造成的，此时需要打开 PicGo 设置，点击 设置 Server，此时监听的端口号需要与 Typora 中的端口号保持一致，一般默认就是 36677，只是需要去查看是否被篡改等等。
3.3.5 Markdown
特别注意：此选项下的所有配置，在修改后，都需要重启 Typora 才能生效。
我自己的配置如下，仅做参考
至此，Typora 软件所有的配置已经完成，有没有发现，在不知不觉间，已经实现了我们最开始的方案，使用 Typora 写作，然后利用 GitHub + PicGo 制作自己的图床，这样后续文章在移动的时候，就不怕图片丢失了！
4 排坑记录
在这里总结一下自己在使用过程中，遇到的一些坑，记录一下。
4.1 GitHub 成功上传图片，但是不能正常显示
此处好像是由于 hosts 文件解析的问题，我在使用过程中，参考的这个网址：解决github图片不显示问题，配置后，GitHub 即可正常显示图片，很赞，已收藏文章。
特别提醒：在修改 hosts 文件之前，一定要记得先备份！备份！备份！！！避免一些未知的原因，到时候想恢复回去都很难。
4.2 两个设备都要配置同样的环境，token 可以一样吗？
其实我自己在配置的时候，也是很蒙逼的，由于之前配置了一台电脑，生成了一个 token，然后第二台电脑想再次使用之前的 token 时，发现我找不到在哪了，由此推断：GitHub 给的 token ，应该是一台设备一个，然后我又重新生成了一个 token 给第二台电脑用。
5 总结
- 整个配置过程，还是比较坎坷的， 最开始是在家里笔记本上配置，但是家里的网访问 GitHub ，很慢，就导致老是超时，不过后来尝试使用手机热点后，还ok。
- 一步一个脚印，Go！Go！Go！