如何在GitHub Pages中隐藏API密钥？

首先明确两个核心事实：

• GitHub Pages是纯静态站点托管服务，没有服务器端运行环境，因此不支持读取.env文件或服务器端环境变量。
• 前端代码（包括打包后的静态文件）完全暴露给浏览器，任何直接写在前端的密钥都会被用户轻易获取，不管你怎么“隐藏”。

可行的解决方案 #

1. 替换为前端安全的令牌 #

如果你的CMS支持，生成一个前端专用的只读令牌/公钥，限制其权限为仅能访问公开内容、无法修改数据。这种令牌即使被公开，也不会造成安全风险，可直接写在代码里或通过构建注入。

2. 用GitHub Actions注入构建时变量（仅适用于非敏感令牌） #

如果必须在构建时使用变量，可借助GitHub Actions完成构建，步骤如下：

• 在仓库的「Settings → Secrets and variables → Actions」中添加你的密钥，命名为CMS_API_KEY之类的标识。
• 创建一个GitHub Actions工作流文件（比如.github/workflows/deploy.yml），在构建步骤中注入该密钥：

  jobs:
    deploy:
      runs-on: ubuntu-latest
      steps:
        - uses: actions/checkout@v4
        - name: Setup Node.js
          uses: actions/setup-node@v4
          with:
            node-version: '20'
        - name: Install dependencies
          run: npm install
        - name: Build with env variable
          run: npm run build
          env:
            CMS_API_KEY: ${{ secrets.CMS_API_KEY }}
        - name: Deploy to GitHub Pages
          uses: peaceiris/actions-gh-pages@v4
          with:
            github_token: ${{ secrets.GITHUB_TOKEN }}
            publish_dir: ./dist
  

• 确保你的构建工具（如Vite、Webpack）能读取环境变量并替换代码中的占位符，最终打包后的静态文件中如果包含的是低权限令牌，可安全部署。

3. 中间层代理（最安全的敏感密钥方案） #

对于需要保密的高权限密钥，绝对不能让前端接触到，可通过以下方式实现：

• 搭建一个简单的后端代理接口（比如使用Cloudflare Workers、Vercel Edge Functions等免费无服务器服务），将敏感密钥存储在后端环境变量中。
• 前端请求你的代理接口，由后端代为调用CMS的API，再将结果返回给前端。
• 这种方式下，密钥完全保存在后端，前端仅能访问代理接口，不会接触到敏感信息。

关于.gitignore的误区 #

.gitignore只是阻止.env文件被提交到仓库，但无法解决GitHub Pages无法读取环境变量的问题，更不能保护写在前端代码中的密钥。如果你的代码依赖.env中的变量，而GitHub Pages构建时没有该变量，会导致构建失败或前端报错。

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