Github Actions部署静态站点时如何动态生成yaml配置文件列表

两个需求都可以实现，以下是具体的实现方法：

方法一：使用Github Actions在部署阶段自动更新数组 #

这个方案不需要修改前端代码逻辑，也不依赖服务器配置，运行性能和稳定性最好，更推荐使用。

• 首先在index.html的对应代码位置加注释占位符，避免后续替换时匹配出错，修改后的代码片段如下：

<script>
// CONFIG_FILES_START
var files = [
  {"name": "first.yaml"},
  {"name": "second.yaml"},
  ...
]
// CONFIG_FILES_END
</script>

• 然后在你的Github Actions部署工作流中，部署步骤之前新增一个生成配置数组的步骤，示例工作流代码如下：

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: 检出代码
        uses: actions/checkout@v4
      # 新增的生成配置数组步骤
      - name: 自动更新配置文件列表
        run: |
          # 读取config目录下所有.yaml文件，生成符合格式的JSON数组
          FILES_ARRAY=$(cd config && ls *.yaml | jq -R -s -c 'split("\n")[:-1] | map({"name": .})')
          # 替换占位符之间的代码为新的数组
          sed -i "/CONFIG_FILES_START/,/CONFIG_FILES_END/c\\// CONFIG_FILES_START\nvar files = $FILES_ARRAY\n// CONFIG_FILES_END" index.html
      # 后续接你原有的部署步骤
      # - name: 部署到xxx
      # ...

注：Ubuntu系统的Github Actions运行环境默认已经预装jq工具，无需额外安装。

方法二：纯前端JavaScript动态生成文件列表 #

这个方案不需要修改构建流程，但是依赖服务器配置，适合临时调试场景使用。
如果你的静态服务器开启了config目录的浏览权限，可以直接用以下JS代码提取文件列表：

fetch('./config/')
  .then(res => res.text())
  .then(html => {
    // 解析服务器返回的目录页HTML
    const doc = new DOMParser().parseFromString(html, 'text/html')
    // 提取所有后缀为.yaml的文件名
    const files = Array.from(doc.querySelectorAll('a'))
      .map(link => link.getAttribute('href'))
      .filter(filename => filename.endsWith('.yaml'))
      .map(filename => ({ name: filename }))
    // 在这里使用生成的files数组即可
  })

如果服务器没有开启目录浏览权限，你也可以在部署时在config目录下生成一个list.json文件（这个操作同样可以放在Github Actions中完成），内容就是所有yaml文件的数组，前端直接请求这个list.json即可获取完整的文件列表，比直接修改index.html更解耦。

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