墨滴
溪

溪森堡

V1

2022/10/14阅读：44主题：山吹

用GitHub+PicGo 给你文章中的图片建个家

  • 纠结于为啥别人的博客/推文排版都非常养眼并且可以轻松同步到各个平台？
  • 还在挣扎于微信公众平台富文本排版和图片上传功能，为文章排版苦恼？
  • 每年为买图片服务器花费不少钱？
如果你有这些苦恼，今天就跟溪森堡学习如何用GitHub+Picgo+Typora搭建属于你自己的图床，探寻更加轻松的码文路径吧！

图床： 泛指存储图片的服务器，常用工具PicGo（后文介绍）

GitHub: dddd 项目托管平台，平时托管代码，是不是没有想到它也是一个免费的图片服务器？

Typora: Markdown编辑器,这里不介绍Markdown语法，不了解的童鞋自行查阅资料o

准备工作

下载安装Typora [https://www.typora.io/]

下载安装PicGo [https://github.com/Molunerfinn/PicGo/releases] PicGo用于上传图片到指定平台并获取资源url

GitHub配置

注册Github账号，并创建用于存放图片资源的仓库

image-20221013213252248
image-20221013213252248

【github访问慢可能需要科学上网，或者安装GitHub加速插件(https://github.com/fhefh2015/Fast-GitHub)】

image-20221013212748526
image-20221013212748526

获取私人令牌，生成Token之后需要及时复制并保存好，只会展示一次，丢失需重新生成

image-20221013213435844
image-20221013213435844

配置PicGo

运行PicGo看到这个图标之后, image-20221013214135344 右键打开详细窗口: image-20221013214127746 在这里设置图床为GitHub图床，填入仓库名、token等信息(这个token就是上面在GitHub生成的),配置好之后点确定即可 image-20221013213849117

配置Typora

点击Typora文件-偏好设置 image-20221013215407329 点图像，按照图中的进行设置 image-20221013215352438

至此，顺利的话，你已经完成了所有工作，并且在Typora粘贴一张图片，该图就会在你的GitHub仓库对应目录下

溪森堡遇到的问题：

GitHub仓库中的图片上传成功但是图裂

image-20221013215705717
image-20221013215705717

看下了，是访问超时了，资源无法正常加载(没有科学上网的情况)

image-20221013220107087
image-20221013220107087

找到图片资源对应域名，并查询对应域名Ip地址配置本机hosts (C:\Windows\System32\drivers\etc\hosts)

image-20221014000655350
image-20221014000655350

以管理员身份保存之后，图片加载正常。

在Typora中直接粘贴图片，能上传到GitHub，但是Typora中无法预览该图

image-20221013215927956 并且PicGo相册中图片不展示 image-20221013235929369 溪森堡首先去检查了Typora的配置，点击验证图片上传发现验证失败 image-20221014001429766 接着溪森堡去检查了PicGo的端口号，也与Typora的一致，都是36677 image-20221014001611246

没有头绪，还去看了PicGo的log，发现都是上传成功

image-20221014001949381
image-20221014001949381
image-20221014002025512
image-20221014002025512
image-20221014002154568
image-20221014002154568

去Github一看，果然资源都上传成功只是picGo相册和Typora中没有正常展示。

这时候溪森堡突然想起来第一个问题，并且域名raw.githubusercontent.com对应了4个ip地址，我只配了其中访问时间最短的一个，便又给加上了另外三个

image-20221014002407980
image-20221014002407980

这一通操作之后，PicGo相册图片终于正常展示了

image-20221014002459783
image-20221014002459783

但是，Typora中的图片依旧无法正常加载，不知道绕了多久多久，各种找资料

image-20221014002905087
image-20221014002905087

同一张图片，上传到GitHub，用GitHub链接可以正常访问，在Typora中却打不开

image-20221014003315195
image-20221014003315195

后者正常加载的时GitHub资源域名/用户名/仓库名/分支名/文件路径/文件名,而前者是我的域名/文件路径/文件名

还记得上面的这张图片吗？

image-20221013213849117
image-20221013213849117

问题就出在我的域名这里，这个我以为真的是可以自定义域名，不知道是要自定义你自己花钱买的域名而不是让你随便起个域名

将这个设定自定义域名删掉，Typora中图片终于正常展示了！！！

image-20221014003950235
image-20221014003950235

图片链接就是GitHub中对应资源链接，Typora验证图片上传成功，完美！

image-20221014004353879
image-20221014004353879
  1. 同名图片上传失败
image-20221013220015432
image-20221013220015432

解决方法： 在PicGo设置中开启时间戳重命名，这样每次上传之后图片都会有个唯一的名称。 image-20221014200538886

现在你就拥有一个免费的图床啦，白嫖的它不香嘛~

分类：

前端

标签：

工具介绍

作者介绍

溪
溪森堡
V1