JSDelivr+GitHub+PicGo搭建免费图床

一、概念简介

1.图床

图床一般是指储存图片的服务器,有国内和国外之分。国外的图床由于有空间距离等因素决定访问速度很慢影响图片显示速度。国内也分为单线空间、多线空间和cdn加速三种。简而言之,就是能提供一些可以把图片存放到网上并且引用到其他网站使用的服务。

2.CDN

CDN的全称是Content Delivery Network,即内容分发网络。CDN是构建在网络之上的内容分发网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。

3.jsDelivr

jsDelivr 是一个提供含JavaScript库、jQuery插件、CSS框架、字体等Web上常用静态资源的免费开源的 CDN 解决方案。其采用全球CDN加速,确保每个地区的使用者都能获得最好的连接速度,而在大陆地区使用了国内的CDN加速。因此jsDelivr在大陆也有很好的响应速度,jsDelivr可将不同的JavaScript或CSS libraries集合在一起使用,同时,jsDelivr也提供包括npm、GitHub、WordPress等项目的镜像服务。

4.Github

GitHub 是一个面向开源及私有软件项目的托管平台。额,这个不必多说。

5.PicGo

PicGo 是一款开源跨平台的免费图片上传工具以及图床相册管理软件,它能帮你快速地将图片上传到微博、又拍云、阿里云 OSS、腾讯云 COS、七牛、GitHub、sm.ms、Imgur 等常见的免费图床网站或云存储服务上,并自动复制图片的链接到剪贴板里,使用起来高效便捷。下载地址

二、搭建步骤

1.新建图床仓库

在github上新建一个仓库,作为图床仓库。

2.新建一个访问令牌(access token)

在github上点击Settings>> Developer settings >> Personal access tokens >> Generate new token ,勾选repo项,然后点击Generate token生成一个token。


需要记录一下这个token(先不着急关闭该页面,这个token只会显示一次),在后面配置PicGo时候会用到。

3.配置PicGo

首先下载安装完PicGo(下载地址)。
打开并配置picgo,图床设置>>GitHub图床:

设定仓库名: 格式为:用户名 / 图床仓库名
设定分支名: master
设定Token: 之前创建的Token
指定存储路径: 在仓库里的路径,如【BlogPic/】,即会在仓库里新建一个名为BlogPic的文件夹来存放上传的图片。
设定自定义域名:此处填写的内容会决定你的图片的访问链接,你上传的图片之后可以通过【此处填写的内容/图片路径】的形式来访问(图片路径指仓库里的存储文件夹/图片名称)。由于图片是上传到GitHub仓库中的,所以图片路径理应是【https://github.com/用户名/仓库名/文件夹名/图片名】,但我们还需要通过免费的CDN——JSDelivr来加速图片(jsDelivr 提供加速 GitHub 仓库的域名 cdn.jsdelivr.net/gh),故此处应填写成【https://cdn.jsdelivr.net/gh/用户名/图床仓库名】。之后便可通过【https://cdn.jsdelivr.net/gh/用户名/图床仓库名/文件夹名/图片名】来加速访问图片。

三、使用

1.上传图片

按照以上步骤配置完成以后,可以直接将需要上传的本地图片拖进PicGo的上传区,即可将该图片上传至GitHub图床仓库的存储文件夹内。
在这里插入图片描述

2.使用链接访问图片

可以在PicGo的相册里快捷获得最近上传的图片的链接复制,或者通过【https://cdn.jsdelivr.net/gh/用户名/图床仓库名/文件夹名/图片名】的方式访问图片或将其引用至博客等需要使用的地方。