使用 PicGo + GitHub + Typora 来搭建图床,实现云访问图片

图床简介:

如果没有图床,markdown 插入图片的保存位置是本地,例如 c 盘某个位置,发布到网上后是找不到对应图片的。

图床将图片存储在云服务器,markdown 插入图片在云服务器内的链接地址,这样任何人都可以访问到了。

一、配置 GitHub

1.1 创建一个新的仓库, 用于存放图片

image-20240612120448018

填写仓库名称和描述,且仓库必须是 public 的,否则存储的图片不能正常访问。

2.2 生成一个 token,用于 picGo 访问 github

仓库 -> settings

image-20240612120807226

选择 Developer settings

image-20240612120845815

选择 Personal access tokens

image-20240612121032553

点击右侧的 Generate new token

把 repo 的勾打上即可。然后翻到页面最底部,点击Generate token的绿色按钮生成 token。

image-20240612121746408

注意: 这个 token 生成后只会显示一次!你要把这个 token 复制一下存到其他地方以备以后要用。

二、配置 PicGo

2.1 下载 PicGo

GitHub 链接

2.2 设置 GitHub 图床

打开 PicGo 桌面应用,选择图床设置 -> GitHub

image-20240612122325497

image-20240612141946042

注意:

  • 仓库名的格式是用户名/仓库,比如我创建了一个叫做test的仓库,在 PicGo 里我要设定的仓库名就是Molunerfinn/test
  • 分支: 一般我们选择main分支即可。
  • 设定 Token: 将刚才保存的 Token 粘贴到这里
  • 存储路径是 GitHub 仓库里面的指定目录
  • 点击确定以生效,然后可以点击设为默认图床来确保上传的图床是 GitHub。

2.3 使用 cdn 加速

2.3.1 cdn 简介

cdn分发原理图

  • CDN 全称 Content Delivery Network 即内容分发网络,是一组分布在多个不同地方的 WEB 服务器,会根据用户距离的远近来选择最近的服务器 。

  • 是一个免费、快速和可信赖的 CDN 加速服务,声称它每个月可以支撑 680 亿次的请求。服务在 Github 上是开源的。

  • 只要我们的项目中用到了第三方的静态资源,譬如 JavaScript 脚本,css 样式表,图片,图标,Flash 等静态资源文件都应该考虑接入到 CDN 中

  • jsDelivr + Github 便是免费且好用的 CDN,非常适合博客网站使用

2.3.2 cdn 使用

通过如下地址应用资源

1
https://cdn.jsdelivr.net/gh/你的用户名/你的仓库名@发布的版本号/文件路径

举个栗子,获取 source/bgimg 路径下的 back-rain.png

1
2
https://cdn.jsdelivr.net/gh/xiezhr/mycdn/source/bgimg/back-rain.png       ## 获取最新资源
https://cdn.jsdelivr.net/gh/xiezhr/mycdn@1.0/source/bgimg/back-rain.png ## 获取1.0版本的资源

注意: 版本号不是必需的,是为了区分新旧资源

2.3.3 使用 cdn 加速 PicGo 中的静态资源

PicGo -> 设置自定义域名

1
https://cdn.jsdelivr.net/gh/hmmmmmya/MyResources@main

2.4 上传图片

image-20240612122804700

至此配置完毕,已经可以使用了。当你上传的时候,你会发现你的仓库里也会增加新的图片了

2.5 编辑相册的图片信息

选择相册

image-20240612122946564

选择复制的链接格式

image-20240612123028558

三、配置 Typora

Typora 偏好设置 -> 图像

  1. 插入图片时,选择上传图片,对本地图片应用上述规则
  2. 上传服务: 选择 PicGo(app)
  3. PicGo 路径: 选择安装路径
  4. 验证: 验证图片上传选项

image-20240612140917028

总结: github+picGo+typora 他们三个是好基友

备注