使用Picgo+GitHub+ jsDelivr搭建CDN加速免费图床

简介: 使用Picgo+GitHub+ jsDelivr搭建CDN加速免费图床

前言

经常写Markdown或者博客的同学,肯定都要用到图床。图床是什么呢?其实相当于一个存储图片的网站,类似百度云这样,不过上传图片到图床后可以直接通过外链进行访问。

比如把本地一张a.jpg上传到图床后,便可以拿到一个链接:

https://www.xxx.com/img/a.jpg

然后点击这个链接就可以访问图片a了。今天来聊聊怎么搭建可靠的图床吧~

为什么会产生这个需求呢?因为小编经常写博文什么的,现在的做法是在简书上上传图片,然后把生成的图片链接放到Markdown文档上面,写好文档以后就可以批量复制到各大博客平台投稿了。

640.gif

但是这样有个隐患:万一简书哪天挂掉了,那么我放到csdn、cnbolgs等这些平台的文章图片都会挂掉。即使简书一直维持现状,但万一哪天它不高兴了,做了个外链防盗(图片外链只能在本站显示),那同样会遇到上面的问题。

比如小编之前放在简书上的文章,复制到csdn上后。不知道怎么回事:

640.png

说多了都是泪。因此,趁早做好准备,免得以后出现问题就麻烦了。毕竟有些博客的图片只是随手一截,还真找不到备份……

前期准备

平台选择

现在也有蛮多的图床平台可以选择,常见的有SM.MS图床、腾讯云COS、微博图床、GitHub图床、七牛图床、Imgur图床、阿里云OSS、又拍云图床等。

640.png

而这里边,SM.MS和Imgur有免费版也有收费版,腾讯云、七牛、阿里云、又拍云都是收费的,微博图床据说已经挂了。其他小站的就不推荐了,因为指不定哪天就挂了。

那么,也就剩下GitHub安全、免费又可靠了(微软爸爸护着呢!)。现在微软接管了GitHub以后,貌似公有仓库已经不限个数了,而且单个仓库容量已经放宽至2GB。这绝对够用了,不够就再建一个共有仓呗。最重要的还是免费,配合CDN加速,访问也不成问题。嗯,就微软爸爸了!

640.png

工具选择

选择一个本地的上传工具是为了方便我们快速上传图片,获得图片外链。这里首选picgo。

640.png

介绍和下载地址:

https://github.com/Molunerfinn/PicGo

这款小工具非常强大,其中最赞的就是那个剪切板图片上传功能,在QQ或者微信截图截好图片后,可以点击剪切板图片上传或者通过快捷键,它就会把当前剪切板中的图片上传到配置到图床中。可以看到上传所有图片,点击即可复制需要的图片外链格式:

640.png640.png

配置

准备完毕就可以着手配置了。先去GitHub,没有账号的先注册一个账号。

微信图片_20220423163111.jpg

GitHub配置

1. 创建Repository

鼠标移动到右上角,点击"New repository"按钮:

image.gif微信图片_20220423163143.png

填写相关信息,创建一个存储图片的仓库:

image.gif微信图片_20220423163159.png

2. 配置token key

生成一个Token用于操作GitHub repository。回到主页,点击"Settings"按钮:

image.gif微信图片_20220423163222.png

进入页面后,点击"Developer settings"按钮

image.gif微信图片_20220423163242.png

点击"Personal access tokens"按钮,然后点击Generate token:

image.gif微信图片_20220423163245.png

填写描述,选择"repo"权限,然后拉到下面点击"Generate token"按钮

image.gif微信图片_20220423163248.png

微信图片_20220423163405.png

注意:创建成功后,会生成一串token,这串token之后不会再显示,所以第一次看到的时候,可以用个小本本保存起来哦,忘记了只有重新生成,每次都不一样。

Picgo配置

拿到了刚刚记录了GitHub token后,打开picgo,按照如下设置即可:

微信图片_20220423163430.png

设定仓库名按照“账户名/仓库名的格式填写”,比如我的是:dengfaheng/image01。

分支名统一填写“master”。

设定Token将之前的Token粘贴在这里。

指定存储路径留空。

