文章详情

Picgo+Github搭建图床

作者：

mission521 浏览：220 2021年11月4日 21:57

Markdown是一种纯文本格式的标记语言。通过Markdown语法写文档格式比较清晰，而且是纯文本格式，很适合做版本控制。

使用Markdown一直有个比较大的问题，就是图片插入和显示问题，如果图片使用相对路径只能在本地显示，要发布到博客等网络上，图片必须是外网可以访问的路径，因此需要把图片提前上传到图床上，然后使用图床中的图片地址。

Typora推荐PicGo能很好的解决这个问题，使用PicGo把图片上传到图床上，然后在Markdown文件引用即可。

## 下载Picgo工具

[Github下载](https://github.com/Molunerfinn/PicGo/releases)

[PicGo官网](https://molunerfinn.com/PicGo/)

或在Typora的偏好设置-图像，找到对应的下载按钮（进入官网）

![image-20210512194348240](https://cdn.jsdelivr.net/gh/Mission521/pic/img/picgo_button.png "偏好设置_下载按钮")

PicGo有很多插件，除了Typora直接PicGo之外外，还有其他第三方插件（Awesome-PicGo），如支持vscode的vs-picgo等

[Awesome-PicGo](https://github.com/PicGo/Awesome-PicGo)

[vs-picgo](https://github.com/PicGo/vs-picgo)

上传图片界面：

![image-20210512194606776](https://cdn.jsdelivr.net/gh/Mission521/pic/img/up_jeimian.png "上传界面")

## 创建github图床

### 添加Github公共仓库

为仓库起个名字，并设置为public(注意作为图床的仓库必须为Public，否则访问会有问题)，完成后点击`Create repository`

![image-20210512194902121](https://cdn.jsdelivr.net/gh/Mission521/pic/img/github_public.png "创建公共仓库")

图中红框选项可不选

## 创建访问图床的Token

1. 进入`setting`

![image-20210512195412326](https://cdn.jsdelivr.net/gh/Mission521/pic/img/setting.png "进入设置")

2. 进入`Developer settings`

![image-20210512195525631](https://cdn.jsdelivr.net/gh/Mission521/pic/img/Developer.png "Developer settings")

3. 选择`Personal access tokens`

![image-20210512195731318](https://cdn.jsdelivr.net/gh/Mission521/pic/img/Personal%20access%20tokens.png "Personal access tokens")

4. 点击`Generate new token`

![image-20210512195836214](https://cdn.jsdelivr.net/gh/Mission521/pic/img/creat%20token.png "Generate new token")

5. 输入一个名字，并且勾选`repo`

![image-20210512200034220](https://cdn.jsdelivr.net/gh/Mission521/pic/img/token.png "起名并勾选repo")

6. 滑至底部点击`Generate token`

![image-20210512200136832](https://cdn.jsdelivr.net/gh/Mission521/pic/img/creat_button.png "创建")

7. 首次创建完成后会自动显示且只显示一次，可点击最后的文本按钮复制

![image-20210512200403187](https://cdn.jsdelivr.net/gh/Mission521/pic/img/show.png "显示可复制")

## 配置Picgo的Github图床

PicGo中需要配置Github的图床信息，需要用到上面创建的token，这个token是上传图片必须的

![image-20210327131318036](https://cdn.jsdelivr.net/gh/Mission521/pic/img/pic_info.png "图床设置展示")

上图为本人使用的图床的配置

1. 按照刚刚创建的仓库填写名称，分支名(默认为`main`，直接填`main`即可),token；

存储路径为存放图片的文件夹，仓库中没有会自动创建

![image-20210512200814518](https://cdn.jsdelivr.net/gh/Mission521/pic/img/pic_set.png "设置图床")

自定义域名比较重要，默认情况下github使用[https://raw.githubusercontent.com](https://links.jianshu.com/go?to=https%3A%2F%2Fraw.githubusercontent.com)作为域名，但是github的这个路径不是很稳定，而且很容易被墙，最近似乎已经完全被墙了。

这里需要使用另外的cdn路径，我目前使用的是jsdelivr，它支持作为很多开源仓库的cdn，github的cdn地址是：[https://cdn.jsdelivr.net/gh/](https://links.jianshu.com/go?to=https%3A%2F%2Fcdn.jsdelivr.net%2Fgh%2F)，后面跟上用户名和仓库名。

2. 最后在进入PicGo设置：

建议开启上传前重命名，时间戳重命名，上传后自动复制url；

开机自启按个人习惯可选（本人较懒，不想每次要上传的时候再去启动程序）

![image-20210512201349023](https://cdn.jsdelivr.net/gh/Mission521/pic/img/other_set.png "其他设置")

## 配置Typora

在【偏好设置】中图像标签配置：

PicGo路径为您安装的路径（选择exe可执行文件）

![image-20210512201148920](https://cdn.jsdelivr.net/gh/Mission521/pic/img/set_ty.png "配置Typora")

配置完成之后，插入图片时选择本地路径的图片时可以自动上传并把url替换上去

Picgo+Github搭建图床

请登录后回复

共有0条评论