Dans cet article de blog, nous allons discuter de la façon de déployer un site statique Hugo sur GitHub Pages en utilisant GitHub Actions. GitHub Actions est une fonctionnalité d’automatisation fournie par GitHub qui vous permet de créer des flux de travail de développement logiciel personnalisés directement dans votre dépôt GitHub. En utilisant GitHub Actions, vous pouvez automatiser le processus de construction et de déploiement de votre site statique Hugo sur GitHub Pages facilement.

Configuration des paramètres de GitHub Pages

Avant de pouvoir déployer avec succès votre site statique Hugo sur GitHub Pages en utilisant GitHub Actions, vous devez configurer les paramètres de GitHub Pages pour votre projet.

  1. Allez sur la page de votre projet GitHub et cliquez sur l’onglet “Settings” dans le coin supérieur droit.
  2. Faites défiler jusqu’à la section “Pages”.
  3. Dans les paramètres “Build and deployment”, localisez le menu déroulant “Source”.
  4. Sélectionnez “GitHub Actions” parmi les options disponibles. Cela indique à GitHub Pages d’utiliser les artefacts générés par GitHub Actions pour le déploiement.

Maintenant que vous avez configuré les paramètres de GitHub Pages, votre site sera déployé en utilisant le flux de travail défini dans le fichier hugo.yaml.

Configuration de votre flux de travail GitHub Pages

Pour configurer un flux de travail GitHub Pages avec Hugo et GitHub Actions, suivez ces étapes:

  1. Créez un nouveau fichier nommé hugo.yaml dans le répertoire .github/workflows/ du dépôt de votre site Hugo.
  2. Copiez la configuration YAML suivante dans le fichier hugo.yaml:
name: Deploy Hugo site to Pages

on:
  # Runs on pushes targeting the default branch
  push:
    branches:
      - main

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
permissions:
  contents: read
  pages: write
  id-token: write

# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
concurrency:
  group: "pages"
  cancel-in-progress: false

# Default to bash
defaults:
  run:
    shell: bash

jobs:
  # Build job
  build:
    runs-on: ubuntu-latest
    env:
      HUGO_VERSION: 0.111.3
    steps:
      - name: Install Hugo CLI
        run: |
          wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb \
          && sudo dpkg -i ${{ runner.temp }}/hugo.deb          
      - name: Install Dart Sass Embedded
        run: sudo snap install dart-sass-embedded
      - name: Checkout
        uses: actions/checkout@v3
        with:
          submodules: recursive
          fetch-depth: 0
      - name: Setup Pages
        id: pages
        uses: actions/configure-pages@v3
      - name: Install Node.js dependencies
        run: "[[ -f package-lock.json || -f npm-shrinkwrap.json ]] && npm ci || true"
      - name: Build with Hugo
        env:
          # For maximum backward compatibility with Hugo modules
          HUGO_ENVIRONMENT: production
          HUGO_ENV: production
        run: |
          hugo \
            --gc \
            --minify \
            --baseURL "${{ steps.pages.outputs.base_url }}/"          
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v1
        with:
          path: ./public

  # Deployment job
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v2

Ce fichier de configuration met en place un flux de travail qui construit votre site statique Hugo et le déploie sur GitHub Pages lorsque vous poussez vers la branche main ou exécutez le flux de travail manuellement depuis l’onglet Actions.

Conclusion

En configurant les paramètres de GitHub Pages dans votre projet et en utilisant la configuration de flux de travail hugo.yaml fournie, vous pouvez facilement automatiser le processus de construction et de déploiement de votre site statique Hugo sur GitHub Pages. En utilisant GitHub Actions, vous pouvez vous concentrer sur la création de contenu et les mises à jour de votre site sans avoir à le déployer manuellement à chaque fois. Cette configuration vous permet également de profiter des capacités CI/CD intégrées fournies par GitHub Actions, améliorant ainsi votre flux de travail de développement.

Source code : https://github.com/hobbyworker/hugo-demo

Demo : https://hobbyworker.me/hugo-demo