使用Github Action自动生成静态相册

发表于 分类于 阅读次数： 评论数：
这篇文章介绍了如何利用AI和Github等技术构建一个相册系统。作者通过Python编写主要代码，使用Github仓库存储图片，并触发Actions自动生成HTML页面。相册的缩略图会压缩以减轻服务器压力，点击后可显示原图。图片标题根据文件名自动生成，描述信息则通过txt文件提供。系统部署在Github Pages和Vercel上，支持多地访问。作者还分享了模板和设置方法，展示了如何使用Cloudflare、Vercel等免费服务进行多地备份。

前言

使用memos调用的相册虽然方便,但是也有一些痛点无法解决

  1. 在CDN被刷流量之后,我已经几乎关闭所有的国内CDN服务,小水管服务器也无法满足大量图片同时加载,那龟速谁用谁知道.
  2. S3存储太贵,在COS被刷了流量之后(没错,我就是这么倒霉),我决定多地备份,主要上传在github,利用Cloudflare+ vercel+github pages+ 其他SaaS. 这些服务的优点就是免费.
  3. 模板来源于网络

Deepseek

主要使用AI来解决主要功能代码,主打一个能用就行.至于有什么bug,一个简单的网页生成 能有什么逆天bug也没关系的….吧
主要代码是 Python

功能

我想要的功能

  1. 上传图片到Github 仓库,触发 Actions 自动生成Html页面
  2. 相册的缩略图需要压缩,点击显示原图,缓解小水管压力(没错,我会定时使用git拉取到国内服务器,主打一个多地都能访问)
  3. 根据图片名称自动生成标题

演示地址

https://blog.0tz.top/photos
部署在Github Pages

使用

使用模板

https://github.com/jkjoy/generate-albums

设置

在自己仓库的Settings中找到

指示

TOKEN为你的 Github token

REPO为你想要生成相册的仓库名称 如username/repo

设置

上传规则

相册内容上传到 photos 这个目录下

photos 根目录下的照片默认标题为分享生活

新建文件夹, 该文件夹名称为此目录下所有图片的标题

  • 照片同名txt中的文本为描述说明 最高优先级
    如 1.jpg 1.txt 则使用1.txt中的文本为描述说明

  • 目录下描述.txt为此目录下所有图片的描述说明 第二优先级

  • 如果两者都没有则使用照片文件名为描述说明

其他部分

可以根据需求修改 template.html 中的布局和内容

每次修改仓库会自动触发Action 生成HTML到目标仓库,目标仓库可以使用Github Pages,也可以部署在Vercel,这里就不多做说明

演示

https://photos-jkjkjoy.vercel.app/

总结

AI真好用!!