---
title: PicGo-GitHub配置图床(Typora&VSCode)
date: 2024-01-13
excerpt: PicGo 是一款开源的图片上传工具，支持多种图床，如 GitHub、腾讯云 COS、阿里云 OSS 等。本文介绍了如何使用 PicGo 配置 GitHub 图床，并在 Typora 和 VSCode 中使用。
cover: https://assets.vluv.space/cover/Dev/FrontEnd/imageBed.webp
tags:
  - OSS
  - Image
---

## Intro

图床，也被称为图像托管服务（Image Hosting Service），是一种在线服务，它提供了一个方便的方式来存储和分享图片。用户可以上传图片到图床，然后图床会生成一个可以在网页、论坛、博客或其他地方使用的链接，以便他人可以查看或下载这些图片。

**Pros & Cons**

- **节省存储空间**：使用图床可以帮助你节省本地及服务器的存储空间
- **易于分享**：图床服务通常会为上传的图片提供一个 URL 链接，相比通过图片路径进行引用，使用图床便于文章的迁移/分享/发布

---

- 虽然图床服务有许多优势，但也有一些潜在的**缺点**，如可能的隐私问题、服务商关闭或更改服务条款、以及对免费用户的存储空间或带宽的限制

## Steps

### GitHub Repo

- 新建Repo，可见性设置为 Public
- [Gen GitHub Token](https://github.com/settings/apps),在 Personal access tokens 中可选 Fine-grained tokens 或 Tokens(classic)，前者对权限有更细致的划分。

![gen-token](https://assets.vluv.space/Dev/imageBed/VSCode-PicGo-Github配置图床-2024-01-18-00-27-26.webp)

### PicGo

|     下载源     |                         地址/安装方式                         |
| :------------: | :-----------------------------------------------------------: |
| GitHub Release |        <https://github.com/Molunerfinn/PicGo/releases>        |
|   腾讯云 COS   |        <https://github.com/Molunerfinn/PicGo/releases>        |
| 山东大学镜像站 | <https://mirrors.sdu.edu.cn/github-release/Molunerfinn_PicGo> |

在图床设置中进行如下配置

自定义域名可设置为`https://cdn.jsdelivr.net/gh/your-repo-name@master`，此举是为了通过 CDN 改善图片加载速度。

![picgo-config](https://assets.vluv.space/Dev/imageBed/VSCode-PicGo-Github配置图床-2024-01-18-00-27-27.webp)

### Typora Setup

语言设置为中文

偏好-图形，进行如下设置

![Typora-Setting](https://assets.vluv.space/Dev/imageBed/VSCode-PicGo-Github配置图床-2024-01-18-00-27-28.webp)

### VSCode Setup

下载 PicGo 插件，`Ctrl+Shift+P - Preferences: Open User Settings (JSON)`，
添加如下配置

```diff
{
+  "picgo.picBed.current": "github",
+  "picgo.picBed.github.branch": "master",
+  "picgo.picBed.github.customUrl": "https://cdn.jsdelivr.net/gh/Efterklang/imageBed@master",
+  "picgo.picBed.github.token": "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", // 注意不要泄露
+  "picgo.picBed.github.repo": "Efterklang/imageBed",
+  "picgo.customUploadName": "${mdFileName}-${dateTime}${extName}",
+  "picgo.customOutputFormat": "<img src=\"${url}\" style=\"width:80%;\" alt=\"\">",
}
```