使用Github+PicGo+jsDelivr创建个人图床

前言

markdown是一门易于上手能帮助作者专心写作的文档编辑语言。Tpyora是一款优雅的markdown编辑器。用Tpyora写的笔记和文章可以直接复制到csdn、简书上发布,很方便。

唯一的问题就是要处理下图片!

用Typora 写文章时插入本地图片,图片是存储在本地,如果本地图片被删除或者移动位置,那么文章中的图片就无法正常显示了。把内容复制到 csdn,简书等博客发表,都会显示不支持外部链接。解决方法就是将图片上传到图床。

图床是干什么的? 图床就是一个便于在博文中插入在线图片连接的个人图片仓库。设置图床之后,在自己博客中插入的图片链接就可以随时随地在线预览了,并且不会因为任何意外原因无法查看,除非自己亲自删除。

目前各种图床情况:

微博图床:以前用的人比较多,从2019年4月开始开启了防盗链,凉凉
SM.MS:运营四年多了,也变得越来越慢了,到了晚上直接打不开图片,速度堪忧
其他小众图床:随时有挂掉的风险
Imgur等国外图床:国内访问速度太慢,随时有被墙的风险
大厂储存服务:例如七牛云、又拍云、腾讯云COS、阿里云OSS等,容量限制,操作繁琐,又是实名认证又是域名备案的,麻烦,而且还要花钱(有钱又不怕麻烦的当我没说)

所以创建一个免费、快速、易用的个人图床是很有意义的。

方案选择

有些人选择用Gitee创建图床,因为Gitee网速比Github快。但是Gitee仓库容量有限制。
2020050801.png
github免费而且容量没有限制,而且经过查阅资料发现,国内访问github速度不快的问题,可以利用jsDelivr CDN加速访问来解决。

jsDelivr 是一个免费开源的 CDN 解决方案。国内该平台是首个「打通中国大陆与海外的免费CDN服务」,网页开发者无须担心中国防火墙问题而影响使用。

因此,使用GitHub作为图床,利用jsDelivr CDN加速访问,PicGo工具一键上传,操作简单高效,GitHub和jsDelivr都是大厂,不用担心跑路问题,不用担心速度和容量问题,而且完全免费,可以说是目前免费图床的最佳解决方案!

在GitHub上创建一个存储库

添加一个存储库(New repositories)命名为:images,用于上传图片文件。
image

上传完图片,就可以直接通过图片链接访问图片了。
图片链接的格式:https://github用户名.github.io/存储库名/图片文件名(带文件后缀名)
我的github账号用户名为”zhoumei”,创建的存储库名称为”images”,图片为”01.png”
访问地址为:https://zhoumei.github.io/images/01.png

在markdown插入图片链接,就可以显示该图片了。
markdown中代码如下:

![](https://zhoumei.github.io/images/01.png)

使用PicGo客户端

1、准备工作:

(1)images存储库分支选master
在images存储库点击Settings:
image
分支选master branch:
image
(2)生成Personal access tokens
创建好images存储库后,需要在 GitHub 上生成一个 token 以便 PicGo 来操作我们的仓库,来到个人中心,选择 Developer settings 就能看到 Personal access tokens,我们在这里创建需要的 token。
image
点击 Generate new token 创建一个新 token,Note随意填写,选择 repo,同时它会把包含其中的都会勾选上,我们勾选这些就可以了。然后拉到最下方点击绿色按钮,Generate token 即可。之后就会生成一个 token ,记得复制保存到其他地方,这个 token 只显示一次!
image

2、PicGo下载安装

github下载地址:https://github.com/Molunerfinn/PicGo/releases
image
我用这个地址无法下载,最后到CSDN下载了一个安装包:https://download.csdn.net/download/chen_junyong/12329873
总之,找个安装包下载安装即可。

3、配置 PicGo

点击PicGo配置,选择我们要用的GitHub图床:
image
GitHub设置:

说明:
设定仓库名: 用户名/仓库名
设定分支名:master
设定Token:上一步创建的token
指定存储路径:图片在images存储库下的存储路径(我想把上传上来的图片存储在imgs文件夹里面,这里就填imgs/)
设定自定义域名:
不使用jsDelivr:https://用户名.github.io/仓库名
使用jsDelivr后:https://cdn.jsdelivr.net/gh/用户名/仓库名

备注:
图片访问路径为:https://cdn.jsdelivr.net/gh/用户名/仓库名/图片路径
如:https://cdn.jsdelivr.net/gh/zhoumei/images/imgs/20200508222335.jpg

4、PicGo使用

(1)上传图片:
image
(2)上传完图片可以在相册中查看上传的图片(当然在github的images存储库中,也可以查看)
image
(3)点击复制图片的访问地址,就可以直接在 Markdown 编辑器中使用了。
image
(4)图片重新命名
在相册中,选则图片点击修改按钮,可以修改图片的名称。
image
工具默认上传前不做重命名,如果需要在上传前重新命名,我们可以到 PicGo设置中进行设置,把上传前重命名开关打开即可。
image
(5)修改上传快捷键:
image
参考文章:
https://www.jianshu.com/p/9d91355e8418
https://blog.csdn.net/qq_36759224/article/details/98058240

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章