Migrating my blog to Astro - Quality

Enhancing the continuous integration and static analysis tooling to keep the quality of scripts and content as high as possible for the website.

Blogging

GitHub Actions

This is part of a series of posts on how I migrated my blog to Astro

Astro logo

There were a few things I put in place, or updated to improve the quality of the code and content of my blog.

I’ve blogged previously about using Lychee to find and fix broken links on your website. I figured this was a good time to revisit that process and see if it could be updated.

It turns out that Lychee recently changed their output format, so some of my GitHub Actions were no longer working. I’ve now fixed the Wayback machine query GitHub Action so it is compatible with Lychee 0.18 and above.

Here’s an extract from my main GitHub workflow that runs Lychee:

  linkChecker:
    runs-on: ubuntu-latest
    needs: build
    name: Link Checker
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      # Cache lychee results (e.g. to avoid hitting rate limits)
      - name: Restore lychee cache
        uses: actions/cache@v4
        with:
          path: .lycheecache
          key: cache-lychee-${{ github.sha }}
          restore-keys: cache-lychee-

      - name: Download dist artifact
        uses: actions/download-artifact@v4
        with:
          name: dist
          path: dist

      - name: Link Checker
        id: lychee
        uses: lycheeverse/lychee-action@v2.4.1 # 2.4.0 has a bug. Don't upgrade until fixed
        with:
          fail: false
          output: ${{ github.workspace }}/output.json
          format: json
          token: ${{ secrets.CUSTOM_GITHUB_TOKEN }}
          args: --root-dir "$(pwd)/dist/" 'dist/**/*.html' --cache --max-cache-age 7d --max-retries 0 --user-agent "Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:137.0) Gecko/20100101 Firefox/137.0" --fallback-extensions html -v --cache-exclude-status '429' --insecure --accept '200..=204'

      - name: Report results
        run: |
          ./Generate-LycheeReport.ps1 -InputJsonFile output.json -OutputMarkdownFile output.md

          ls -al

          cat output.md

          cat output.md >> $env:GITHUB_STEP_SUMMARY
        shell: pwsh

      - name: Publish results
        uses: actions/upload-artifact@v4
        with:
          name: link-checker-results
          path: output.*

I created a PowerShell script to generate a simple Markdown report that I could then output as a GitHub Actions summary.

The data file is also published as a build artifact.

I converted the links workflow so that it will now use that artifact as the source for creating a pull request with fixes for broken links where there is a match on archive.org.

Empty frontmatter

Sometimes I’d uncomment some of the frontmatter properties in a blog post, but forget to replace the placeholder text.

Example showing placeholder text was not changed

Whoops!

So I added an additional job to the main GitHub Actions workflow to validate frontmatter properties.

Lighthouse

Lighthouse is a popular tool for evaluating web page performance and accessibility.

I added a job to my GitHub Actions workflow to run a few key pages against Lighthouse.

The job publishes a GitHub step summary to the build, and links are provided if you want to drill into review the analysis of each page tested.

Screenshot of Lighthouse summary

The results are generally very good. The main thing bring down the blog post page score is because it includes the Disqus commenting addin. One day I’ll see if there’s better alternative to that which plays nicer with the way it interacts with your web pages.

Markdownlint

I make regular use of David Anson’s Markdownlint extension for VS Code, and so it made sense that I incorporate checking the entire set of Markdown files with a separate GitHub Actions workflow. I did have to do a bit of work to clean up some residual issues in older posts, but they’re all fixed now and with this in place things should stay in good shape.