如何通过JS表单提交触发git commit并将提交数据写入GitHub提交说明？

静态站点前端代码运行在用户浏览器侧，本身没有git执行环境，也无法直接获得你的GitHub仓库操作权限，因此无法直接触发git commit，必须通过「前端提交表单数据到服务端接口 → 接口调用GitHub API执行提交」的链路实现，以下是适配你当前技术栈的完整方案：

第一步：创建Render Serverless接口 #

你使用的Render平台原生支持Serverless函数，无需额外搭建后端服务：

1. 在你的静态站项目根目录创建api文件夹
2. 安装GitHub操作依赖：npm install @octokit/rest
3. 在api文件夹下新建commit.js作为提交接口

第二步：接口逻辑示例 #

const { Octokit } = require("@octokit/rest");

module.exports = async (req, res) => {
  // 配置跨域，替换为你自己的静态站域名即可限制调用来源
  res.setHeader('Access-Control-Allow-Origin', '你的静态站域名');
  res.setHeader('Access-Control-Allow-Methods', 'POST, OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');

  if (req.method === 'OPTIONS') return res.status(200).end();
  if (req.method !== 'POST') return res.status(405).json({ error: '仅支持POST请求' });

  try {
    const formData = req.body;
    // 构造commit描述，可自定义格式拼接表单字段
    const commitMessage = `用户表单提交：${JSON.stringify(formData, null, 2)}`;

    const octokit = new Octokit({ auth: process.env.GITHUB_PAT });
    const owner = '你的GitHub用户名';
    const repo = '你的目标仓库名';
    const branch = 'main'; // 替换为你要提交的分支名
    const filePath = 'data/submissions.json'; // 用来存储提交记录的文件路径

    // 获取当前分支最新commit信息
    const { data: refData } = await octokit.git.getRef({
      owner,
      repo,
      ref: `heads/${branch}`,
    });

    // 读取现有提交记录文件内容
    const { data: fileData } = await octokit.repos.getContent({
      owner,
      repo,
      path: filePath,
      ref: branch,
    });
    const currentContent = Buffer.from(fileData.content, 'base64').toString('utf8');
    const submissions = JSON.parse(currentContent);
    // 追加新的表单提交数据
    submissions.push({
      ...formData,
      submitTime: new Date().toISOString()
    });
    const newContent = Buffer.from(JSON.stringify(submissions, null, 2)).toString('base64');

    // 执行提交到GitHub
    await octokit.repos.createOrUpdateFileContents({
      owner,
      repo,
      path: filePath,
      message: commitMessage,
      content: newContent,
      sha: fileData.sha,
      branch: branch,
    });

    return res.status(200).json({ success: true, message: '提交成功' });
  } catch (err) {
    console.error(err);
    return res.status(500).json({ error: '提交失败', detail: err.message });
  }
};

第三步：前端表单提交逻辑（适配Bootstrap 5） #

// 替换为你实际的表单ID
const submitForm = document.getElementById('dataSubmitForm');
submitForm.addEventListener('submit', async (e) => {
  e.preventDefault();
  // 收集表单数据
  const formData = new FormData(submitForm);
  const postData = Object.fromEntries(formData.entries());

  try {
    const resp = await fetch('/api/commit', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(postData)
    });
    const result = await resp.json();
    if (result.success) {
      // 可替换为Bootstrap Toast提示
      alert('提交成功');
      submitForm.reset();
    } else {
      throw new Error(result.error);
    }
  } catch (err) {
    alert(`提交失败：${err.message}`);
  }
});

注意事项 #

• 需提前在GitHub对应仓库中创建data/submissions.json文件，初始内容写[]即可
• GitHub个人访问令牌（PAT）不要硬编码到代码中，需配置到Render的环境变量中，变量名设置为GITHUB_PAT，权限只需勾选repo的读写权限
• 可在接口中增加调用频率校验、参数校验逻辑，避免被恶意调用刷仓库提交
• 如不需要留存表单数据，可每次修改仓库内一个占位文件的内容（比如增加一个换行符）即可触发commit，无需专门存储提交记录

内容的提问来源于stack exchange，提问作者AZ Software