抱歉,您的浏览器无法访问本站
本页面需要浏览器支持(启用)JavaScript
了解详情 >

前言

网站上总会有各种各样的资源,例如装饰所用的图片、音乐、视频……相比于静态网站生成的文件,他们通常都太大了。这会导致每次上传部署网站的时候都要上传一遍这些大资源,对网站的渲染以及云端服务器的带宽和资源负载都造成很大负担。

一般这种情况我会建议不要上传图片

此时,我们可以建立一个云端大容量的存储空间并开放权限供用户调用,在自己的网站中拉取这些资源,从而将这些加载的负担平分到访问用户的浏览器上。而对于我们来说,网站在渲染上传的时候就只需要把原本指向本地资源库的地址更改为网络中的地址就够了。

因为访问者访问网站的时候总是需要访问这些大资源,只不过从域名源站获取变成了从网站中跳转到另一个链接获取而已,所以不用对自己逃避负担的行为抱有罪恶感ฅ^._.^ฅ

什么是图床?

图床是指存储图片的服务器,并且允许用户将图片对外链接到别的地方。

我们可以将它理解为一个自动产生分享链接的网盘。图片存进这个网盘当中,就会生成一个网址,通过这个网址就可以访问和调用这张图片了。

一个例子图片的网址 -
https://cdn.jsdelivr.net/gh/Lyrikp/SourceLibrary/layout/loading4.GIF
这是我的默认加载中图片

迷迭迷迭迷迭香
迷迭迷迭迷迭香

这个图片是我的github账号 LyrikpSourceLibrary 仓库中存储到 /layout/ 路径下的称为 loading4.GIF 的动图文件。

如何将github仓库中的文件通过url来进行调用呢?

其实前面的这个名称为 cdn.jsdelivr.net 的网站是一个免费的用来存储静态资源(如.js、svg等)的具有 CDN 分发功能的网站。只要你有 GitHub 账号,在仓库右边中找到 release 新建一个 tag 标签,就会自动生成一个 https://cdn.jsdelivr.net/gh/github用户名/仓库名/ 的资源库,里面存储该仓库中的所有文件,可以通过 url 进行调用。

通常大家都会将自己的网站的静态资源传到这里,然后在本地进行调用,来提高自己网站的加载速度。所以将图片传到这里再调用回来是非常邪门的用法。

当然,直接使用这个作为自己的图床也是完全可行的,不过因为它本来的设计是为了存储js——从它的名字jsdelivr也能看出来——所以它给一个项目提供的空间相当的小(50M),我们只能被迫压缩资源的大小或者强行开很多个项目了。

来源于Kuuhaku老师直白粗暴而恐怖的想法

该想法已被制裁

jsdelivr 官方明确表示不建议大家将图片等大型文件上传到网站上进行分发,该行为是对免费资源的一种滥用,有悖于开源精神。
我和Kuuhaku老师当时的想法过于幼稚,在此也呼吁大家珍惜免费资源,共同建设良好的开源环境。
另外,由于大量色情图片、违法信息被存储在被当做网盘使用的 jsdelivr 上,它的icp备案也在2021年底被吊销,jsdelivr 彻底退出了中国大陆。
缅怀曾经带给我们很多便利的 jsdelivr,也对它道一句:
“晚安”。

免费的专业图床平台当然是存在的,不过这些平台因为众所周知的原因往往难以在国内访问减速CDN,而国内的图床平台又会出现审核和版权方面的限制,还往往容易跑路全网站链接爆炸pong!,使用一些比较靠谱的云存储进行图床的搭建才是比较稳妥的方法。

百度搜索第一位的图床服务条款
百度搜索第一位的图床服务条款
我竟不能使用色情......不对,是二次元的图片,二次元震怒

什么是云存储?

云存储简介

云存储就是网盘(暴论)

各大云服务商都会有自己的云存储,不过名字都有所不同,例如腾讯云的COS对象存储,阿里云的OOS对象存储,百度的BOS对象存储,七牛云的Kodo对象存储,又拍云的云存储USS等等。

只有又拍云特立独行

这些云存储会分配给用户一个相对庞大的存储空间,按照流量或者带宽进行计费(差不多 几分钱/G 或者 几分钱/Mbps/h 的样子,而且通常会送很多代金券让你免费白嫖),只要将图片上传上去,再开放对应的权限,就可以使用url来访问或者调用这些资源了。

