4.7 搞定一个图床(可选)

一、图床的重要性

图片对于文章的展示很重要,即便是在视频流行的时代,只要有图片,就要有图文混排的需求。

不过,图片的存储是个大问题,有的时候打开页面一看,全是无法显示的×,这种感受是很不舒服的:

所以,我们一定要把图片保存在一个非常重要的地方,无论什么时候,都可以很高效地访问,并且很安全地备份,这样,避免在多年以后,出现图片无法显示的问题。

因此,记得在选择图片保存位置——图床的时候,一定要考虑下面两件事:

  • 选择一个大厂的产品;
  • 一定要付费,付费才靠谱!

我想介绍一下我的图床选型,并尽可能告诉你如何完成图片快速上传的操作。掌握本文需要以下技术:

  • 注册阿里云 OSS 服务;
  • 下载使用 iPic 工具(可选);
  • 绑定独立域名(可选);
  • 注册阿里云 CDN 服务(可选);
  • 图片操作的工作流。

二、基本原理

整个原理比较简单,可以分为这样几步:

  1. 截图:使用截图工具,将你希望表达的图像生成成文件,这里的截图是广义的概念,包括在互联网上搜索的各种图片;
  2. 压缩:将图片的大小控制在 100-200KB 以内,这样,他人打开网页速度也快,服务器流量占用也节省很多;
  3. 上传:通过一键上传工具将图片上传到「网络存储服务器上」,我们这里选用的是阿里云的 OSS
  4. 链接:上传成功后,它将返回一个图片链接,用 iPic 更容易实现这一步;
  5. 使用:在 ME 中使用该链接,展示图片。

三、基本准备

前端准备稍显复杂,但是跟着步骤做完,后续就不麻烦了,边际成本为 0。

Step1:注册 OSS 服务

