GitHub Pages中使用GitHub Actions的环境变量

张沉 11/11/2024 Actions

GitHub Pages 本身并不直接支持在 HTML 页面中访问 GitHub Actions 或 GitHub Repository 的环境变量。然而，你可以通过一些间接的方法来实现这一目标。以下是一些常见的方法：

# 方法一：使用 GitHub Actions 生成静态文件

你可以使用 GitHub Actions 在构建过程中将环境变量写入到静态文件中，然后在 HTML 页面中读取这些文件。

# 1. 创建 GitHub Action 工作流

在你的仓库中创建一个 GitHub Actions 工作流文件，例如 .github/workflows/build.yml：

name: Build and Deploy

on:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout repository
      uses: actions/checkout@v2

    - name: Set environment variables
      run: |
        echo "const env = { GITHUB_VAR: '${{ secrets.GITHUB_VAR }}' };" > .vuepress/public/env.js

    - name: Build and deploy
      run: |
        npm ci
        npm run build
        npm run deploy

在这个工作流中，我们使用 echo 命令将环境变量写入到一个 JavaScript 文件中，例如 env.js。

# 2. 在 HTML 页面中引用生成的文件

在你的 HTML 页面中引用生成的 env.js 文件，并使用其中的变量：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My GitHub Pages</title>
  <script src="/env.js"></script>
</head>
<body>
  <h1>My GitHub Pages</h1>
  <p>GITHUB_VAR: <span id="github-var"></span></p>

  <script>
    document.getElementById('github-var').innerText = env.GITHUB_VAR;
  </script>
</body>
</html>

# 方法二：使用 JSON 文件

你也可以将环境变量写入到一个 JSON 文件中，然后在 HTML 页面中通过 AJAX 请求读取这个 JSON 文件。

# 1. 创建 GitHub Action 工作流

在你的仓库中创建一个 GitHub Actions 工作流文件，例如 .github/workflows/build.yml：

name: Build and Deploy

on:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout repository
      uses: actions/checkout@v2

    - name: Set environment variables
      run: |
        echo '{ "GITHUB_VAR": "${{ secrets.GITHUB_VAR }}" }' > .vuepress/public/env.json

    - name: Build and deploy
      run: |
        npm ci
        npm run build
        npm run deploy

在这个工作流中，我们使用 echo 命令将环境变量写入到一个 JSON 文件中，例如 env.json。

# 2. 在 HTML 页面中读取 JSON 文件

在你的 HTML 页面中使用 AJAX 请求读取生成的 env.json 文件，并使用其中的变量：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My GitHub Pages</title>
</head>
<body>
  <h1>My GitHub Pages</h1>
  <p>GITHUB_VAR: <span id="github-var"></span></p>

  <script>
    fetch('/env.json')
      .then(response => response.json())
      .then(data => {
        document.getElementById('github-var').innerText = data.GITHUB_VAR;
      })
      .catch(error => {
        console.error('Error fetching the env.json file:', error);
      });
  </script>
</body>
</html>

# 方法三：使用服务器端渲染

如果你使用的是服务器端渲染（SSR）技术，可以在服务器端动态生成 HTML 文件时将环境变量嵌入到 HTML 中。这通常适用于使用框架（如 Next.js、Nuxt.js 等）的项目。

# 总结

通过上述方法，你可以在 GitHub Pages 的 HTML 页面中访问 GitHub 配置的变量。选择适合你项目的方法进行实现。希望这些信息对你有所帮助！

记沉

Choose mode