Github Actions - Updating an HTML File

user_12821675 0
Viewed 504

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>
github-actions github yaml javascript
2 Answers
user_63548120

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 }}
user_178486710
Related