Utiliser les actions Github pour valider votre site HTML

GitHub Actions facilite l'automatisation de tous vos workflows logiciels, maintenant avec des CI/CD de classe mondiale. Construisez, testez et déployez votre code directement depuis GitHub. Faites en sorte que les révisions de code, la gestion des branches et le triage des issues fonctionnent comme vous le souhaitez.

Dans le cadre de la mise en ligne de mon Curriculum Vitae

Comment créer son CV sur Github
Dans ce billet, je vais vous expliquer comment j’ai généré mon Curriculum Vitae sur Github. Jusqu’à maintenant j’utilisais les services de DoYouBuzz [http://julien-mousqueton.fr] pour héberger mon CV en ligne. L’abonnement arrivant à sa fin, je me suis dit pourquoi ne pas héberger mon CV moi même.…

J'ai ajouté une action permettant de valider le code HTML généré par Lighthouse.

Lighthouse est un outil d'audit SEO simple proposé par Google.

la SEO est l'acronyme de Search Engine Optimization et peut être défini comme l'art de positionner un site, une page web ou une application dans les premiers résultats naturels des moteurs de recherche.

La mise en place est simple :

  • Créer un fichier de configuration .yml dans le répertoire .github/workflows de votre repository.
name: Lighthouse Check
on: [push]
jobs:
  lighthouse-check:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@master
      - run: mkdir /tmp/artifacts
      - name: Run Lighthouse
        uses: foo-software/lighthouse-check-action@master
        with:
          branch: ${{ github.ref }}
          outputDirectory: /tmp/artifacts
          author: ${{ github.actor }}
          urls: 'https://jmousqueton.github.io/'
      - name: Upload artifacts
        uses: actions/upload-artifact@master
        with:
          name: Lighthouse reports
          path: /tmp/artifacts
  • A la prochaine action de push l'action se déclenchera

Vous retrouverez le resultant dans l'onglet "Action" de votre repository

  • Soit en téléchargant le fichier de résultat (format HTML et json)

Le fichier HTML détail le résultat.

  • Soit directement dans le résultat de l'action

Il existe plusieurs milliers d'actions disponibles.

En savoir plus sur l'action Lighthouse que j'utilise.

[Edit] Depuis la rédaction de cet article j'ai ajouté une nouvelle action qui permet de valider le rendu visuel de mon Curriculum Vitae.