Hugo es un popular Generador de Sitios Estáticos (SSG) de código abierto diseñado para ayudar a los desarrolladores a construir y gestionar sitios web de forma rápida y eficaz. Puede utilizarse para crear blogs, portafolios y todo tipo de sitios web personales que no requieran datos dinámicos.

Cuando construyas sitios con Hugo, seguro que querrás alojarlos online para poder compartirlos con todos aquellos que necesiten acceder a ellos. ¡Aquí es donde entra en juego el Alojamiento de Sitios Estáticos de Kinsta!

Cómo Funciona el Alojamiento de Sitios Estáticos de Kinsta

El Alojamiento de Sitios Estáticos de Kinsta es un servicio gratuito dedicado a alojar sitios estáticos. Lo hace sirviendo archivos HTML, CSS y JavaScript preconstruidos que no cambian dinámicamente. Funciona conectando un repositorio alojado en un proveedor Git (BitBucket, GitHub o GitLab) a tu cuenta Kinsta y desplegando los archivos de tu sitio estático en Internet.

El Alojamiento de Sitios Estáticos de Kinsta puede construir automáticamente sitios a partir de SSGs construidos sobre Node.js, mientras que para otros como Hugo, escritos en el lenguaje de programación Go (Golang), tendrías que idear otro enfoque.

¡Este artículo explica cómo alojar tu sitio Hugo en Kinsta de forma gratuita con el alojamiento de sitios estáticos de Kinsta!

Despliega Tu Sitio Hugo en el Alojamiento de Sitios Estáticos de Kinsta

Hay tres formas de desplegar tu sitio Hugo en el alojamiento de sitios estáticos de Kinsta:

  1. Construye tu sitio web utilizando Integración Continua y Entrega Continua (CI/CD) y luego despliégalo.
  2. Utiliza la dependencia para desarrolladores hugo-bin.
  3. Servir archivos estáticos construidos localmente.

En este artículo, repasaremos todos ellos.

Requisitos previos

Para seguir este tutorial, tienes que tiener:

  • Experiencia con Hugo y Git.
  • Un sitio Hugo funcionando localmente.

Construye Tu Sitio con CircleCI y Despliégalo en Kinsta

Para el primer método, vamos a utilizar CircleCI como herramienta CI/CD. Este método implica crear un flujo de trabajo CircleCI que construya tu sitio Hugo en una nueva rama llamada deploy y luego configurar Kinsta para desplegar los archivos estáticos desde esta rama.

Ventajas de utilizar CI/CD

Con este método, puedes evitar la necesidad de construir localmente tu sitio antes de enviarlo a tu repositorio Git. Normalmente, Kinsta se encarga del proceso de construcción del sitio para los SSG basados en Node.js, pero para otros SSG como Hugo, utilizar un flujo de trabajo puede ayudar a gestionar el proceso de construcción del sitio automáticamente.

Además, puedes añadir otros trabajos a tu archivo de configuración CI/CD, por ejemplo, para limpiar y probar tu código. También garantizas que tu despliegue sólo se actualice si la canalización CI/CD se completa con éxito.

Paso 1: Crea el archivo de configuración

Comienza creando una carpeta .circleci en el directorio raíz de tu proyecto Hugo. Dentro de esta carpeta, crea un archivo config.yml para definir la configuración de tu flujo de trabajo.

Paso 2: Empuja tu código a un repositorio Git

Crea un repositorio Git utilizando tu proveedor Git preferido y empuja tu código al repositorio.

Paso 3: Crea una rama huérfana

A continuación, crea una rama huérfana vacía llamada deploy, donde se insertarán los archivos estáticos para el despliegue. Ejecuta los siguientes comandos en el terminal de tu proyecto:

git switch --orphan deploy
git commit --allow-empty -m "Initial commit on deploy branch"
git push -u origin deploy

No añadas ningún archivo a esta rama; será rellenada automáticamente por el flujo de trabajo CircleCI con el contenido de la carpeta public generada por Hugo.

