Jekyll es uno de los Generadores de Sitios Estáticos (SSG) más populares, ampliamente utilizado por la comunidad de desarrolladores para crear blogs, portafolios y sitios web personales. Este artículo explica cómo crear un sitio Jekyll con Acciones de GitHub y desplegarlo gratuitamente con el alojamiento de sitios estáticos de Kinsta.

El Alojamiento de Sitios Estáticos de Kinsta puede construir automáticamente sitios a partir de SSGs y aplicaciones web construidas sobre Node.js. Para servir otros contenidos estáticos, como los sitios estáticos generados por Jekyll (construido sobre Ruby), necesitamos otro enfoque.

Requisitos

Para este tutorial, asumimos que tienes

  • Experiencia con Jekyll y Git.
  • Un sitio web Jekyll funcionando localmente.

Para seguir adelante, puedes utilizar esta base de código de ejemplo como referencia.

Despliega Tu Sitio Web Jekyll en Kinsta

Hay diferentes formas de desplegar tu sitio web Jekyll en Kinsta, por ejemplo:

  • Utilizas alojamiento de aplicaciones de Kinsta.
  • Utilizas el alojamiento de sitios estáticos de Kinsta mediante cualquiera de estos métodos:
    • A. Construyendo tu sitio web con Integración Continua y Despliegue Continuo (CI/CD) antes de desplegarlo en Kinsta.
    • B. Sirviendo sólo tus archivos estáticos.

En este artículo, te guiaremos a través de ambos métodos de despliegue de Jekyll con el alojamiento de sitios estáticos de Kinsta.

A. Construye Tu sitio Web con Acciones de GitHub Antes de Desplegarlo en Kinsta

Este método utiliza un flujo de trabajo de Acciones de GitHub (GHA) para construir tu sitio web en una rama específica (deploy) y utilizar esta rama para desplegar los archivos estáticos generados en Kinsta.

Para utilizar este método, ya que usamos GitHub Actions, tu código base debe estar alojado en un repositorio de GitHub (público o privado). Pero puedes utilizar otras herramientas CI/CD para conseguir el mismo resultado.

Las ventajas más significativas de este método son

  • Puedes implementar más procesos de Integración Continua (IC) para tu sitio, por ejemplo, una fase de test y/o una fase lint para comprobar tu código.
  • Tu sitio se construye automáticamente en cada push a tu repositorio. No necesitas construirlo antes de empujarlo.
  • Garantizas que tu sitio web sólo se actualiza si la canalización CI/CD se completa con éxito.

Pasos:

  1. Abre tu terminal en la raíz del repositorio de tu sitio Jekyll.
  2. Crea una nueva rama huérfana (vacía) (deploy) y envíala a tu repositorio:
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 Acciones de GitHub con el contenido de la carpeta _site de Jekyll generada.

  1. Consulta la rama main:
git checkout main
  1. Crea un directorio .github/workflows en main.
  1. Para configurar GHA, crea un nuevo archivo gh-actions.yml en . github/workflows con el siguiente contenido:
name: Deploy Jekyll
on:
  # The workflow runs only on pushes to the <main> branch
  push:
    branches: ["main"]
    workflow_dispatch:
jobs:
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Setup Ruby
        uses: ruby/setup-ruby@v1
        with:
          ruby-version: '3.2'
      - name: Set up Jekyll
        run: gem install bundler && bundle install
      - name: Build site
        run: bundle exec jekyll build
        env:
          JEKYLL_ENV: production
      - name: Upload artifact
        uses: actions/upload-artifact@v3
        with:
          name: compiled-site
          path: _site
  deploy:
    name: Deploy
    needs: build
    runs-on: ubuntu-latest
    permissions:
      contents: write
    steps:
# Commit and push the artifacts to the <deploy> branch
      - uses: actions/checkout@v4
        with:
          ref: deploy
      - name: Download artifacts
        uses: actions/download-artifact@v3
        with:
          name: compiled-site
          path: _site
      - name: Commit and push
      # Replace "<username>" with your GH org or user name
        run: |
          git config user.name "<username>"
          git config user.email "<username>@users.noreply.github.com"
          git pull origin deploy
          git add _site
          git commit -m "Auto generated from ${GITHUB_SHA::7}"
          git push
  1. Compila el código y envíalo a la rama main.

En cada push a la rama main, el flujo de trabajo Acciones de GitHub:

  1. Construye tu sitio web Jekyll con los archivos estáticos de _site.
  2. Crea artefactos con el contenido de _site.
  3. Comprueba la rama deploy.
  4. Compila los cambios de _site en la rama deploy.

Para actualizar tu sitio, sólo tienes que enviar los cambios a la rama main.

No envíes los cambios directamente a la rama deploy. Puedes optar por bloquear esta rama en GitHub para evitar empujes involuntarios.

