静态博客部署(三):S2存储桶,增添一些文字之外的东西
在之前的两篇文章中,已经较为详细的说明了关于网站生成和部署方面的内容,想要推送文章更新也非常容易,new一篇新文章直接push到github即可。如果你回顾我更早写的一些东西和之后写的东西,可以发现一个很大的区别,我的较早写的东西一般都是纯文字没有图片的。是因为早期的内容不需要图片吗?非也,只是因为早期并没有考虑到图片存放的问题,后来才选择了相关方案,其实这个问题也可以单开一篇讲一讲。
hugo和markdown的图片添加方式 链接到标题
首先我们可以明确一些基础认知,图片也好,文字也好,本质上都是一种“资源”,需要通过一定路径去访问资源,引用到页面中。
引入图片的方式有很多,我也只使用过一部分,如果有兴趣使用hugo自带的短代码方法,可以参考该说明,如果希望有更简单好用的方式,那么首先可以确认在网址根路径创建static文件夹,在hugo生成静态网站的过程中,该路径下文件会原样复制到网站中以供引用,然后使用

就可以引入图片到文档中。
当然这是非常简单的一步,但是存在一些问题。
首先就是github对于仓库的一些限制,在文档中非常明确的指出了对仓库的大小限制。客观来讲,github其实给了一个不算低的容量,仅对于一个个人站点来说可以说是相当富裕,大多数图片一般都是几百K大小,并且绝大多数人都很难去维持一个长线的内容输出,对于这些人来说,仓库大小并不是什么非常严重的问题。
如果你真的这么做了,但是后续内容输出还可以,因此囤积了较多的图片,导致在新位置拉取仓库时需要较长的时间,那么可以考虑一下图床方案,仅在github中存储文字部分。
图床添加图片 链接到标题
什么是图床 链接到标题
简单来讲,图床就是一个在线的图片存储仓库,有些人看到现在花花绿绿的互联网或许会不理解,因为已经习惯了在网上在本地存储大量图片的情况,那么现在思考一个问题,我在微信上发送和接收的图片,我该用一个什么方式通过互联网引用到呢?
很显然是不可以的,图床的意义就在于此,可以给存储到互联网的图片资源一个网络地址,之后就可以通过一个链接直接引用到这一张图片。在浏览部分网址的时候可以试试右击图片,可以看到一个选项“复制图片链接”,之后可以尝试粘贴该链接到浏览器中直接访问,然后就可以单独打开这张图片或者看到403(服务器拒绝访问,即服务器不想单独给你这张图片)。
那么作为个人,有什么方法可以选择一种方式,在互联网上存储图片并且得到一个这样的地址呢,一个选择就是使用一些成熟的媒体,例如什么新闻网站,社交媒体等,公开发送这张图片也可以在其他地方引用,当然仅仅为了引用几张图片有点没必要,因为公开之后就不仅仅是引用图片那么简单,针对这种情况,就有了图床服务。
比较遗憾的是,出于存储和带宽成本,目前或大或小的图床都有较高的跑路风险,这样就会造成图片的永久丢失,因此本文不做图床推荐,而是推荐一种通过Cloudflare S2 bucket存放资源的方案。
(如果有兴趣挖掘一下,其实可以白嫖很多很好用的个互联网服务)
Cloudflare S2 Bucket 链接到标题
创建存储桶 链接到标题
首先要明确一点,该服务对于流量一般的个人来说,是等同免费使用,但是本身并不是免费服务,因此或许需要提供一张有效的外币信用卡。
首先在Cloudflare左侧选择R2对象存储,新建存储桶,起一个名字,存储桶相关的数据有三个,A类操作,B类操作和总储存。其中A类操作包括创建、列出和复制对象以及管理存储桶在内的操作,B类操作包括读取对象及其关联元数据以及读取存储桶配置在内的操作,总储存表示所有存储桶(包括所有存储类)的当前总存储空间。

如果使用免费存储方案,那么每个月有10G的存储空间,一百万的A类操作和一千万的B类操作额度,没有出口带宽和流量限制。如果直观的感受一下这个额度的含义的话,我的网站每日各种访问(包括爬虫)有几十个,每个月下来大约有1-2K的B类操作用量,这个免费额度个人使用基本等同于免费。
创建完存储桶之后:
- 点开存储桶,进入设置页面
- 在左侧找到自定义域这一项
- 添加自己的子域名
(在上一篇文章中已经简要的解释了下二级域名,这里推荐使用 images.域名.后缀,这里的域名会被自动添加到DNS解析中,因此注意使用一个合理的二级域名。)

完成如上操作之后,就可以通过设置好的域名访问该存储桶,但是这里的访问并不是指可以直接通过网页看到一个菜单或者类似的东西,在此之前,首先应该添加一张图片。
向存储桶中添加图片 链接到标题
存储桶可以简单理解为一个在线的图片文件夹,文件组织方式也类似,但是在管理和使用上并不像本地的文件夹和文件一样。当然也有一些第三方的软件可以提供类似的功能,但是在此之前先不做推荐,先介绍一种比较简单的方式。
在存储桶界面中进入存储桶可以看到一个文件展示的模块,在右上角有上传和添加目录的选项,OK,就这些。
是的,在网页中添加文件是非常简单的一件事。
如果想要访问文件,只需要在浏览器中使用刚刚设置的域名,在域名后面添加文件名即可。

如上图举例,我有一张在存储桶根目录的名为“兔斯基.jpg”的图片,那么可以通过
https://images.meirgoo.com/兔斯基.jpg
访问该图片,这个地址就是我存储的这张图片在互联网上的地址。
如果希望在文章中引用该图片,则可以使用如下markdown语法。

在文章中的展示效果如下图所示。