Paso 4: Crea una cuenta CircleCI

Visita el sitio web de CircleCI y crea una cuenta si aún no tienes una. Puedes registrarte utilizando tu proveedor de Git preferido, lo que facilita el acceso a tus repositorios sin necesidad de más configuración.

Paso 5: Configura tu repositorio

Tras iniciar sesión, ve a tu panel de control de CircleCI, haz clic en Proyectos en la barra lateral izquierda y selecciona el repositorio que quieras configurar. CircleCI detectará automáticamente tu archivo de configuración.

Configure your repository with CircleCI
Configura tu repositorio con CircleCI.

Haz clic en el botón Configurar Proyecto para conceder a CircleCI acceso a tu base de código y ejecutar flujos de trabajo cuando se produzcan cambios en el código.

Paso 6: Definir la configuración de CircleCI

Ya tienes creado un archivo de configuración CircleCI. Vamos a construir su contenido. Asegúrate de que estás en tu rama por defecto (no en la rama deploy ) y empieza por definir la versión de CircleCI, que actualmente es la 2.1:

version: 2.1

Paso 7: Define los ejecutores

Como se trata de un proyecto Hugo, necesitarás definir un ejecutor para ejecutar los trabajos. Define el hugo-executor aquí para que no tengas que definirlo para cada trabajo. Este ejecutor utiliza una imagen Docker (cibuilds/hugo:latest) para crear un entorno consistente para construir el sitio Hugo:

executors:
  hugo-executor:
    docker:
      - image: cibuilds/hugo:latest

Paso 8: Define los trabajos

A continuación, define dos trabajos: build y push build. Estos trabajos especifican los pasos a ejecutar en cada trabajo:

jobs:
  build:
    executor: hugo-executor

  push build:
    executor: hugo-executor

Trabajo de Construcción:

Este trabajo se encarga de construir tu sitio Hugo y de almacenar temporalmente los archivos estáticos generados en el espacio de trabajo para que puedan estar accesibles para su uso posterior en el trabajo push build.

build:
  executor: hugo-executor
  steps:
    - checkout

    - run:
        name: Update theme
        command: git submodule update --init --recursive

    - run:
        name: Build Hugo site
        command: hugo --destination=workspace/public

    # Persist the 'build' directory to the workspace
    - persist_to_workspace:
        root: workspace
        paths:
          - public

El trabajo anterior especifica que utiliza el ejecutor hugo-executor definido anteriormente. Y a continuación ejecuta cuatro pasos principales:

  • checkout: Este paso comprueba el código fuente de tu proyecto desde el repositorio de GitHub.
  • Update theme: Este paso inicializa y actualiza los submódulos Git (si los hay) para garantizar que tu tema Hugo está actualizado. Esto es útil si tu sitio Hugo utiliza Gitmodules para referenciar el tema utilizado en lugar de empujar grandes archivos de temas ya disponibles en GitHub.
  • Build Hugo site: Este paso construye el sitio Hugo y especifica la carpeta de destino como workspace/public.
  • persist_to_workspace: Este paso guarda el directorio public (resultado de la compilación de Hugo) en el espacio de trabajo para su uso posterior en la tarea push build.

Empujar trabajo de compilación:

El trabajo push build se encarga de empujar el sitio construido a una rama huérfana (deploy) en tu repositorio de GitHub. De esta forma, tu código permanece en la rama por defecto, y la rama deploy aloja únicamente los archivos estáticos de tu sitio.

push build:
  executor: hugo-executor
  steps:
    - attach_workspace:
        at: workspace

    - run:
        name: Push build folder to GitHub
        command: |
          # Configure Git identity (replace <GitHubUsername> with your actual username)
          git config --global user.name "<GitHubUsername>"
          git config --global user.email "<GitHubUsername>@users.noreply.github.com"

          # Clone the repository (replace <your-repo-name> with your actual repository URL)
          git clone --branch deploy --depth 1 https://<GitHubUsername>:${GITHUB_TOKEN}@github.com/<GitHubUsername>/<your-repo-name>.git deployment

          # Copy the 'public' directory to the deployment folder
          cp -R workspace/public deployment

          # Navigate to the deployment folder
          cd deployment

          # Commit and push changes
          git add .
          git commit -m "Auto generated from ${CIRCLE_SHA1}"
          git push

