En esta publicación del blog, discutiremos cómo desplegar un sitio estático de Hugo en GitHub Pages utilizando GitHub Actions. GitHub Actions es una función de automatización proporcionada por GitHub que te permite crear flujos de trabajo personalizados de desarrollo de software directamente en tu repositorio de GitHub. Al utilizar GitHub Actions, puedes automatizar el proceso de construcción y despliegue de tu sitio estático de Hugo en GitHub Pages con facilidad.

Configurando los ajustes de GitHub Pages

Antes de poder desplegar con éxito tu sitio estático de Hugo en GitHub Pages utilizando GitHub Actions, necesitas configurar los ajustes de GitHub Pages para tu proyecto.

  1. Ve a la página de tu proyecto en GitHub y haz clic en la pestaña “Settings” en la esquina superior derecha.
  2. Desplázate hasta la sección “Pages”.
  3. En la sección “Build and deployment”, localiza el menú desplegable “Source”.
  4. Selecciona “GitHub Actions” de las opciones disponibles. Esto indica a GitHub Pages que use los artefactos generados por GitHub Actions para el despliegue.

Ahora que has configurado tus ajustes de GitHub Pages, tu sitio será desplegado utilizando el flujo de trabajo definido en el archivo hugo.yaml.

Configurando tu flujo de trabajo de GitHub Pages

Para configurar un flujo de trabajo de GitHub Pages con Hugo y GitHub Actions, sigue estos pasos:

  1. Crea un archivo nuevo llamado hugo.yaml en el directorio .github/workflows/ del repositorio de tu sitio Hugo.
  2. Copia la siguiente configuración YAML en el archivo 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

Este archivo de configuración establece un flujo de trabajo que construye tu sitio estático de Hugo y lo despliega en GitHub Pages cuando realizas push en la rama main o ejecutas el flujo de trabajo manualmente desde la pestaña de Actions.

Conclusión

Con la adición de configurar los ajustes de GitHub Pages en tu proyecto y utilizar la configuración de flujo de trabajo hugo.yaml proporcionada, puedes automatizar fácilmente el proceso de construcción y despliegue de tu sitio estático de Hugo en GitHub Pages. Al utilizar GitHub Actions, puedes centrarte en crear contenido y realizar actualizaciones en tu sitio sin tener que desplegarlo manualmente cada vez. Esta configuración también te permite aprovechar las capacidades integradas de CI/CD proporcionadas por GitHub Actions, lo que mejora aún más tu flujo de trabajo de desarrollo.

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

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