Despliegue de un Sitio Web hecho en Hugo con GitHub Actions a Hostinger

Hugo es un generador de sitios estáticos extremadamente rápido y flexible. En este artículo, te guiaré a través del proceso de despliegue de un sitio web hecho en Hugo utilizando GitHub Actions para la automatización y Hostinger como tu servicio de hosting. Este enfoque te permitirá desplegar tu sitio web automáticamente cada vez que realices un commit en la rama principal de tu repositorio.

Prerrequisitos

Antes de comenzar, asegúrate de tener lo siguiente:

1. Un sitio web creado con Hugo.
2. Una cuenta en GitHub con un repositorio para tu sitio Hugo.
3. Una cuenta en Hostinger con acceso al panel de control.
4. Un token de acceso personal de GitHub con permisos para repositorios y acciones.

Paso 1: Configuración del Repositorio en GitHub

1. Crea un repositorio en GitHub: Si aún no tienes uno, crea un nuevo repositorio y sube tu sitio Hugo allí.
2. Agregar un token de acceso personal: Ve a la configuración de tu cuenta de GitHub, crea un token de acceso personal (PAT) con permisos de repo y workflow. Copia este token.

Paso 2: Configuración de GitHub Actions

En el directorio de tu proyecto Hugo, crea un archivo llamado .github/workflows/deploy.yml y agrega el siguiente contenido:

name: Deploy Hugo Site

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-20.04
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
          fetch-depth: 0

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

      - name: Build
        run: hugo --minify

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GH_TOKEN }}
          publish_branch: deployed
          publish_dir: ./public

Paso 3: Configurar Secretos en GitHub

1. Ve a la configuración del repositorio: Navega a Settings > Secrets and variables > Actions.
2. Agregar nuevo secreto: Crea un nuevo secreto llamado GH_TOKEN y pega el token de acceso personal que copiaste anteriormente.

Paso 4: Configuración en Hostinger

1. Accede al panel de control de Hostinger.
2. Configura el acceso FTP: Obtén los detalles de acceso FTP (servidor, usuario, contraseña) que usarás para subir tu sitio.
3. Preparar el servidor para despliegue: Asegúrate de que el directorio donde subirás tu sitio esté vacío o configurado correctamente para recibir los archivos estáticos.

Paso 5: Automatizar la Subida a Hostinger

Para subir automáticamente los archivos generados a Hostinger, necesitas modificar el flujo de trabajo para incluir la etapa de transferencia vía FTP. Añade el siguiente paso después del Deploy:

    # Upload to Hostinger
    - name: Deploy to Hostinger
      uses: SamKirkland/FTP-Deploy-Action@4.3.0
      with:
        server: ftp://your-ftp-server.com
        username: ${{ secrets.FTP_USERNAME }}
        password: ${{ secrets.FTP_PASSWORD }}
        local-dir: public
        server-dir: /path/to/your/site

No olvides activar el acceso por SSH en tu panel de hostinger, esto lo encuentras en Advanced > Accesso SSH > Estado de SSH

Paso 6: Configurar Secretos FTP en GitHub

1. Agregar los secretos FTP: Ve a Settings > Secrets and variables > Actions y agrega los siguientes secretos:
   • FTP_USERNAME: Tu nombre de usuario FTP.
   • FTP_PASSWORD: Tu contraseña FTP.

Conclusión

Ahora, cada vez que hagas un commit en la rama main de tu repositorio, GitHub Actions ejecutará el flujo de trabajo, construirá tu sitio Hugo y subirá los archivos generados a tu servidor en Hostinger. Este proceso automatizado asegura que tu sitio web esté siempre actualizado sin necesidad de intervención manual.

¡Felicidades! Has configurado exitosamente un pipeline de despliegue automatizado para tu sitio web Hugo utilizando GitHub Actions y Hostinger.