一、前言

​ 1. 用 markdown 写博客,想插入一些图片,如果采用本地存储方式,上传博客时插入的图片路径就找不到了,需要手动再把图片上传上去,并且修改路径,很麻烦,可以考虑将图片上传至图床生成 URL,直接在markdown 引入url。

​ 2. 现在国内用的各种图床,例如,微博图床、SM.MS、Imgur、七牛云、又拍云、腾讯云COS、阿里云OSS等都有各种限制,或者需要收费。

​ 3. 使用GitHub仓库创建一个图床,存在的问题是国内访问github的速度不是很快,可以利用jsDelivr CDN加速访问(jsDelivr 是一个免费开源的 CDN 解决方案)国内该平台是首个「打通中国大陆与海外的免费CDN服务」,网页开发者无须担心中国防火墙问题而影响使用。

二、创建Github仓库

  1. 登录/注册 GitHub
  2. 新建一个仓库,填写好仓库名
  3. 仓库描述
  4. 将权限设置成 public
  5. 根据需求选择是否为仓库初始化一个 README.md 描述文件

三、生成Access token

1.点击用户头像 -> 选择设置

2.点击 Developer settings

3.点击 Personal access tokensGenerate new token

4.填写 Token 描述,勾选 repo ,然后点击 Generate token 生成一个 Token

5.获取 Token 密钥

  • 注意这个 Token 只会显示一次,自己先保存下来,或者等后面配置好 PicGo 后再关闭此网页。

四、配置 PicGo 并使用 jsdelivr 作为 CDN 加速

前往下载 PicGo(点击下载),安装好后开始配置图床。

  1. 设定仓库名:按照 用户名/图床仓库名 的格式填写
  2. 设定分支名:master
  3. 设定 Token:粘贴之前生成的 Token
  4. 指定存储路径:填写想要储存的路径,如 img/,这样就会在仓库下创建一个名为 img 的文件夹,图片将会储存在此文件夹中
  5. 设定自定义域名:它的的作用是,在图片上传后,PicGo 会按照自定义域名+上传的图片名的方式生成访问链接,放到粘贴板上,因为我们要使用 jsDelivr 加速访问,所以可以设置为https://cdn.jsdelivr.net/gh/用户名/图床仓库名

五、使用 Imagine 进行有损图片压缩

通常情况下,图片大小都是超过 200KB 的,所以网页加载的时候会特别慢,一般我们会对图片进行压缩,并且转换成 webp 格式,这里我推荐 Imagine(点击下载) 支持全平台。

六、使用免费图床

下面就可以愉快的图床了,选择需要的图片和格式,复制链接,粘贴到 markdown 中,就完成了。

此外 PicGo 还有相册功能,可以对已上传的图片进行删除,修改链接等快捷操作,PicGo 还可以生成不同格式的链接、支持批量上传、快捷键上传、自定义链接格式、上传前重命名等,更多功能自己去探索吧!


shall I compare thee to a summers day?