Sending Webmentions after Deploying to Azure Static Web Apps

I recently switched this site from Netlify to Azure Static Web Apps (SWA). For the most part it just worked - setup the site in the Azure portal, switch the DNS… done. You probably didn’t notice.

There were a couple of things which didn’t immediately work because they were set up in a Netlify-specific way: HTTP headers, redirects, and sending webmentions after deploying a new version of the site. HTTP headers and redirects can be handled in the SWA configuration file, so thy were easy enough to fix. Webmentions was looking to be a bit more tricky.

On Netlify I was able to create a post-deployment event which called a webhook. This action called Remy’s Webmention.app service to scan the site feed and send to any discovered webmention targets. Unfortunately, SWA doesn’t have an obviously comparable feature, so I thought I was going to be stuck webmention-less for the foreseeable future.

Thankfully, Sophie posted a guide on how she sends webmentions from her static site. This reminded me that Remy also provides a CLI version of the Webmention tool, as an NPM package, that doesn’t rely on the web service. And then, to top it off, she posted how she deploys her Eleventy site to Neocities and reminded me of something else that let me put everything together: GitHub Actions.

Hooking SWA up to your GitHub repository creates a GitHub Actions workflow file in your repository. This file handles the building of your site and deployment to SWA. GitHub Actions workflows can run commands, so I could use the CLI webmention tool after the auto-generated build-and-deploy step. All I needed to do was get the configuration right.

After a bit of tinkering with the CLI running in “dry-run” mode, the addition to my workflow file looks like this:

- name: Webmentions
        id: webmentions
        run: |
          npx -y @remy/webmention dist/feed.xml --limit 1 --send

Other than this addition, my workflow file is the default generated by the Azure portal. For context, my complete workflow file now looks like this:

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - develop
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - develop

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v3
        with:
          submodules: true
          lfs: false
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: $
          repo_token: $ # Used for Github integrations (i.e. PR comments)
          action: 'upload'
          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: '/' # App source code path
          api_location: '' # Api source code path - optional
          output_location: '/dist' # Built app content directory - optional
          ###### End of Repository/Build Configurations ######
      - name: Webmentions
        id: webmentions
        run: |
          npx -y @remy/webmention dist/feed.xml --limit 1 --send

  close_pull_request_job:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request Job
    steps:
      - name: Close Pull Request
        id: closepullrequest
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: $
          action: 'close'