提供对象存储(OSS)服务的企业有很多,比如阿里云、腾讯云、七牛、又拍云等等,我目前选择使用的是阿里云的 OSS 服务。

  1. 打开阿里云(http://aliyun.com)网站;
  2. 在「产品」里找到对象存储 OSShttps://www.aliyun.com/product/oss
  3. 点击页面上的「直接开通」按钮;
  4. 登陆账号;
  5. 在「对象存储 OSS(按量付费)」中选择购买数量为 1,勾选同意服务协议;
  6. 选择「立即开通」,就完成了 OSS 的开通。

这样,就完成了 OSS 的服务注册。因为我们选择的是「按量付费」,所以,不需要有任何投入就可以拥有自己的 OSS 服务器了。

Step2:配置图床 Bucket 并上传图片

在阿里云中,我们把图床称之为 Bucket,我们需要建立独立的 Bucket,才能把自己的图片上传上去。先来看结果:

配置的方法也非常简单:

  1. 点击上图中右侧蓝色的按钮「新建 Bucket」;
  2. 在弹出的页面中的「Bucket 名称」中填写你的图床名,为了保持教程的一致性,请在这里填写:姓名首字母bitcron,例如:
    • yrycbitcron:易仁永澄的 Bitcron
    • jiabitcron:佳佳的 BItcron
  3. 其他的内容不需要更改,直接确定即可。

来看看效果,现在我已经有两个 Bucket 了。

恭喜你,现在,你的图床已经可以使用了!使用方法也极为简单:

  1. 先单击进入你的 Bucket;
  2. 再进入「文件管理」的 Tab;
  3. 选择蓝色的按钮「上传文件」即可。
  4. 然后将要上传的图片拖放到上传区(见下图)即可。

上传图片之后,点击文件会弹出对话框,对话框中的 Url 就是文件链接了,你可以直接使用该链接就可以访问到图片了。

『特别强调』通常,阿里云会默认图片为仅可自己访问,所以,我们要设置一下图片的 ACL,也就是调整访问属性,需要将其改为「公共读」属性。调整后,图片的 Url 会变短,这就是调整成功的标志,具体见下图所示。

如果你想对所有上传的图片的 ACL 都改为「公共读」属性,则请将「基础设置」里的 Bucket ACL 的属性整体调整之后即可。

更多资源,请详见阿里云的 OSS 学堂

Step3:记录图床的 AK 和 SK 值(可选)

AK 和 SK 值是什么?我们不用搞那么清楚,你可以将其理解为钥匙。这把钥匙的作用是,我们可以通过一款软件,用极简的方式上传图片,来取代上述的:登陆网站、打开阿里云、找到 Bucket、进入文件存储、上传文件、复制 URL 的一系列动作。

做法如下:

  1. 进入对象存储的「概览」页面;
  2. 点击页面右侧的 Access Key按钮;

在弹出的页面里,请记录:Access Key IDAccess Key Secret,后者需要验证手机号。请将其记录在文本文件中,后面还需要使用这两个值。

Step4:配置图片上传 App:iPic(可选)

我使用的是 Jason 开发的 iPic作为图片的上传和链接获取设备。建议你直接打开他的 iPIc 使用教程,了解 iPic 的价值。

我使用 iPic 的流程为:

  • 选中要上传的图片;
  • 按下快捷键:Command + Shift + R(一键上传);
  • 听到叮咚一声;
  • 到 ME 中按下快捷键:Command + Shift + I(插入图片);
  • 再按下快捷键:Command + V,图片就在 ME 中显示出来了。

整个时间核算下来,不超过 3 秒钟,而我一篇文章通常要配图十几张,它可以为我省下近 15 分钟的时间,按照普通职场人员每小时 30 元的时薪(相当于年薪 6 万元),每书写一篇文章,iPic 就可以剩下 6 元钱,这就是我为什么特别喜欢 iPic 的原因。

iPic 可以通过 AppStore 下载,只能在 Mac 版本上使用,如果你希望在 Win 版本上使用类似的功能,我在本部分的末尾推荐了阿里云官方的 OSS 工具。

它的配置方式也很简单,见下图截图:

其中:

  • 资源:填写 OSS 里 Bucket 的名称,比如:yrycbitcron
  • Access Key 和 Secret Key 分别填写 Step3 中记录的内容;
  • 网址前缀可以留空,如果你有自己的域名,可以将其改为图片上的样子,这样有利于你的个人品牌构建。建议使用域名为:
    • img.yourname.com(这里,yourname.com 表示你的域名,不可直接使用)
    • pic.yourname.com

此外,我还会配置具体的二级文件夹,方法为:

  • 点击上图中「网址前缀」后方的设置按钮;
  • 在弹出的对话框中进行如下的设置:

这个设置的意思是说:我的所有图片在上传之后,都会保存在我的 Bucket 下的 Bitcron 文件夹。你可以看一下我的实际案例:

看,这就是本文的 MD 代码,里面的图片都是显示的同样前缀。而在阿里云的 OSS 中,Bucket 中也会出现新的子文件夹:

这样就非常便于管理图床的图片了。

此外,阿里云提供了官方的 「OSS 控制台客户端工具」,你可以在以下页面找到它们:

可能 Win 和 Mac 版本页面在未来会失效,你可以在阿里云的云市场(https://market.aliyun.com),直接搜索「OSS 控制器客户端」即可。

关于阿里云 OSS 的其他功能,请参考其提供的产品手册,非常全面,各种玩法,请自行摸索:https://help.aliyun.com/product/31815.html

四、高阶准备

本部分的内容主要考虑的是个人品牌和访问速度,均为可选。

Step1:绑定自己的独立域名

看一下图床 Bucket 的默认设置:

如果我使用名称为 yrycbitcron 为 Bucket 的名字,那么,我的所有图片的域名都要使用:yrycbitcron.oss-cn-beijing.aliyuncs.com为前缀了,感觉特别丑。

那么,我能不能用我自己的域名,例如 http://pic.runwith.cc来取代这一长串地址呢?这样,大家还知道我的图片是保存在我自己的域名服务之下的呢?这就需要绑定域名的操作了。具体见下图操作:

完成后,域名管理页面会出现下图,请复制图片上的「绑定的 OSS 域名」中的值:

接下来,我们需要去自己的域名服务器中设置 CNAME 域名解析,范例如下图所示:

这样,域名设置就完成了。

Step2:开启阿里云 CDN 加速

想想看,你的一张图片存放在广东某地的服务器中,那么,在广东的用户访问和在黑龙江的用户访问该文件速度一定是不同的,毕竟,传输的距离不同。那如果一张图片可以同时放在广东和黑龙江,它会根据用户所在的位置自动分发,这样,用户体验就会被优化。那么,上传一次就可以在若干服务器中出现的服务,就叫 CDN,你可以将其理解为加速服务。

打开阿里云的 CDN 服务地址:https://www.aliyun.com/product/cdn

点击「立即开通」即可。开通后请按照以下方式操作:

  • 进入域名管理,点击添加域名;
  • 增加自己的域名,填写方式见下图:

略等 2 分钟之后,你就可以在 CDN 的控制台中「域名管理」页面看到它已经正常运行了,见下图:

但是,你有没有发现,图中出现了一个感叹号?这里还需要进行另外一步操作,那就是重新 CNAME 域名。操作方式如下:

  • 复制叹号后的域名;
  • 进入你的域名解析,并把 Step1 里 img CNAME 的域名更换成新域名;
  • 更新 DNS 即可。

略等 2 分钟之后,就会生效,这样你的图片加速服务就搞定了。

最后,有一个提示,CDN 的加速服务是有一定费用的,大约每天 1-2 分钱,也就是说,一年需要将近 5-8 元钱,建议你提前充值,以免图片无法打开。

五、构建图片操作工作流

现在,我已经完成了所有的准备,开始构建图片操作的工作流,具体内容如下:

  • Trigger:当我想要用图片表达的时候;
  • Choose:在哪里找到图片?
    • 找配图:使用百度图片、谷歌图片、zoommy;
    • 做截图:使用 Annotate、圈点;
    • 做动图:尚未解决;
  • Size:控制图片尺寸为横向 1280px,大小在 150KB 以下;
  • Copy:单击选中图片,按下快捷键:Command + C;
  • Upload:按下快捷键:Command + Shift + R;
  • Edit:进入 MarkEditor,找到相关位置
    • 插入图片:按下快捷键:Command + Shift + I
    • 粘贴地址:按下快捷键:Command + V
  • Describe:对部分图片进行描述。

好了,整个过程如果不考虑找图、作图的时间,大约在 15 秒钟附近就可以完成,如果没有这个工作流,我甚至需要用 2 分钟才可以搞定一张图的全过程。

希望我的工作流也能对你有所帮助。

六、价值分析

整个操作给我带来巨大的价值,具体分析如下:

  1. 省时间:每篇文章都可以为我省下 15 分钟左右的时间;
  2. 安全性:所有的图片均保存在优质的服务器中,确保图片安全;
  3. 提速度:增加图片的访问速度;
  4. 减费用:将图片放在专用存储中,会降低部分服务器的费用;
  5. 真方便:我再把 MD 文档发给他人的时候,就不需要打包图片文件夹了。

试着体验去感受一下吧~


ChangeLog

  • 2018-03-29 发布内容 by 易仁永澄