关于云存储的计费

以普遍理性而论,呼吸空气也应该或许是要收费的

云存储在相当低廉的使用价格之上,其计费也是五花八门的我也没搞懂,不过一般来说是有两种计费方式——流量计费和带宽计费

简单粗暴一点,流量计费就是 3 个人下载 40MB 的文件收 120MB 的钱,带宽计费就是 n 个人用 3Mbps 的速度下载了 很多文件共用了 2hours 收 3Mbps×2hours 的钱。

因此,博客和较小流量的网站采用流量计费的方式是比较划算的。

云存储的收费五花八门还体现在收费项上——存储容量、请求次数、访问流量、上传数据、下载数据、管理功能等等,这些都是有可能产生费用的项目。

即不论是持有存储空间,还是点击访问链接或者上传与下载资源都会产生费用。

我的感想是:呼吸也会收费的世界出现了。

幸运的是,大多数项目是存在免费额度的,像是腾讯云新用户会送一年的 50G 存储容量,三个月的下行流量包等等,各大平台都会有类似的优惠。如果是担心计费的话,使用在网站页脚打个小 logo 广告就能送 15GB 免费流量和 10GB 云存储空间的又拍云是个不错的选择 - 云游君老师的又拍云推广介绍

云服务商的选择

云服务商的情况与选择

阿里云OOS - 可能是最稳定的一个,价格会稍贵一点点点,有送代金券
腾讯云COS - 稳定高效,送代金券
又拍云USS - 在网站页脚打个logo就有免费额度,最适合个人站长
七牛云Kodo - 被当做图床使用范围最多的云存储,教程很多的图床工具,不过我没有体验过

因为我使用的服务器在腾讯云上,很多附加服务都使用了腾讯云,所以干脆就使用了 腾讯云COS 作为云存储,下文也会以腾讯云作为示例说明。

腾讯云COS快速使用

首先当然需要在云服务平台上注册账号和进行实名认证,我相信这些操作是刻在大家DNA里的东西。

腾讯云COS的使用步骤如下:

开通COS服务 -> 创建存储桶 -> 存储桶操作 —> 绑定域名

写成步骤怎么这么简单啊.jpg

1 开通COS服务

腾讯云 右上角的【控制台】的首页中搜索【对象存储】进入COS控制台,按照界面提示开通COS服务即可。

你可以在 【概览】 界面的右上角部分看见 控制台文档 的说明手册入口,我有什么没有说明清楚的也可以在文档中尝试搜索。这怎么可能嘛(挺胸)因为我就是抄这个文档的

2 创建存储桶

在腾讯云COS中存在几个重要概念,当然,在其他的云存储中也是大同小异的。

  1. 存储桶:即前言中提到的“项目”,也可以理解为一个网盘容器。一个账号下是可以申请很多个存储桶的,这些存储桶分开计费。
  2. 对象:即存放在存储桶中的数据,可以是任何格式。比如我们存放进去的图片资源。
  3. 地域:云存储器其本身所在的地区。不用管它,5G时代下你是感觉不到地域对网速的影响的。

首先点击左侧导航栏的 1【存储桶列表】,在右侧的空白栏中点击蓝色按钮 2【创建存储桶】,会弹出如下的窗口 3。

  • 名称 - 该项目的名称,可以随当天的天气好坏填写,要注意它不可再次更改;划掉的xxxx数字相当于是是该存储桶的识别id,是无法更改的
  • 所属区域随便了
  • 访问权限 - 建议改成第二项 公有读私有写,否则可能会出现链接无权限访问的情况
  • 请求域名 - 即之后可以被调用的url格式

点击【确定】创建。

创建存储桶
创建存储桶

3 存储桶操作

创建存储桶后,在存储桶列表当中就会出现存储桶的信息,点击名字就可以直接进入存储桶的文件列表,这个文件列表和网盘是一模一样的。

建议使用Firefox或者Chrome浏览器进行访问,这两个浏览器可以直接拖拽文件上传

我们先上传一个迷迭香我老婆好了。

上传的文件会出现在文件列表,点击靠右边操作栏的【详情】可以进入详情界面,查看预览和一些详细信息。

