使用 Git-LFS + 一点技巧管理博客图片

这可能是截至目前我认为最优雅的博客图片管理方案没有之一。

背景

早期

最早,我的博客采用单台 PHP 服务器搭建动态博客,将图片存储至服务器并定期备份。而访客则是通过 CDN 加速,以便快速载入图片。

缺点:

  • 备份不及时,大量冗余数据。
  • 图片管理操作不便。

中期

后来,尝试改用七牛 OSS + CDN 全家桶,数据量和流量不大,所以一直在用免费额度。另外,截止 2018 年的某个月,早期注册的老用户是一直拥有 无需备案 的无限制测试域名的(然而后来就收到了强制回收的邮件... 国内企业果然不可信)。

缺点:

  • 七牛免费服务真心不靠谱,国外访问巨卡,导致我日常在墙外浏览自己博客都特别慢。
  • 管理起来同样不方便,备份也不方便。对于我这个洁癖强迫症来说,有多余 Dangling 的文件存在简直不可饶恕。
  • 数据放在国内的第三方服务,说不定哪天有什么违规被查水表,方。

后期

更换为 Hexo 后,一直在用大佬的图床:sm.ms

直到近期,写博客时截图完毕想要上传,却偶然发现图床页面提示:维护升级中,请稍后访问。

接下来大约一整天左右,一直处于无法上传的状态。用过各种免费图床网盘的我不禁内心一紧:难不成,又是要凉了?于是赶紧把之前上传的所有图片统统排查一遍,发现只有极个别图片出现 404。

缺点:

  • 如上文所说,免费图床不存在 SLA,可靠性未知,虽然 sm.ms 大佬已经撑了很久,也相对比较靠谱,但还是不放心。
  • 每次截图完毕还需要上传,麻烦。

虽然目前基本未受到影响,但却让我忽然警醒 —— 或许是时候尝试一下不使用外部图床了。

方案

基本思路如下,大致分为两部分:

存储(Git-LFS)

根据以上问题,首先需要解决的就是如何存储。直接保存在 Git Repo 内肯定不合适。Git 无法 Diff 二进制文件,如果在博客更新和重构过程中优化、修改、移动这些图片文件,那对于 Git 仓库来说将是「爆炸性」的,你会看到仓库大小成倍增长,CI/CD 执行 Clone 和 Build 时会严重拖慢速度。虽然有方法可 后期清理,但我并不喜欢这种怪异的折中方案,除非仓库已经被二进制文件「污染」。

针对这个问题,Git-LFS 是个不错的解决方案。它是一个 Git 插件,是由 GitHub 而非 Git 官方推出,尽管官网风格的确很像?。

该项目的基本原理很简单,在本地 Git 上安装一系列 Hooks,通过钩子「拦截」各类操作,例如 Push / Pull / Checkout。在执行这些操作时,自动从 Git-LFS 服务器下载由其管理的二进制文件。

在真正的 Git 仓库内,实际上只保留该二进制文件的哈希等数据。而实实在在的文件数据存储在 Git-LFS 服务器内,在需要的时候才下载。这样既节省仓库的存储空间,另一方面也能节省你的时间和带宽。

安装使用极其简单,以 macOS 为例:

brew install git-lfs
git lfs install # 安装 Hooks
cd your-repo

告知 LFS 追踪某些文件,可使用类似 .gitignore 文件内的 glob 语法,以 *.png 为例:

git lfs track "*.png"

以上命令会创建 .gitattributes 文件,不要删除它,并确保提交到仓库内。

好了,接下来正常执行其它 Git 操作即可。Push 到 GitHub 后,在 Web 页面打开你的文件,可看到以下字样:

Stored with Git LFS

说明文件已经被 Git-LFS 接管并存储啦。

最后,需要注意一点:由于 Git-LFS 是一个「第三方标准与实现」,故并不是所有 Git 服务都支持 LFS 存储。

新增(Shell 脚本)

我平时使用 macOS 自带的 Screenshot 工具,与多数截图工具类似,它可以将图片存储至剪贴板。那么,如何快速将剪贴板内的图片输出为文件,且按照一定格式组织文件名呢?这需要一点小技巧。

推荐一个名为 jcsalterego/pngpaste 的小工具,顾名思义,它就像 macOS 下的 pbpaste 一样,可以在终端快速读取剪贴板并导出,正如在项目首页上描述的那样:

Paste PNG into files, much like pbpaste does for text.

接下来,我需要一个「小脚本」,进行一点包装工作,我将它保存为 ./image.sh. 为 Hexo 博客的根目录,下同。

#!/bin/bash -eu

dir=$(dirname $0) # 该脚本所在目录,用于定位图片存储路径,可替换为其它
tmp_file=$(mktemp) # 生成临时文件路径

pngpaste $tmp_file # 将剪贴板图片保存至临时文件

hash=$(md5 < $tmp_file) # 计算图片的哈希值,用于唯一文件名
img="/resources/$hash.png" # 拼接图片 URI

mv $tmp_file "$dir/source$img" # 将临时文件移动为最终图片文件
echo "![]($img)" | tee >(pbcopy) # 生成 Markdown 格式的图片链接,输出至 STDOUT 同时写入剪贴板

搞定。此处不采用拼接时间或随机字符串,而是哈希值作为文件名的原因,是为了保证幂等性。

最终效果为,截图软件截屏,终端内运行 ./image.sh 即可将剪贴板内的图片保存为 ./source/resources/$hash.png,简单到几乎不能再简单。

完美解决 Git 仓库大小问题、上传麻烦问题;最重要的是,图片管理与本地文件操作无异(实际就是在操作本地文件?),无缝使用各类命令或 GUI。

我感谢自己平凡,敢爱敢恨没负担。
我感谢自己不凡,可爱可恨都包揽。

讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!