EricFr@nkenberger.com

HOME   RESUME/CONTACT   GITHUB

[05-09-2022] | Github Actions - HTML formatting


TL;DR - I wanted to experiment with github actions, so the HTML files on this site are now autoformatted on git commit by my html_tidy action.

At work, we use Bitbucket for Git and Jenkins for automation. I'm interested in checking out Github Actions for a couple things to organize this site:

As with the other projects I've done - this is to learn, rather than to complete a goal with maximal efficiency. File formatters cause issues with code, and modification of working code after a commit can lead to errors. Who cares. I want to learn Github Actions and this website is a sandbox.

Getting Started

Starting off, the index.html of this site copy/pasted into a test repo. I mimicked the folder structure of .github/workflows/$name.yml, with the yml containing in structions to:

            
        ---
        name: Test

        on: push

        jobs:
        test:
            runs-on: ubuntu-latest
            steps:
            - uses: actions/checkout@v2.1.0
            - run: sudo apt install tidy
            - run: tidy index.html
            - run: cat index.html
            
        

It ran the first time. I honestly did not expect this to take 2 minutes. I thought I was going to be fighting configurations, formatting, file pathing, and so on.
I blocked off multiple hours to figure this out.
Instead, all I did was push code and Github Actions automatically picked up my YML file and off it went. Of course, there are multiple errors on the index.html alone due to me handwriting the HTML originally.

            
        Run tidy --indent auto --indent-spaces 4 --force-output yes -o index_output.html index.html
        line 14 column 9 - Warning: missing /div
        line 31 column 17 - Info: value for attribute "align" missing quote marks
        line 13 column 9 - Warning: <center> element removed from HTML5
        line 31 column 17 - Warning: <p> attribute "align" not allowed for HTML5
        Info: Document content looks like HTML5
        Tidy found 3 warnings and 0 errors!
        
    

It looks like I need to update some of the HTML on this site, but I'd rather see this project through before I go in a completely different direction. Also it exited with error code 1 and no logs providing information as to why it failed. Maybe this is where it takes hours.

I'd guess the issue is something with the command I pass to tidy. I can't run that command from cmd on Windows, so here we go, install WSL, reboot, install tidy, try again.

That command works locally. It's probably an issue with github actions not being allowed to create a file, as index_output.html does appear in the repo.

NOPE THAT'S NOT IT. For some reason it always fails even though it's completing the action. Adding continue-on-error: true after the run command makes it go through. I wouldn't do this in any kind of real deployment, but the goal of this is to figure out Github Actions not troubleshoot something random all night.

Now that we're past that, it runs on index.html, resume.html, and **.html in articles/. The only issue I encountered was that Tidy was wrapping text lines, which might have conflicted with how generate_index.py works. Setting --wrap 0 fixes this.

Here is the final YML used:

            
    ---
    name: html_tidy

    on: push

    jobs:
    html_tidy:
        runs-on: ubuntu-latest
        steps:
        - uses: actions/checkout@v2.1.0
        - run: sudo apt install tidy
        
        - name: Tidy index.html
            run: tidy --indent auto --wrap 0 --indent-spaces 4 --force-output yes -o index.html index.html
            continue-on-error: true
            
        - name: Tidy resume.html
            run: tidy --indent auto --wrap 0 --indent-spaces 4 --force-output yes -o resume.html resume.html
            continue-on-error: true

        - name: Tidy articles/ directory
            run: tidy --indent auto --wrap 0 --indent-spaces 4 --force-output yes -mq articles/**.*
            continue-on-error: true

        - run: tree tidy/efranken.github.io/

        - run: |
            git status
            git config --global user.name 'actions-efranken'
            git config --global user.email 'efranken@users.noreply.github.com'
            git commit -a --reuse-message=HEAD
            git push
            
        




HOME