La tarea anterior hace lo siguiente

  • attach_workspace: Este paso adjunta el espacio de trabajo donde el trabajo build persistió el directorio público.
  • Push build folder to GitHub: Este paso realiza varias operaciones Git:
    • Configura la identidad Git con tu nombre de usuario y correo electrónico de GitHub.
    • Clona tu repositorio de GitHub en una carpeta llamada deployment en la máquina del ejecutor CircleCI.
    • Copia el contenido del directorio workspace/public (el sitio Hugo construido) en la carpeta deployment.
    • Cambia el directorio de trabajo a deployment.
    • Confirma los cambios con un mensaje indicando que se trata de una confirmación autogenerada por CircleCI.
    • Empuja los cambios a una nueva rama en tu repositorio de GitHub.

Asegúrate de sustituir <GitHubUsername> y <your-repo-name> por tu nombre de usuario real de GitHub y el nombre del repositorio. Además, asegúrate de crear un token de acceso a GitHub para que CircleCI pueda acceder a tu cuenta de GitHub.

Define scopes for GitHub access token
Define ámbitos para el token de acceso de GitHub.

A continuación, añade el token como una variable de entorno llamada GITHUB_TOKEN en la configuración de tu proyecto CircleCI.

Paso 9: Define el flujo de trabajo

Con tus trabajos configurados, la siguiente fase consiste en configurar tu flujo de trabajo. Continuando con tu configuración de CircleCI, crea un flujo de trabajo que active el trabajo build cuando haya cambios de código en la rama main y que requiera que el trabajo build se complete con éxito antes de ejecutar el trabajo push build:

workflows:
  version: 2
  build-and-deploy:
    jobs:
      - build:
          filters:
            branches:
              only:
                - main
      - push build:
          requires:
            - build

Paso 10: Commit y Push

Una vez que tu flujo de trabajo esté configurado correctamente, confirma y envía tus cambios a tu repositorio Git. CircleCI detecta automáticamente la presencia del archivo de configuración y activa los flujos de trabajo definidos cuando se producen cambios en el código.

Details of CircleCI pipeline
Detalles de la canalización CircleCI.

Cuando compruebes tu repositorio de GitHub, la rama deploy ya tiene la carpeta public, que contiene los archivos estáticos.

Puedes comprobar la configuración completa de CircleCI en este repositorio de ejemplo.

Paso 11: Despliega los archivos estáticos en Kinsta

El despliegue en Kinsta se realiza en cuestión de segundos, especialmente ahora que los archivos estáticos ya están creados. Sigue estos pasos para desplegar tu sitio Hugo de forma gratuita con Static Site Hosting:

  1. Inicia sesión o crea una cuenta para ver tu panel MyKinsta.
  2. Autoriza a Kinsta con tu proveedor de Git.
  3. Haz clic en Sitios estáticos en la barra lateral izquierda y, a continuación, en Añadir sitio.
  4. Selecciona el repositorio y la rama desde la que deseas desplegar (la rama deploy ).
  5. Asigna un nombre único a tu sitio y haz clic en Continuar.
  6. Deja vacíos los campos Comando de compilación y Versión del nodo y especifica el directorio de publicación como public.
  7. Por último, haz clic en Crear sitio.

¡Y ya está! Ya tienes un sitio desplegado en pocos segundos. Se proporciona un enlace para acceder a la versión desplegada de tu sitio. Si lo deseas, puedes añadir más adelante tu dominio personalizado y tu certificado SSL.

Utilizar Hugo-Bin para Construir y Desplegar Tu Sitio Hugo en Kinsta

