搭建支持用户提交更新的照片库网站的技术路径咨询

背景情况 #

我正在搭建一个展示祖父照片的网站，核心需求是支持他人提交照片并查看所有上传的照片。目前在InfinityFree和GitHub Pages都部署了网站，但遇到了服务器端功能的瓶颈：

• InfinityFree有易用的网页编辑平台，但不支持Node.js等后端环境，无法实现文件提交、存储和展示的服务器端逻辑
• 迁移到GitHub Pages后，仅能实现静态页面功能，当前代码仅能完成本地预览用户选择的图片，无法实现上传到公共存储和展示所有照片的核心需求

当前代码：

<!doctype html>
<html>
<head>
    <div class="header">
        <h1>Welcome!</h1>
        <p>Here is a site to view and submit photos of _________</p>
    </div>
    
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <style>
    body {
        font-family: Arial;
        margin: 0;
    }
        
    .header {
        padding: 70px;
        text-align: center;
        background: #663399;
        color: white;
        position: relative;
        top: -35px;
    }
            
    .header h1 {
        font-size: 65px;
        margin-top: 0;
        position: relative;
        top: 0px;
    }
    
    .header p {font-size: 25px;}

    .content {padding:20px;}
    </style>
</head>
    
<body>
    <script>
    function handleImageUpload() 
    {
        var image = document.getElementById("upload").files[0];
        var reader = new FileReader();
        reader.onload = function(e) {
        document.getElementById("display-image").src = e.target.result;
        }
        reader.readAsDataURL(image);
    } 
    </script>
    
    <input type="file" onchange="handleImageUpload()" id="upload" multiple />
    <img id="display-image" src="#" alt="your image" />

</body>
</html>

可行技术路线推荐 #

1. 静态页面 + 第三方无后端存储服务 #

无需自建后端，直接通过前端调用第三方服务完成存储与数据同步：

• 选择支持前端直传的对象存储服务，上传图片后获取公开访问URL
• 借助GitHub API，将图片URL追加到仓库内的photos.json文件中
• 页面加载时，读取该JSON文件的所有URL，渲染成相册展示
• 优势：零后端维护成本，完美适配GitHub Pages等静态站点环境

2. 免费后端平台 + 存储服务 #

搭配免费后端平台实现完整的上传逻辑：

• 选用支持Node.js免费部署的平台，编写简单的上传接口，接收前端文件后转存到对象存储服务
• 用免费轻量数据库存储所有图片的URL信息
• 前端通过GET请求从后端接口获取图片列表，完成展示
• 优势：逻辑架构清晰，便于后续扩展评论、审核等功能

3. 基于GitHub生态的纯静态方案 #

完全依托GitHub现有功能实现，零额外成本：

• 引导用户通过仓库Issue提交照片（直接上传附件或粘贴Base64编码）
• 页面通过GitHub API读取仓库Issue列表，提取其中的图片链接进行展示
• 优势：无需任何额外服务，适合上传量不大的个人项目场景

代码扩展示例（路线1前端部分） #

在现有本地预览代码基础上，添加上传与数据更新逻辑：

async function handleImageUpload() {
  const fileInput = document.getElementById("upload");
  const files = fileInput.files;
  if (!files.length) return;

  // 保留本地预览逻辑
  const reader = new FileReader();
  reader.onload = (e) => {
    document.getElementById("display-image").src = e.target.result;
  };
  reader.readAsDataURL(files[0]);

  // 替换为对应存储服务的上传逻辑，获取图片公开URL
  const imageUrl = await uploadToStorage(files[0]);
  
  // 调用GitHub API更新仓库中的photos.json文件
  await updatePhotosJson(imageUrl);
}

内容的提问来源于stack exchange，提问作者Zane Brown