Introduction

The theme use Github Actions for Continous Integration and Continous Deployment. The Github Actions are defined in the .github/workflows directory. The Github Actions are used to validate, format, build and deploy the website.

Github Actions

Simple Github Pages deployment

Use zola-deploy-action to build and deploy the website to Github Pages.

# .github/workflows/github-pages.yml
name: Github Pages

on:
  push:
    branches:
      - main

jobs:
  build:
    name: Build and deploy
    runs-on: ubuntu-latest
    if: github.ref == 'refs/heads/main'

    steps:
      - name: checkout
        uses: actions/checkout@v4

      - name: build_and_deploy
        uses: shalzz/zola-deploy-action@v0.18.0
        env:
          # Target branch
          PAGES_BRANCH: gh-pages
          TOKEN: ${{ secrets.GITHUB_TOKEN }}
´          BUILD_DIR: themes/zola-monoplain

See https://www.getzola.org/documentation/deployment/github-pages/

Advance Github Pages deployment

Use github-pages-deploy-action to build and deploy the website to Github Pages.

Use taiki-e/install-action to install Zola.

Use pnpm/action-setup to install pnpm.

Use actions/cache to cache the pnpm store.

# .github/workflows/deploy.yml
name: Deploy
on:
  push:
    branches:
      - main

jobs:
  deploy-github-pages:
    name: Deploy Github Pages
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        id: checkout
        uses: actions/checkout@v4

      - uses: taiki-e/install-action@v2
        with:
          tool: zola@0.18.0

      - name: Setup Node.js
        id: setup-node
        uses: actions/setup-node@v4
        with:
          node-version-file: package.json

      - uses: pnpm/action-setup@v4
        name: Install pnpm
        with:
          run_install: false

      - name: Get pnpm store directory
        shell: bash
        run: |
          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV

      - uses: actions/cache@v4
        name: Setup pnpm cache
        with:
          path: ${{ env.STORE_PATH }}
          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
          restore-keys: |
            ${{ runner.os }}-pnpm-store-

      - name: Install dependencies
        run: pnpm install

      - name: Build
        run: pnpm build

      - name: Deploy
        uses: JamesIves/github-pages-deploy-action@v4
        with:
          folder: ./themes/zola-monoplain/public
          branch: gh-pages
          clean-exclude: pr-preview
          force: false

Preview Github Pages deployment

Use pr-preview-action to build and deploy the website to Github Pages. Test the website with lighthouse-ci-action.

# .github/workflows/preview.yml
name: Preview
concurrency: preview-${{ github.ref }}
on:
  pull_request:
    types:
      - opened
      - reopened
      - synchronize
      - closed
jobs:
  deploy-preview:
    name: Deploy PR
    runs-on: ubuntu-latest

    outputs:
      preview_url: ${{ steps.deploy.outputs.deployment-url }}

    steps:
      - name: Checkout
        id: checkout
        uses: actions/checkout@v4

      - uses: taiki-e/install-action@v2
        with:
          tool: zola@0.18.0

      - name: Setup Node.js
        id: setup-node
        uses: actions/setup-node@v4
        with:
          node-version-file: package.json

      - uses: pnpm/action-setup@v4
        name: Install pnpm
        with:
          run_install: false

      - name: Get pnpm store directory
        shell: bash
        run: |
          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV

      - uses: actions/cache@v4
        name: Setup pnpm cache
        with:
          path: ${{ env.STORE_PATH }}
          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
          restore-keys: |
            ${{ runner.os }}-pnpm-store-

      - name: Install dependencies
        run: pnpm install

      - name: Build
        run: pnpm build
        if: github.event.action != 'closed'

      - name: Deploy
        id: deploy
        uses: rossjrw/pr-preview-action@v1
        with:
          source-dir: ./themes/zola-monoplain/public
          preview-branch: gh-pages
          umbrella-dir: pr-preview
          action: auto

      - name: Info
        run: |
          echo "Preview URL: ${{ steps.deploy.outputs.deployment-url }}"

  lighthouse:
    name: Test PR
    needs: deploy-preview
    if: always()
    timeout-minutes: 5
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Audit URLs and validate Budget
        uses: treosh/lighthouse-ci-action@v11
        with:
          urls: ${{ needs.deploy-preview.outputs.preview_url }}
          budgetPath: ./budget.json
          uploadArtifacts: true
          runs: 3

