Regresar

Cómo implementar Github Actions en Hugo Blog con S3

por , 14-Mar-2023

En este artículo, te mostraré cómo implementar Github Actions en tu blog Hugo para automatizar el proceso de construcción, minimización y despliegue de tu sitio web en AWS S3 Bucket.

Primero, debemos crear un archivo de configuración para la acción de Github. Para hacer esto, crea una carpeta llamada .github/workflows/ y dentro de ella un archivo llamado main.yml. En este archivo, configuraremos los desencadenadores y los trabajos para nuestra acción.

El siguiente código muestra cómo debes configurar el archivo main.yml:


name: Deploy website to S3 bucket

on:
  push:
    branches:
      - master

jobs:
  deploy:
    runs-on: ubuntu-18.04
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true  # Fetch Hugo themes 
          fetch-depth: 0    # Fetch all history for .GitInfo and .Lastmod

      - name: Setup Hugo
        uses: peaceiris/actions-hugo@v2
        with:
          hugo-version: 'latest'
          extended: true

      - name: Configure AWS Credentials
        uses: aws-actions/configure-aws-credentials@v1
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: <Your-Region>

      - name: Build website
        run: hugo --minify

      - name: Hugo deploy static site to S3 bucket and invalidate Cloudfront cache
        run: hugo deploy --maxDeletes -1 --invalidateCDN

En este archivo de configuración, hemos definido que la acción solo se activará cuando alguien realice un cambio en la rama principal. También se ha especificado que se ejecutará en un contenedor Docker de Ubuntu 18.04 y se realizarán los siguientes pasos:

  • Clonar el repositorio y sus submódulos.
  • Configurar Hugo.
  • Configurar las credenciales de AWS.
  • Construir el sitio web con Hugo.
  • Desplegar el sitio web en un Bucket de AWS S3.

Para completar la configuración de las credenciales de AWS, debes crear dos secretos en la sección "Secretos" de la configuración de tu repositorio en Github. Uno llamado AWS_ACCESS_KEY_ID con el valor de tu ID de acceso de AWS y otro llamado AWS_SECRET_ACCESS_KEY con el valor de tu clave de acceso secreta de AWS.

Con esto, ya hemos configurado Github Actions para desplegar nuestro sitio web automáticamente cada vez que realizamos un cambio en la rama principal. Ahora, ya no tendrás que preocuparte por el proceso de construcción y despliegue, lo que te permitirá centrarte en la creación de contenido para tu blog.