El paquete Hugo-bin es una envoltura binaria para Hugo. Te permite construir y servir tu proyecto Hugo con comandos Node.js. Este método no necesita una herramienta CI/CD para construir tu sitio antes de desplegarlo en Kinsta Static Site Hosting.

Para utilizar el paquete Hugo-bin en tu proyecto Hugo:

  1. Inicializa Node.js en la raíz de tu proyecto ejecutando el comando npm init -y.
  2. A continuación, instala Hugo-bin como dependencia del desarrollador en tu proyecto ejecutando este comando:
npm i -D hugo-bin
  1. Añade los siguientes comandos de script a tu archivo package.json:
"scripts": {
    "build": "hugo",
    "create": "hugo new",
    "serve": "hugo server"
  }

Con esto, Kinsta podrá construir y servir tu sitio Hugo sin que necesites construir tus archivos antes de desplegarlo.

Una vez hecho todo, envía tu código a tu repositorio Git. Sigue estos pasos para desplegar tu sitio estático en Kinsta:

  1. Inicia sesión o crea una cuenta para ver tu panel MyKinsta.
  2. Autoriza a Kinsta con tu proveedor Git.
  3. Haz clic en Sitios estáticos en la barra lateral izquierda y, a continuación, en Añadir sitio.
  4. Selecciona el repositorio y la rama desde la que deseas desplegar.
  5. Asigna un nombre único a tu sitio.
  6. Añade la configuración de compilación en el siguiente formato:
    • Comando de compilación: npm run build
    • Versión de Node: 18.16.0
    • Directorio de publicación: public
  1. Por último, haz clic en Crear sitio.

Y ya está Ya tienes un sitio desplegado en pocos segundos.

Servir Tus archivos Estáticos Sólo a Kinsta

Por último, otro método para desplegar tu sitio Hugo en Kinsta consiste en crear tu sitio localmente y luego desplegarlo en Kinsta. Este proceso genera una carpeta pública en la raíz de tu proyecto. Sin embargo, la principal desventaja de utilizar este método es que tienes que construir tu sitio localmente antes de cada envío, lo que puede llevar mucho tiempo y ser menos conveniente en comparación con otros métodos que automatizan el proceso de construcción del sitio.

Por defecto, la carpeta pública está excluida de tu repositorio Git debido a su inclusión en tu archivo .gitignore. Para incluirla en tu repositorio y desplegar tu sitio en Kinsta:

  1. Elimina la carpeta pública de tu archivo . gitignore.
  2. Sigue los pasos de despliegue explicados anteriormente.
  3. Despliega el repositorio en Kinsta, asegurándote de que los campos Comando de construcción y Versión de nodo permanecen vacíos, ya que tu sitio ya está construido.
  4. Especifica el directorio de publicación como public.

Alternativamente, puedes elegir enviar sólo los archivos estáticos a tu repositorio de GitHub. Para este enfoque, no hay necesidad de inicializar un repositorio Git en la carpeta raíz de tu proyecto. Sólo necesitas ejecutar git init dentro de la carpeta pública. Esto te permite mantener el control de versiones de tus archivos estáticos separado del resto de tu proyecto.

En este escenario, cuando envíes los archivos por separado sin colocarlos dentro de una carpeta pública, especifica el directorio de publicación como . cuando realices el despliegue en Kinsta. Esta notación representa la carpeta raíz, y Kinsta servirá los archivos en consecuencia.

Resumen

Este artículo ha explicado tres métodos eficaces para desplegar tu sitio Hugo gratuitamente en la plataforma de alojamiento de sitios estáticos de Kinsta. Tienes la flexibilidad de elegir el método que mejor se adapte a tus requisitos específicos. Además, para obtener información detallada sobre la creación de un sitio estático ultrarrápido utilizando Hugo, lee nuestra guía completa.

Joel Olawanle Kinsta

Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 200 technical articles majorly around JavaScript and it's frameworks.