自定义域名的作用是在上传图片后成功后,PicGo会将“自定义域名+上传的图片名”生成的访问链接,放到剪切板上。默认留空也可以正常使用。这里为了使用CDN加快图片的访问速度,自定义域名我们按照这样去填写:

https://cdn.jsdelivr.net/gh/GitHub用户名/仓库名

比如我的是:

https://cdn.jsdelivr.net/gh/dengfaheng/image01

点击确定后就配置完成了,我们截图后点击剪切板图片上传,如果上传成功,拿到的外链放到Markdown中正常访问,就OK啦。

微信图片_20220423163432.png微信图片_20220423163435.png

当然快捷上传的快捷键也可以到设置中进行配置。可以看到GitHub仓库中多了很多我们上传的图片。

微信图片_20220423163437.png

也可以在picgo中对上传的图片进行相关操作,不过这里的删除只是删除picgo中的图片而言,GitHub上的不会删除哦。

微信图片_20220423163440.png

至于如何删除GitHub上的图片,emmm……那说来就话长了。。就不说了。大家还是不要删了,空间不够了再开个仓库即可。

相关文章
|
1月前
|
存储 JavaScript 网络架构
【开源图床】使用Typora+PicGo+Github+CDN搭建个人博客图床
【开源图床】使用Typora+PicGo+Github+CDN搭建个人博客图床
107 3
|
1月前
|
缓存 前端开发 JavaScript
通过jsDelivr实现Github图床CDN加速
jsdelivr是一个免费的公共CDN(内容分发网络)服务,它允许网站开发者将他们的代码库、JavaScript库、字体和其他资源托管在jsdelivr上,并通过jsdelivr的CDN网络进行快速分发。使用jsdelivr可以有效地减少用户下载资源的时间,提高网页加载速度,同时减轻原始服务器的负载。
116 1
|
8月前
|
开发者
picgo+GitHub搭建图床
picgo+GitHub搭建图床
88 0
|
1月前
|
存储 定位技术 Windows
GitHub与PicGo搭建免费稳定图床并实现Typora内复制自动上传
GitHub与PicGo搭建免费稳定图床并实现Typora内复制自动上传
|
7月前
|
存储 搜索推荐 Go
github作为图床的使用方式
github作为图床的使用方式
|
7月前
|
存储 Windows
GitHub+PicGo+Typora搭建个人免费图床并实现md粘贴即上传
本文介绍基于Github平台与PicGo工具,构建免费、稳定的图床,并实现在Typora内撰写Markdown文档时,粘贴图片就可以将这一图片自动上传到搭建好的图床中的方法~
944 3
GitHub+PicGo+Typora搭建个人免费图床并实现md粘贴即上传
|
1月前
|
域名解析 网络协议 安全
阿里云CDN
本文介绍阿里云CDN产品中涉及的基本概念,便于您更准确地理解和使用CDN产品。
85 5
|
22天前
|
弹性计算 缓存 安全
【阿里云弹性计算】阿里云ECS与CDN结合:构建高性能全球内容分发网络
【5月更文挑战第26天】阿里云ECS与CDN结合打造高性能全球内容分发网络,通过ECS的弹性伸缩和安全可靠性,配合CDN的全球覆盖、高可用性及安全防护,提升访问速度,减轻服务器压力,优化数据传输。以WordPress为例,通过配置CDN域名和ECS,实现高效内容分发,提高系统扩展性和稳定性。此解决方案满足用户对访问速度和稳定性的高要求,为企业提供优质的云计算体验。
120 0
|
1月前
|
域名解析 网络协议 CDN
网站接入阿里云CDN实现域名加速全流程
阿小云网站已通过ICP备案在广州节点上线,但为提升全国用户访问速度,计划接入CDN。以下是4步CDN接入教程:1) 开通阿里云CDN服务;2) 添加加速域名;3) 使用DNS解析验证域名归属权;4) 配置CNAME实现域名与CDN节点关联。详细指南见阿里云CDN官方文档。
|
10月前
|
弹性计算 缓存 运维
【运维知识进阶篇】用阿里云部署kod可道云网盘(DNS解析+CDN缓存+Web应用防火墙+弹性伸缩)(三)
【运维知识进阶篇】用阿里云部署kod可道云网盘(DNS解析+CDN缓存+Web应用防火墙+弹性伸缩)(三)
156 0