banner
老孙

老孙博客

资深网民孙先生
mastodon
email

使用Github Action自動生成靜態相冊

前言#

使用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. 根據圖片名稱自動生成標題
  • 更新
    2024.12.29
    又找了一個模板,自己覺得還可以
    加了進去
    在 workflow 裡設置需要執行的腳本
    兩個腳本 分別為 times.pylens.py 對應著兩個模板

演示地址#

lens 模板 https://photo.asbid.cn
times 模板 https://photo.sgcd.net

部署在 Github Pages

使用#

項目模板#

自动化生成相册Automatically generate photo albums

設置#

在自己倉庫的Settings中找到

指示

TOKEN為你的 Github token

REPO為你想要生成相冊的倉庫名稱 如username/repo

設置

上傳規則#

相冊內容上傳到 photos 這個目錄下

photos 根目錄下的照片默認標題為分享生活

新建文件夾,該文件夾名稱為此目錄下所有圖片的標題

  • 照片同名 txt 中的文本為描述說明 最高優先級
    1.jpg 1.txt 則使用1.txt中的文本為描述說明

  • 目錄下描述.txt為此目錄下所有圖片的描述說明 第二優先級

  • 如果兩者都沒有則使用照片文件名為描述說明

其他部分#

可以根據需求修改 template目錄下對應模板的index.html文件 中的佈局和內容.

每次修改倉庫會自動觸發 Action 生成 HTML 到目標倉庫,目標倉庫可以使用Github Pages, 也可以部署在 Vercel, 這裡就不多做說明

演示#

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

載入中......
此文章數據所有權由區塊鏈加密技術和智能合約保障僅歸創作者所有。