嘿，我之前帮朋友搞定过一模一样的需求，核心要搞清楚：GitHub Secrets是没法直接在前端运行时拿到的——毕竟前端代码最终是要下载到用户浏览器里的，Secrets只存在GitHub的服务器端。所以咱们得换个思路：在GitHub Actions的构建阶段，把密钥注入到JS代码里，生成包含密钥的生产文件后再部署到Pages。

下面是具体的实操步骤：

1. 把你的JS代码改成模板形式 #

先把原来JS里写死的API密钥换成一个显眼的占位符，比如{{OPENWEATHERMAP_API_KEY}}。举个例子，你可以把原来的weather.js改名为weather.template.js，内容改成这样：

// weather.template.js - 这是模板文件，不要直接引用它
const API_KEY = "{{OPENWEATHERMAP_API_KEY}}";

async function getWeather(cityName) {
  const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${cityName}&appid=${API_KEY}&units=metric`;
  try {
    const response = await fetch(apiUrl);
    const weatherData = await response.json();
    // 这里写你的天气数据渲染逻辑
    console.log(weatherData);
  } catch (err) {
    console.error("获取天气失败:", err);
  }
}

2. 在GitHub仓库中添加API密钥到Secrets #

• 打开你的GitHub仓库，点击顶部的「Settings」选项卡
• 左侧菜单找到「Secrets and variables」>「Actions」
• 点击「New repository secret」，名称填OPENWEATHERMAP_API_KEY，值就填你的OpenWeatherMap密钥，最后保存就行

3. 编写GitHub Actions部署工作流 #

在仓库根目录创建.github/workflows文件夹（如果没有的话），然后在里面新建一个deploy.yml文件，内容如下：

name: 部署到GitHub Pages

on:
  push:
    branches: [ main ] # 替换成你的主分支名称，比如master

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      # 第一步：拉取仓库代码
      - name: 拉取代码
        uses: actions/checkout@v4

      # 第二步：把Secrets里的密钥替换模板里的占位符，生成最终的weather.js
      - name: 注入API密钥
        run: |
          sed -e "s/{{OPENWEATHERMAP_API_KEY}}/${{ secrets.OPENWEATHERMAP_API_KEY }}/g" weather.template.js > weather.js

      # 第三步：部署到GitHub Pages
      - name: 部署到Pages
        uses: peaceiris/actions-gh-pages@v4
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./ # 如果你的静态文件都在根目录就用这个，要是打包到dist文件夹就填./dist

4. 调整HTML的脚本引用 #

确保你的HTML里引用的是生成后的weather.js，而不是模板文件：

<!-- index.html -->
<script src="weather.js"></script>

重要提醒 #

• 一定要把生成的weather.js加到.gitignore文件里，别把它提交到仓库！不然密钥就直接泄露了。.gitignore里加一行：weather.js
• 另外，说句实话：前端项目里的API密钥本来就没法完全隐藏——用户只要打开浏览器的开发者工具就能看到。如果你的密钥涉及敏感权限或者需要严格保密，最好的办法是搭一个简单的后端代理：前端请求你的后端接口，后端用密钥去调用OpenWeatherMap的API，再把结果返回给前端。不过对于个人小项目来说，上面的方案完全够用啦。

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