Más abajo verás cómo desplegarla en Kinsta.

B. Construye Tu Sitio Web Localmente y Despliégalo Directamente en Kinsta

Como alternativa al método anterior, puedes crear tu sitio web localmente (y actualizar el contenido de la carpeta _site localmente), y luego enviar el contenido de la carpeta _site de Jekyll a un repositorio (en GitHub, GitLab o Bitbucket). Usando este método, no necesitas GH Actions ni ninguna otra herramienta CI/CD para construir tu sitio en cada envío a tu repositorio, por lo que es mucho más sencillo que el método anterior.

El inconveniente de este método es que debes construir el contenido de tu sitio antes de cada push a tu repositorio.

Este método sólo utiliza el contenido de la carpeta _site y lo sirve directamente en el alojamiento de sitios estáticos de Kinsta.

Pasos a seguir:

  1. Abre el archivo .gitignore de tu repo y elimina la línea con _site.
  2. Confirma y transfiere la carpeta _site a tu repositorio.

Para actualizar tu sitio web, asegúrate de crear tu sitio con Jekyll antes de enviarlo a tu repositorio.

Despliega Tu Sitio Jekyll en Kinsta con Alojamiento de Sitios Estáticos

Método GitHub Actions

Si has utilizado el flujo de trabajo Acciones de GitHub para crear tu sitio web, sigue los pasos que se indican a continuación para desplegarlo con el alojamiento de sitios estáticos de Kinsta.

  1. Inicia sesión en tu cuenta MyKinsta o crea una nueva.
  2. Ve a tu panel de control de MyKinsta.
  3. Haz clic en el icono del menú en la esquina superior izquierda de tu pantalla.
  4. En la barra lateral, haz clic en Sitios estáticos.
  5. En la esquina superior derecha, haz clic en Añadir sitio.
  6. Autoriza a tu proveedor Git.
  7. Selecciona tu repositorio.
  8. Selecciona la rama deploy como rama por defecto (donde se encuentra el contenido de la carpeta _site).
  9. Selecciona Despliegue automático al confirmar para desplegar tu sitio en cada actualización de tu repositorio.
  10. Añade un nombre de visualización único a tu sitio y haz clic en Continuar.
  11. Configura los ajustes de compilación:
    1. Comando de construcción: déjalo vacío.
    2. Versión del nodo: déjalo como está.
    3. Directorio de publicación: _site.
  1. Haz clic en Crear sitio.

Kinsta despliega tu sitio y te pide la URL predeterminada del sitio. Si lo deseas, puedes añadir tu propio dominio personalizado y tu propio certificado SSL.

Método de construcción local

Si has utilizado el método de compilación local, sigue los mismos pasos para desplegar tu sitio web. Sólo tienes que cambiar la rama desde la que quieres desplegar (en el paso 8). En lugar de deploy, utiliza main o la rama que prefieras.

Resumen

Este artículo te ha proporcionado dos métodos posibles para desplegar tu sitio web Jekyll con el alojamiento de sitios estáticos de Kinsta.

El primer método utiliza CI/CD para construir tu aplicación y generar el contenido de la carpeta _site en otra rama de tu repositorio. Las mayores ventajas de utilizar este método con el Alojamiento de Sitios Estáticos de Kinsta son:

  • Con CI/CD, hay numerosos procesos que puedes añadir a tu sitio.
  • Despliegas tu sitio con un servicio de alojamiento excepcional y lo sirves con el máximo rendimiento.
  • No necesitas una cuenta premium de GitHub para mantener tu repositorio privado (como harías si utilizas GitHub Pages, por ejemplo).

En el segundo método, construimos Jekyll localmente y empujamos el contenido de la carpeta _site a la misma rama que el resto de tus archivos Jekyll. Puede repetirse para repos alojados en otros proveedores de Git (GitLab y Bitbucket) sin necesidad de más configuración. Es el método más sencillo pero con el inconveniente de tener que construir tu sitio antes de cada push a tu repositorio.

Además de estas opciones, puedes optar por desplegar tu sitio Jekyll con el Alojamiento de Aplicaciones de Kinsta. Esto proporciona una mayor flexibilidad de alojamiento, una gama más completa de ventajas y acceso a funciones más robustas. Por ejemplo, escalabilidad, despliegue personalizado mediante un Dockerfile, y análisis completos que abarcan datos históricos y en tiempo real.

Lee más artículos sobre sitios web estáticos en el Blog de Kinsta.

Marcia Ramos Kinsta

Soy el Jefe del Equipo Editorial de Kinsta. Soy una entusiasta del código abierto y me encanta programar. Llevo más de 7 años escribiendo y editando textos técnicos para el sector tecnológico, y me encanta colaborar con la gente para crear contenidos claros y concisos y mejorar los flujos de trabajo.