Github Actions - Updating an HTML File

Question

I have a static website that I am deploying with Github Actions. The website consists of 1 HTML file and several .yaml config files. There is a simple javascript function that loads all the .yaml files. However, currently the list of .yaml files is hardcoded. Is there anyway to either:

1. Use Github Actions to update the javascript array before deploying the website?
2. Use javascript to dynamically create the list based on the files in the config directory?

Directory structure

index.html
config/
|-- first.yaml
|-- second.yaml
|-- ...

index.html

...
<script>
// how can we dynamically create this array?
var files = [
  {"name": "first.yaml"},
  {"name": "second.yaml"},
  ...
]
</script>

Answer 1

Use this: bluwy/substitute-string-action@v1

Here is an example:

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: bluwy/substitute-string-action@v1
      id: sub
      with:
        _input-text: 'Hello World!'
        World: GitHub

Url to the action with the full docs: https://github.com/bluwy/substitute-string-action

https://i.stack.imgur.com/3wWvp.jpg

Answer 2

I put together solution from previous answer so you can imagine it better.

The workflow first go through yaml files in config directory and prints them as a string of: "config1.yaml", "config2.yaml"

Then uses mentioned bluwy/substitute-string-action@v1 action to replace it in index.html file.

It is a raw solution just to showcase how you can approach this issue. Real life solution should be more complex.

You can checkout "Run cat index.html" step in my test action

index.html

<script type="text/javascript">
  var files = [%%files%%]
</script>

Workflow:

jobs:
  get_config:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2

      - name: Get files from config folder
        id: dir
        run: echo "::set-output name=files::$(ls -m config | sed -r 's/([a-z0-9]+\.ya?ml)/"\1"/gi')"

      - name: Replace file in index.html
        uses: bluwy/substitute-string-action@v1
        with:
          _input-file: 'index.html'
          _output-file: 'index.html'
          _format-key: '%%key%%'
          files: ${{ steps.dir.outputs.files }}