006_云访问图片
使用 PicGo + GitHub + Typora 来搭建图床,实现云访问图片
图床简介:
如果没有图床,markdown 插入图片的保存位置是本地,例如 c 盘某个位置,发布到网上后是找不到对应图片的。
图床将图片存储在云服务器,markdown 插入图片在云服务器内的链接地址,这样任何人都可以访问到了。
一、配置 GitHub
1.1 创建一个新的仓库, 用于存放图片
填写仓库名称和描述,且仓库必须是 public 的,否则存储的图片不能正常访问。
2.2 生成一个 token,用于 picGo 访问 github
仓库 -> settings
选择 Developer settings
选择 Personal access tokens
点击右侧的 Generate new token
把 repo 的勾打上即可。然后翻到页面最底部,点击Generate token
的绿色按钮生成 token。
注意: 这个 token 生成后只会显示一次!你要把这个 token 复制一下存到其他地方以备以后要用。
二、配置 PicGo
2.1 下载 PicGo
2.2 设置 GitHub 图床
打开 PicGo 桌面应用,选择图床设置 -> GitHub
注意:
- 仓库名的格式是
用户名/仓库
,比如我创建了一个叫做test
的仓库,在 PicGo 里我要设定的仓库名就是Molunerfinn/test
。 - 分支: 一般我们选择
main
分支即可。 - 设定 Token: 将刚才保存的 Token 粘贴到这里
- 存储路径是 GitHub 仓库里面的指定目录
- 点击确定以生效,然后可以点击
设为默认图床
来确保上传的图床是 GitHub。
2.3 使用 cdn 加速
2.3.1 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 | https://cdn.jsdelivr.net/gh/xiezhr/mycdn/source/bgimg/back-rain.png ## 获取最新资源 |
注意: 版本号不是必需的,是为了区分新旧资源
2.3.3 使用 cdn 加速 PicGo 中的静态资源
PicGo -> 设置自定义域名
1 | https://cdn.jsdelivr.net/gh/hmmmmmya/MyResources@main |
2.4 上传图片
至此配置完毕,已经可以使用了。当你上传的时候,你会发现你的仓库里也会增加新的图片了
2.5 编辑相册的图片信息
选择相册
选择复制的链接格式
三、配置 Typora
Typora 偏好设置 -> 图像
- 插入图片时,选择上传图片,对本地图片应用上述规则
- 上传服务: 选择 PicGo(app)
- PicGo 路径: 选择安装路径
- 验证: 验证图片上传选项
总结: github+picGo+typora 他们三个是好基友