See: https://github.com/marketplace/actions/deploy-pr-preview

Checks

Use check-format to check the format of the code.

Use analyze-typescript to analyze the TypeScript code.

name: Continuous Integration

on:
  pull_request:
  push:
    branches:
      - main

permissions:
  contents: read

jobs:
  check-format:
    name: Check Format
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        id: checkout
        uses: actions/checkout@v4

      - name: Setup Node.js
        id: setup-node
        uses: actions/setup-node@v4
        with:
          node-version-file: package.json

      - uses: pnpm/action-setup@v4
        name: Install pnpm
        with:
          run_install: false

      - name: Get pnpm store directory
        shell: bash
        run: |
          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV

      - uses: actions/cache@v4
        name: Setup pnpm cache
        with:
          path: ${{ env.STORE_PATH }}
          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
          restore-keys: |
            ${{ runner.os }}-pnpm-store-

      - name: Install dependencies
        run: pnpm install

      - name: format
        run: pnpm format:check

  analyze-typescript:
    name: Analyze TypeScript
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        id: checkout
        uses: actions/checkout@v4

      - name: FTA Action
        id: fta-action
        uses: exiguus/fta-github-action@v0.1.1
        with:
          project_path: ./
          config_path: fta.config.json

      - name: Print Output Summary
        id: output-summary
        run: echo -e "\nSummary:\n${{ steps.fta-action.outputs.summary }}"

      - name: Print Output Details
        id: output-details
        run: echo -e "\nDetails:\n${{ steps.fta-action.outputs.details }}"

      - name: Upload Output Summary
        id: upload-output
        uses: actions/upload-artifact@v4
        with:
          name: output
          path: output.json

Lighthouse

Use lighthouse-action to check the performance of the website.

name: Lighthouse
on:
  workflow_run:
    workflows: ["Deploy"]
    types:
      - completed

jobs:
  test_run:
    name: Test run
    timeout-minutes: 15
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Audit URLs and validate Budget
        uses: treosh/lighthouse-ci-action@v11
        with:
          urls: https://exiguus.github.io/zola-monoplain/
          budgetPath: ./budget.json
          uploadArtifacts: true
          runs: 3

Accessibility

Use pa11y to check the accessibility of the website.

And validate against the WCAG standard.

name: e2e
on:
  workflow_run:
    workflows: ["Deploy"]
    types:
      - completed

jobs:
  a11y:
    name: A11y
    timeout-minutes: 15
    runs-on: ubuntu-latest
    if: always()

    steps:
      - name: Checkout
        id: checkout
        uses: actions/checkout@v4

      - name: Setup Node.js
        id: setup-node
        uses: actions/setup-node@v4
        with:
          node-version-file: package.json

      - uses: pnpm/action-setup@v4
        name: Install pnpm
        with:
          run_install: false

      - name: Get pnpm store directory
        shell: bash
        run: |
          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV

      - uses: actions/cache@v4
        name: Setup pnpm cache
        with:
          path: ${{ env.STORE_PATH }}
          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
          restore-keys: |
            ${{ runner.os }}-pnpm-store-

      - name: Install dependencies
        run: pnpm install && pnpm test:setup

      - name: Test Run
        run: cd themes/zola-monoplain && node ./scripts/pa11y.cjs https://exiguus.github.io/zola-monoplain/

      - name: Upload Artifacts
        uses: actions/upload-artifact@v4
        if: always()
        with:
          name: a11y-report
          path: themes/zola-monoplain/pa11y-report/**
          if-no-files-found: error
          retention-days: 7