Logo 印记

Live a life you will remember.

青山

君子可内敛不可懦弱,面不公可起而论之。

玩物志 2 分钟阅读

展示照片的好地方

展示照片的好地方 - 第1张图片

缘起

我见过许多可以上传照片,将其作为作品展示的平台,比如小红书、Instagram、抖音,再或者是图虫,或者是国外的 Unsplash 等平台。或许和写博客一样,内心有一股执念,数据只有掌握在自己手里才安全,紧接着便开始搜索各种可自部署的图片展示服务。

过去使用 Typecho 搭配立云图志的 Snapic Plus 主题,折腾了一段时间,最近又因为拾一的 Afilmory 项目,勾起自己的折腾兴趣,尝试了许多次,终究因为它缺少后台管理功能,无法直接在后台添加新的照片,需要在存储端进行增加,较为繁琐。最近找到另一款类似的项目——ChronoFrame,外观、功能大差不差,最重要的是有 dashboard,随时随地登录后台添加新照片,极其方便。

ChronoFrame

相比较 Afilmory,ChronoFrame 的部署也更简单利落,熟悉 Docker 则非常容易上手。提供 Docker 和 Docker Compose 两种形式,这里将自己的过程记录下来,方便以后继续使用。

我在服务器上安装了 1panel,新建文件夹,命名“photo”,然后新建文件,命名为 .env,在文件里填入下列信息:

# Admin user email (required)
CFRAME_ADMIN_EMAIL=
# Admin user name (required)
CFRAME_ADMIN_NAME=
# Admin user password (required)
CFRAME_ADMIN_PASSWORD=

# 应用标题与口号
NUXT_PUBLIC_APP_TITLE=
NUXT_PUBLIC_APP_SLOGAN=
NUXT_PUBLIC_APP_AUTHOR=
NUXT_PUBLIC_APP_AVATAR_URL=

# Mapbox Token
NUXT_PUBLIC_MAPBOX_ACCESS_TOKEN=

# 存储提供者(s3/github/local)(required)
NUXT_STORAGE_PROVIDER=s3
# S3 存储服务配置(required)
NUXT_PROVIDER_S3_ENDPOINT=
NUXT_PROVIDER_S3_BUCKET=chronoframe
NUXT_PROVIDER_S3_REGION=auto
NUXT_PROVIDER_S3_ACCESS_KEY_ID=
NUXT_PROVIDER_S3_SECRET_ACCESS_KEY=
NUXT_PROVIDER_S3_PREFIX=photos/
NUXT_PROVIDER_S3_CDN_URL=

# 会话密码(32 位随机字符串,必须设置)(required)
NUXT_SESSION_PASSWORD=

# GitHub OAuth
NUXT_OAUTH_GITHUB_CLIENT_ID=
NUXT_OAUTH_GITHUB_CLIENT_SECRET=

备注 required 的则是必填项,最上面是登录邮箱和密码,接着是网站标题和描述、头像地址等,如果照片上存有地点信息,则可以申请 Mapbox 的 Token 一并部署,网站上就可以显示相应的地理信息;最主要的是存储提供者,目前仅支持 S3 协议,比如缤纷云、阿里云 OSS、腾讯云 COS,都可以使用,难点在于存储桶的相关信息要填写正确。

另外还需要创建 docker-compose.yml 文件,填入下列信息:

services:
  chronoframe:
    image: ghcr.io/hoshinosuzumi/chronoframe:latest
    container_name: chronoframe
    restart: unless-stopped
    ports:
      - '3000:3000'
    volumes:
      - ./data:/app/data
    env_file:
      - .env

最后一步,启动命令:

docker-compose up -d

这是我部署的:

https://fade.im

展示照片的好地方 - 第2张图片

这是陈仓颉部署的:

https://photo.imzm.org

展示照片的好地方 - 第3张图片

他一开始部署没成功,气得红温,最后还是折腾成功了。

展示照片的好地方 - 第4张图片

后话

部署完这个服务之后,上传了一些自认为还不错的照片,然后呢,内心又陷入一阵空虚。照片没拍几张,却一心想着如何展示,你拍得很好吗?其实也一般,但只要自己喜欢,就足够了。

最后,问一下小孙,你的 Camlife 进展如何。

20

  1. 目前仅支持 S3 协议,比如缤纷云、阿里云 OSS、腾讯云 COS,都可以使用
    ————–
    这种图墙应用千万别部署在对象存储里,我看单张照片都是3、4M,每天的流量肯定会很大,就是自己每天打开一次都会消耗流量,国内这几家平台赠送的流量是不够的,照片越多越费钱。如果一定要部署在对象存储里,可以考虑赛博菩萨cloudflare

    河北
    Google Chrome 140 · Mac OS X 10.15 · 河北
  2. 好像看起来不错的样子,支持 livephoto 吗?

    比利时
    Safari 26 · Mac OS X 10.15 · 比利时
  3. 好东西呀,我也去搞一个

    湖北
    Google Chrome 140 · Windows 10 · 湖北
  4. 好东西,我也去研究一个

    香港
    Firefox 143 · Windows 10 · 香港
    1. @Soulizer等你的网站。

      美国
      Google Chrome 140 · Mac OS X 10.15 · 美国
      1. @青山搞定。https://eachphoto.com/

        香港
        Firefox 143 · Windows 10 · 香港
        1. @Soulizer天才。

          美国
          Google Chrome 141 · Mac OS X 10.15 · 美国
  5. 之前部署过一个项目piwigo,挺适合摄影作品的。

    河南
    Microsoft Edge 139 · Windows 10 · 河南
  6. 逼格很高,👍

    香港
    Google Chrome 134 · Windows 10 · 香港
  7. 我也想去整一个了

    河南
    Google Chrome 140 · GNU/Linux · 河南
    1. @老刘我等你的网站。

      美国
      Google Chrome 140 · Mac OS X 10.15 · 美国
  8. 我这虚拟主机,不然我肯定也是要折腾的。

    天津
    Safari 18 · iPhone iOS 18.6.2 · 天津
  9. 搞的我也想折腾了。

    美国
    Microsoft Edge 140 · Windows 10 · 美国
    1. @老张博客好,等你的网站。

      美国
      Google Chrome 140 · Mac OS X 10.15 · 美国
  10. 好有缘分呐!时隔这么久没想到你换域名换名字我还是猜到是你了,青山绿水???

    香港
    Google Chrome 140 · Windows 10 · 香港
    1. @依然说是的。你是哪位?

      美国
      Google Chrome 140 · Mac OS X 10.15 · 美国
      1. @青山曾经的看过你博客的一个网友而已

        美国
        Google Chrome 140 · Windows 10 · 美国