资源文件详情
资源文件详情
  • 对象名称 - 上传文件的名称,建议提前改好名字
  • ETag - HTTP协议中关联Web实体资源的电子标签,不用管它
  • 对象地址 - 可以访问和调用的url

终于,我们获得了可以访问的网址,到这一步后就可以将Markdown中所有的链接换成云存储器里面的图片链接了。

不过这个链接实在是有一点点长,而且会暴露自己的云存储器id与地区,有可能遭到武装暴徒的袭击,我们其实可以给这个云存储器绑定一个自己的子域名,从而获得一个更为简洁的地址。

以下操作需要域名工信局备案完成

4 绑定自定义域名

读到这里的人应该都有自己的域名吧?

子域名即为 xxx.example.com,这前面的xxx是可以随意填写的,顶级域名前面的那个example是自己的域名,而再前面的xxx就都是域名下的子域名了。

仍旧在【存储桶列表】当中找到【域名传输与管理】-1【自定义源站域名】,点击 2【添加域名】,在 3 的地方输入想要绑定的子域名。

自定义源站域名设定
自定义源站域名设定

我们假设需要绑定的子域名称为 store.example.com 好啦。

点击右边的保存。其实此时我们的子域名是没有任何解析的,为了让这个网址生效,我们需要为其添加DNS解析。

对了,这里第3列的 CNAME 先记下来,解析要用到。

控制台 首页里面搜索 域名注册,【我的域名】列表当中找到自己需要配置的域名,点击解析进入DNSPod,我们现在为其添加一个子域名的解析。

点击 1【添加记录】,填空

自定义源站子域名CDN解析
自定义源站子域名CDN解析
  • 主机记录 - 填写子域名,这里的例子是 store.example.com
  • 记录类型 - 选择CNAME,意思是跳转到记录值所在的地址
  • 记录值 - 填写之前记下来的 CNAME

直接确认即可。

记得申请SSL证书,点击操作列的SSL按钮,顺着提示一路点点点就好,和自己主域名的证书申请是一样的。

等待10min……

收到证书之后,在【对象存储】-【存储桶列表】-【域名传输与管理】-【自定义源站域名】中操作列点击绑定证书

绑定证书
绑定证书
  • 证书来源 - 选择腾讯云证书,在腾讯云申请的证书是可以一键部署的,也可以把证书下载下来在自有证书那里手动复制进去key和证书代码
  • 证书选择 - 选择刚才申请的证书

点击确定配置完成

在配置子域名SSL证书之后,建议等待30min后再上线尝试,不要像我一样一配置好就迫不及待地输入网址查看然后心肺骤停。
部署证书需要一定的时间,在这段时间当中,主域名和子域名都会属于挂起的状态。

此时返回步骤3当中的【详情】页,就会发现在【指定域名】的选项中多出了【自定义源站域名】的选项,选择刚刚定义好的源站域名,下方的对象地址也变得简洁了起来

自定义源站域名引用
自定义源站域名引用

此时,一行简单的url就可以调用我可爱的迷迭香啦~

迷迭迷迭迷迭香
迷迭迷迭迷迭香
https://library.lyrikp.art/layout/loading2.GIF # 我的云存储器调用地址

后语

至此,用云存储服务搭建图床就完成了,不知道其中是否有什么疏漏呢?也有稍微想拿出来炫耀一事,这次搭建图床的步骤也算的上是我第一篇几乎没有什么参考文章与模板而自己编写出来的教程,在之前两次配置阿里云和腾讯云轻量应用服务器以及 CDN 加速时都没怎么搞明白的 DNS 解析也总算初步有了了解。而这份成就感给予我的动力也让我迅速码下了这一篇教程。

我似乎也看到了因为自己迫不及待雷厉风行而漏掉了什么条款没看结果月末产生一大堆费用导致负债累累只能卖身给富婆享啊不对忍受快乐球还债的未来。

因为并没有经过别人的测试,步骤中难免存在差错。然而我的教程基本上都有写下每一个步骤的操作理由和作用,想来这些原理总不至于出错自信(挺胸),所以如果仍有所笔误,凭借原理也——还是在评论区给我写个 issue 吧(摊)。

感谢阅读,注意早睡。

by.Likey_ฅ^._.^ฅ

评论