如何在GitHub Pages静态HTML网站页脚显示当前Git HEAD？

这里有几个实用方案可以破解这个“鸡生蛋”困境：

方案1：利用GitHub Actions部署时动态生成版本信息 #

这是最推荐的方式，完全不需要手动干预提交流程：

• 在仓库根目录创建.github/workflows/deploy.yml工作流文件
• 流程核心步骤如下：
  1. 用actions/checkout动作检出当前代码（默认就能获取到当前HEAD的完整信息）
  2. 执行命令生成包含HEAD哈希的文件，或直接替换页面中的占位符：

     # 生成存短哈希的文本文件，供JS读取
     git rev-parse --short HEAD > static/version.txt
     # 或者直接替换HTML页脚里的版本占位符
     sed -i "s/{{COMMIT_HASH}}/$(git rev-parse --short HEAD)/" index.html
     

  3. 用官方actions/deploy-pages动作把处理后的代码部署到GitHub Pages
     这样部署到Pages的代码里已经包含了当前提交的正确HEAD信息，不会出现版本滞后。

方案2：用Git预提交钩子自动生成并提交版本文件 #

如果习惯手动提交代码，可以通过钩子自动处理：

• 在仓库的.git/hooks目录下创建pre-commit文件（去掉原有.sample后缀），写入：

  #!/bin/sh
  # 生成包含当前短哈希的版本文件
  git rev-parse --short HEAD > version.txt
  # 将版本文件加入暂存区，确保和代码一起提交
  git add version.txt
  

• 给钩子文件添加执行权限：chmod +x .git/hooks/pre-commit
  之后每次执行git commit时，钩子会自动生成最新的HEAD文件并加入提交，提交后的代码里就包含了正确的版本信息，部署到Pages后显示的就是当前提交的版本。

方案3：调用GitHub API获取最新版本（不推荐） #

这个方法依赖外部请求，存在CORS、限流和版本不匹配的问题，仅作为备选：

• 用JavaScript发起请求获取仓库最新commit：

  fetch('/repos/[你的用户名]/[你的仓库名]/commits/main')
    .then(res => res.json())
    .then(data => {
      document.getElementById('footer-version').textContent = `Commit: ${data.sha.slice(0,7)}`;
    });
  

但这里获取的是仓库最新提交的版本，不一定和当前部署到Pages的代码版本一致，可靠性不如前两个方案。

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