前言

图床是一种用于存储和分享图片的在线服务。用户可以将自己的图片上传到图床，然后通过链接来分享图片。个人博客需要图床主要是因为博客需要展示大量的图片，而将图片直接上传到博客服务器会占用大量的存储空间，导致网页加载速度变慢，同时也会增加服务器的负担。使用图床可以将图片存储在专门的图片服务器上，从而减轻博客服务器的压力，同时也能提高网页加载速度，使用户体验更好。另外，使用图床还可以方便地管理和分享图片，更加灵活和方便。虽然市面上有很多图床，但有些是付费的，不太适合白嫖党的使用，一些免费的公益图床有随时面临跑路的风险，所以自建一个个人图床尤为重要。

准备

  • Github账户（这个不多说了）
  • PicGO （非必须，一款好用的图床功具）
  • Vercel账户（非必须）
  • 域名（非必须）

教程

Github仓库图库基础篇

创建仓库

登入/创建完Github账户后，回到Gtihub首页，点击右上角的➕号，选择New repository创建一个新的仓库
在右上角
在Repository name输入图床仓库的名字，这里我输入图床的名字，我这里输入ImageBed作为我图床仓库的名字，Description可以随便写写，然后图床的隐私选项一定要选择Public，不然外链无法访问，然后可以选择添加一个README说明文件

然后滑到最下面选择Create Repository，这样Github图库就创建好了。访问地址是https://github.com/用户名/仓库名

上传图片

创建好仓库后会自动跳转到仓库，也可以从GitHub主页-用户头像-Your Repositories-仓库进入新建的仓库。随便将图片拖入浏览器仓库内再点击commit change就可以将图片上传到GitHub

图床链接

点击刚刚上传的图片在点击download就会跳转到GitHub图片直链

1
2
3
4
#链接形式： https://raw.githubusercontent.com/用户名/仓库名/分支名/图片名
#示例：https://raw.githubusercontent.com/zui-lang/ImageBed/main/OIP-C.jpg
Markdown图片形式：![](链接)
示例：![](https://raw.githubusercontent.com/zui-lang/ImageBed/main/OIP-C.jpg)

Github图床至此就搭建好了，已经可以愉快的使用了

Github仓库图库进阶篇-jsDeliver的CDN代理访问

CDN的全称是Content Delivery Network，即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输得更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容，解决 Internet网络拥挤的状况，提高用户访问网站的响应速度。

总所周知，Github在国内的访问情况并不乐观，特别是raw.githubusercontent.com，大多数地区受到了DNS污染，但是这一情况可以通过jsdeliver的CDN代理访问来加快图片加载速度

jsDelivr是一款公共免费的CDN，提供稳定的CDN，可在流量巨大的流行网站上进行使用，没有带宽限制，任何人都可以完全免费使用

操作很简单，只需要将图片链接改成如下的形式即可

1
2
3
https://cdn.jsdelivr.net/gh/用户名/仓库名@分支名/文件名
# 示例：https://cdn.jsdelivr.net/gh/zui-lang/ImageBed@main/OIP-C.jpg
# 如果是默认的main分支的话可以直接写成：https://cdn.jsdelivr.net/gh/zui-lang/ImageBed/OIP-C.jpg

Github仓库图库进阶篇-PicGO

PicGo: 一个用于快速上传图片并获取图片 URL 链接的工具

官方教程

  1. 生成一个token用于PicGo操作你的仓库：

访问：https://github.com/settings/tokens

然后点击Generate new token。

把repo的勾打上即可。然后翻到页面最底部，点击Generate token的绿色按钮生成token。

**注意：**这个token生成后只会显示一次！你要把这个token复制一下存到其他地方以备以后要用。

  1. 配置PicGo

**注意：**仓库名的格式是用户名/仓库，比如我创建了一个叫做test的仓库，在PicGo里我要设定的仓库名就是Molunerfinn/test。一般我们选择main分支即可。然后记得点击确定以生效，然后可以点击设为默认图床来确保上传的图床是GitHub。

至此配置完毕，已经可以使用了。当你上传的时候，你会发现你的仓库里也会增加新的图片了

补充

CDN代理-jsDelivr

在自定义域名填入

1
https://cdn.jsdelivr.net/gh/用户名/仓库名@分支名

这样从PicGo获取得到的链接就是经过jsDelivr代理得到的了，可以加快访问速度

PicGo插件推荐
  1. rename-image：对图片进行重命名到达修改图片位置的效果
    配置参数示例
1
/{y}/{m}/{d}{h}{i}{s}{ms}

所有具体的变量含义如下：

1
2
3
4
5
6
7
8
9
10
11
12
{y}：年，4位
{m}：月，2位
{d}：日期，2位
{h}：小时，2位
{i}：分钟，2位
{s}：秒，2位
{ms}：毫秒，3位( **v1.0.4** )
{timestamp}：时间戳(秒)，10位
{hash}：文件的 md5 值，32位
{origin}：文件原名（会去掉后缀）
{rand:<count>}：随机字符数，<count> 表示个数，默认为6个，示例：{rand：32}、{rand}
{localFolder:<count>}：<count>表示层级 ，默认为 1，示例：{localFolder:6}、{localFolder}
  1. watermark：水印插件
  2. webp-lossless：图片压缩插件

Github仓库图库进阶篇-Vercel

部署Vercel仓库

在Vercel官网登入/注册账户后，再链接Github，点击右侧的Add New选择Project，找到你刚刚创建的Github图片仓库，点击Import导入Project Name随便填写Framework Preset默认other，Root Directory默认./
在这里创建一个新项目
然后直接点击Deploy（部署）就好，进入Vercel仓库，点击Setting再点击Domain即可绑定自己的域名，默认的域名被DNS污染无法打开，然后点击Advanced，把Directory Listing打勾，等待域名解析完成就可以直接访问了，进入链接后就可以直接看到你仓库内的所有文件，同时访问速度也很快，算是Vercel送的CDN代理服务

隐私

如果你不想让其他人看到你图床下的所有图片，可以进行下面的设置

  1. Vercel-仓库-Setting-Advanced-关闭Directory Listing
  2. Github-仓库-Setting-将Public改成Private

PicGo的设置

在自定义域名填入

1
https://你的域名/

优劣分析

优势

  1. 免费（白嫖党最大福利）
  2. 如果有域名，配合Vercel可以自定义域名，并且自带CDN服务，而且有一定的隐私保护功能
  3. 部署简单

劣势

  1. Github官方明确提出不支持将仓库作为图床的行为，仓库大小达到1G就会有人工审核，有封仓库/封号的风险（所有图片压缩插件很重要）
  2. jsDelivr的CDN代理服务只能代理50m以下大小的仓库，超过50m会跳转到raw.githubusercontent.com地址（可以通过建立多个图床仓库解决，或者使用Vercel进行代理）
  3. 没有统一管理的方式，PicGo无法同步多设备，不同设备间查看图床中所有图片不方便