一、使用场景
图床的核心价值在于解放本地存储、提升图片管理效率、稳定支持多场景图片调用,适合有图片存储、分享、管理需求的个人用户使用。
日常点滴记录,会有一些图片存储和管理的场景。个人博客或者个人站点在访问量并发不高的情况下,使用图床来做对应的图片管理最合适不过。
当下主流的个人博客搭建基于Hexo,个人站点搭建基于Hugo,这两个框架都适合用GitHub Pages的服务器来存储和管理对应的内容,但在这个过程中,图片的管理始终是个麻烦事儿。
今天我基于个人博客的图片管理,介绍下图床的使用。
1.1 使用Hexo内置资源文件来管理博客图片
Hexo支持通过资源文件夹管理图片,基于Hexo的个人博客,在创建新文章时,Hexo会自动生成同名文件夹,该文件夹中可以放入当前的文章所需使用的图片,通过Markdown的语法直接引用图片即可(注:这里引用的图片地址的路径是相对路径而非绝对路径)。
在Hexo文章撰写完成后,通过Hexo g&d发布部署到远端后,图片文件会作为静态资源被部署到GitHub Pages服务器上。
此方案虽无技术难度简单易用,但是也暴露了最大的问题就是使用场景受限。
1.2 使用图床来管理博客图片
图床的本质是专门用于存储、管理和分发图片文件的在线服务或系统,其核心功能是为用户提供稳定、高效的图片托管能力,并通过网络将图片资源传递给终端用户或应用场景。
具备以下特性:
- 图片的集中存储载体
- 图片的高效分发枢纽
- 图片的资源管理工具
- 降低其他平台的负载
常见社区比如知乎,在知乎答题时发一张图片,这张图片并非直接存在知乎的主服务器上,而是由知乎合作的图床服务存储,其他用户查看时,图片从图床的CDN节点快速加载,这就是图床作为 “存储 + 分发” 核心的体现。
二、图床搭建
存储服务方案优劣势简介
1、GitHub/Gitee/Coding 原理一样,都是免费通过管理项目仓库的形式来管理图片,但GitHub的国内访问网络不稳定,而国内Gitee保持还是独立运营状态,但没有多少注资,Coding已经被腾讯云收购,两者在国内作为过去移动互联网时代最好的GitHub的平替,目前都已经关闭了外链访问(如果你的代码公有库做图床会遭受封禁后转为私有库),防止用户白嫖其作为图床的能力。
2、SM.MS,正常域名:https://sm.ms/,部分情况下网络限制时国内的备用域名:https://smms.app/,但很遗憾目前该服务器已经关闭用户注册功能,且无法从海鲜市场买断账号使用,本文对此方案也不过多介绍。国内目前平替的产品是:图床小镇,https://imgbed.cn/每天有一定的免费图片上传额度,超出部分可以付费购买。
3、七牛云、阿里云、腾讯云、百度云等云服务的对象存储的,此外基于工信部政策要求,从2018年开始阿里云、七牛云等云服务厂商,针对对象存储访问需要绑定域名(域名需要付费)并进行备案接入,此方案好处是长期稳定的对象存储及国内外合法访问都可以做到足够稳定,适合个人的海外站点素材投放,这个方案时有一定的费用成本的。
2.1 GitHub + PicGo 图床方案搭建
GitHub新建图床专用项目仓库
不赘述
解决GitHub访问的加速问题(使用jsdelivr解决)
jsdelivr:https://www.jsdelivr.com/,为开源项目提供免费的CDN
1 | jsDelivr是一个开源公共CDN平台,专注于加速静态资源加载,提供免费全球缓存节点服务以提升网站性能。 |
关于图床操作客户端
建议使用PicGo,开源免费,GitHub地址:https://github.com/Molunerfinn/PicGo
方案搭建核心流程
1、创建图床专用项目
创建项目时,项目需要设置为公开,创建完成后,需要去GitHub个人资料中心拿到settings中的Developer settings,拿到对应的Personal access token,生成的token只会在这里显示一次,所以记得单独保存下来(建议截图保存到电脑本地,后续需要调整token时可以重新生成)。
2、用jsdelivr为开源项目提供免费的CDN,目前jsdelivr使用比较简单,直接设定域名即可,设定自定义域名:https://cdn.jsdelivr.net/gh/[github用户名]/[仓库名]@main
注:Gitee和Coding有对外链访问封禁的风险(两者的图床搭建原理和GitHub类似,只是这两个类GitHub的代码托管服务器,在国内早些年是提供Https的外链访问的,不需要做CDN加速。)
2.2 SM.MS + PicGo 图床方案搭建
SM.MS是一个免费的图片服务器,上传图片即可返回图片的网络URL,省去了用户自己搭建专门的图片存储服务器。但很遗憾目前该服务器已经关闭用户注册功能,且无法从海鲜市场买断账号来使用,本文对此方案也不过多介绍。
国内目前平替的产品是:图床小镇,https://imgbed.cn/每天有一定的免费图片上传额度,超出部分可以付费购买。
2.3 七牛云对象存储(域名/CDN的强制HTTPS)+ PicGo 图床方案搭建
云存储+域名(CDN加速)+图片上传客户端的图床方案搭建准备
关于域名
建议购买云服务商的域名服务(推荐用阿里云,域名相对齐全)
关于对象存储
对象存储可在不同的云服务商处按需进行购买,七牛云针对每个用户每个月提供10GB的对象存储的额度,正常情况下,对于存储图片用于个人博客或个人静态页面的站点够用,同时七牛云提供存储对象的Http强制转成Https的服务能力,该能力可以很好的在用户访问博客时,显示加载照片内容。否则按目前网络安全的处理,Http的图片链接,不会直接被网页访问显示。
关于图床操作客户端
建议使用PicGo,开源免费,GitHub地址:https://github.com/Molunerfinn/PicGo
方案搭建核心流程
对象存储访问需要绑定域名并进行备案接入,该流程比较繁琐,容易出错。
1、阿里云域名新增解析
2、阿里云域名解析配置
3、七牛云创建存储空间和文件目录
注:存储区域选海外,大陆需要备案
4、七牛云存储空间域名绑定
- 配合2中的服务商域名解析配置
5、七牛云存储空间设置外链域名 - 七牛云免费赠送30日测试域名,可用于能力测试
- 设置外链域名后针对域名调整配置
6、安装&配置PicGo客户端
安装&配置PicGo客户端操作简单,但是配置时关于七牛云的配置设置需要注意,使用到七牛云的密钥管理的AccessKey/SecretKey,七牛云的AK为明文可直接复制粘贴使用,而SK为暗文,需要身份验证后成明文复制粘贴,否则无法复制成功,也会导致配置到PicGo中会配置失败,彼时上传图片时一直失败,在排查问题时,可调取PicGo的操作日志或配置文件,也能发现这个问题(AK和SK的参数value值一样) - 操作日志接口返回权限有问题
- 配置文件中找AK和SK是否和七牛云个人账号中一致
三、图床实操
本文涉及的SOP中的图片,分别是通过GitHub+PicGo和七牛云+PicGo搭建图床系统实操。
而本站点在2017年搭建之初,个人头像、文章打赏功能对应的微信支付宝二维码等基础图片,是8年前使用SM.MS的公有云图床URL链接支持的。
如果某天,你读到该文章时发现七牛云+PicGo搭建的图床对应的图片已不可见,那大概率是我忘记给七牛云的CDN流量充值付费:D。
附
1、如果对于七牛云+PicGo搭建的图床流程中,依然有细节内容不清楚时,可参考视频别的UP主教程中的细节描述,这是传送门:https://www.bilibili.com/video/BV1fw411t7eU/?spm_id_from=333.1387.favlist.content.click&vd_source=ff56e624427d37d39c601ead9169687d
2、图床系统本质是搭建一个畅通无阻的云存储对象上传管理及自由访问能力,在此再次强调,国内必须严格按照相关法律法规要求来落地执行这些多媒体资源的管理。