Github Actions extra's

[incyi]

Om een website die wordt gehost op GitHub Pages (met een aangepaste URL) te testen, kun je enkele GitHub Actions toevoegen om de build- en testprocessen te automatiseren. Hier zijn handige GitHub Actions die geschikt zijn voor jouw toepassing:

---

1. GitHub Pages Deployment Test

• Action: GitHub Pages Deploy
• Waarom: Controleert of de website correct is gebouwd en zonder problemen wordt gedeployed naar GitHub Pages.
• Configuratie:
  • Test of jouw site goed wordt gegenereerd.
  • Controleer of de deploy branch correct is opgezet (gh-pages in veel gevallen).

Voorbeeld workflow:

name: Test and Deploy GitHub Pages

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout Code
      uses: actions/checkout@v3

    - name: Install Dependencies
      run: npm install # of afhankelijk van je framework/pakketbeheer

    - name: Build Website
      run: npm run build # Zorg dat deze stap je site genereert

    - name: Deploy to GitHub Pages
      uses: peaceiris/actions-gh-pages@v4
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        publish_dir: ./dist # Map waarin de gegenereerde site staat

---

2. Link Validatie

• Action: lycheeverse/lychee-action
• Waarom: Controleert of alle links op je website (intern en extern) werken.
• Configuratie:
  • Voorkomt dode links op je site.
  • Helpt problemen vroegtijdig te signaleren.

Voorbeeld workflow:

name: Check Links

on:
  push:
    branches:
      - main

jobs:
  link-check:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout Code
      uses: actions/checkout@v3

    - name: Run Link Checker
      uses: lycheeverse/lychee-action@v1
      with:
        args: --verbose --exclude-mail

---

3. Lighthouse Audit voor Performance

• Action: foo-software/lighthouse-check-action
• Waarom: Voer een Lighthouse-test uit om de website te beoordelen op snelheid, toegankelijkheid, SEO, en best practices.
• Configuratie:
  • Zet je custom URL in de test.

Voorbeeld workflow:

name: Lighthouse CI

on:
  push:
    branches:
      - main

jobs:
  lighthouse:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout code
      uses: actions/checkout@v3

    - name: Lighthouse Test
      uses: foo-software/lighthouse-check-action@master
      with:
        urls: "https://jouwdomein.com" # Vervang met je eigen custom URL
        outputDirectory: "./lighthouse-results"

---

4. Automatische Browser Tests

• Action: Bevat tools zoals cypress-io/github-action of Puppeteer-tests.
• Waarom: Controleer hoe de website eruitziet en functioneert in een browser in een CI/CD-pipeline.
• Configuratie:
  • Zorg dat interacties zoals knoppen, formulieren, en navigatie werken.

Voorbeeld workflow met Cypress:

name: Cypress Tests

on:
  push:
    branches:
      - main

jobs:
  cypress-run:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout code
      uses: actions/checkout@v3

    - name: Install dependencies
      run: npm install

    - name: Start website
      run: npm start & # Start een lokale server

    - name: Run Cypress tests
      uses: cypress-io/github-action@v5
      with:
        start: npm start
        wait-on: "http://localhost:3000" # Controleer je ontwikkelomgeving

---

5. Custom Domain Verificatie

• Action: Je kunt een simple test-script maken om de DNS-instellingen van je custom domein te controleren.
• Waarom: Zeker zijn dat je DNS-records goed zijn geconfigureerd (CNAME aanwezig, verwijzing naar GitHub Pages IP is juist).

---

Samenvatting

Deze Actions helpen je om je GitHub Pages site te testen:

1. Build en deploy naar Pages met peaceiris/actions-gh-pages.
2. Linkvalidatie met Lychee.
3. Performance en toegankelijkheid verificatie met Lighthouse.
4. Frontend automatisering met Cypress of Puppeteer.
5. Custom Domein Verificatie.

Als je hier extra hulp voor nodig hebt bij het instellen van specifieke workflows, laat het weten!