Tutorial de Jekyll: Cómo Crear un Sitio Web Estático

En la era digital actual, tener un sitio web es esencial para establecer una presencia online, promocionar tu marca y llegar a clientes potenciales. Sin embargo, crear un sitio web puede ser una tarea abrumadora.

Aquí es donde entran en juego los generadores de sitios estáticos (SSG – Static site generators), que facilitan la creación de sitios web bonitos y de carga rápida sin necesidad de complejos sistemas de backend o  debases de datos.

En este artículo, conocerás uno de los SSG más populares: Jekyll, aprenderás cómo funciona y cómo puedes crear un sitio web estático con él.

Aquí tienes una la demostración en vivo del blog que construirás con Jekyll.

Puedes acceder al repositorio GitHub del proyecto si quieres echarle un vistazo más de cerca.

¿Qué es Jekyll?

Jekyll es un SSG gratuito de código abierto que se construye y ejecuta sobre el lenguaje de programación Ruby. No necesitas entender cómo funciona Ruby para utilizar Jekyll; sólo necesitas tener Ruby instalado en tu máquina.

Jekyll puede utilizarse para crear varios tipos de sitios estáticos, como un blog personal, un sitio web de portafolio y un sitio web de documentación, sin necesidad de una base de datos ni de utilizar un sistema de gestión de contenidos como WordPress.

Esto es lo que hace que Jekyll destaque entre los SSG:

1. Facilidad de uso: Jekyll utiliza archivos de texto sin formato y sintaxis markdown para crear y gestionar contenidos, lo que significa que no necesitas tener conocimientos de HTML o CSS para empezar.
2. Rápido y seguro: Jekyll no se ocupa de ninguna base de datos o secuencia de comandos del lado del servidor, lo que significa existen menos posibilidades de que se produzcan vulnerabilidades y ataques. Genera archivos HTML estáticos haciendo que tu sitio web sea increíblemente rápido y seguro.
3. Personalizable: Jekyll es altamente personalizable, lo que te permite utilizar diseños y plantillas o incluso crear plugins para ampliar su funcionalidad.
4. Fácil de desplegar: Jekyll genera archivos HTML estáticos que pueden desplegarse en un servidor web o proveedor de alojamiento sin necesidad de un sistema dinámico de gestión de contenidos.
5. Respaldado por una gran comunidad: Jekyll tiene una gran comunidad de usuarios y desarrolladores, lo que significa que hay muchos recursos disponibles si necesitas ayuda o quieres ampliar la funcionalidad de tu sitio.

Cómo Instalar Jekyll

Primero tienes que instalar Ruby en tu máquina antes de proceder a instalar Jekyll, como se indica en la documentación de Jekyll.

Cómo instalar Jekyll en macOS

Por defecto, Ruby viene preinstalado con macOS, pero no es recomendable que utilices esa versión de Ruby para instalar Jekyll porque es antigua. Por ejemplo, en Ventura, el último sistema operativo de Apple, la versión de Ruby que viene preinstalada es la 2.6.10, de la que la última versión es la 3.1.3 (en el momento de escribir este artículo).

Para solucionar esto, tendrías que instalar Ruby correctamente utilizando un gestor de versiones como chruby. Primero tendrías que instalar Homebrew en tu Mac utilizando el siguiente comando en tu terminal:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Una vez que la instalación se haya realizado correctamente, sal y reinicia Terminal, y comprueba si Homebrew está listo para funcionar ejecutando este comando:

brew doctor

Si obtienes «Your system is ready to brew», ahora puedes pasar a instalar chruby y ruby-install con el comando que aparece a continuación:

brew install chruby ruby-install

Ahora puedes instalar la última versión de ruby, que es la 3.1.3, utilizando el paquete ruby-install que acabas de instalar:

ruby-install 3.1.3

Esto tardará unos minutos. Una vez que se haya realizado correctamente, configura tu shell para que utilice automáticamente chruby con el comando que aparece a continuación:

echo "source $(brew --prefix)/opt/chruby/share/chruby/chruby.sh" >> ~/.zshrc
echo "source $(brew --prefix)/opt/chruby/share/chruby/auto.sh" >> ~/.zshrc
echo "chruby ruby-3.1.3" >> ~/.zshrc

Ahora puedes salir y volver a iniciar tu terminal, y comprobar que todo funciona ejecutando este comando:

ruby -v

Debería decir ruby 3.1.3.

Ahora tienes la última versión de Ruby instalada en tu máquina. Ahora puedes proceder a instalar la última gema de Jekyll y bundler:

gem install jekyll bundler

Cómo instalar Jekyll en Windows

Para instalar Ruby y Jekyll en una máquina Windows, debes utilizar el RubyInstaller. Para ello, descarga e instala una versión de Ruby+Devkit desde Descargas de RubyInstaller y utiliza las opciones predeterminadas para la instalación.

En la última etapa del asistente de instalación, ejecuta el paso ridk install, que se utiliza para instalar gemas. Más información en la Documentación de RubyInstaller.

En las opciones, elige MSYS2 y la cadena de herramientas de desarrollo MINGW. Abre una nueva ventana de símbolo del sistema e instala Jekyll y Bundler utilizando el siguiente comando:

gem install jekyll bundler

Cómo verificar que Jekyll está instalado correctamente

Para verificar que Jekyll está instalado correctamente en tu máquina, abre tu terminal y ejecuta el siguiente comando:

jekyll -v

Si ves el número de versión, significa que Jekyll está instalado y funciona correctamente en tu sistema. ¡Ya estás listo para utilizar Jekyll!

Comandos y configuración de Jekyll

Antes de empezar a crear y personalizar un sitio estático con Jekyll, conviene familiarizarse con sus diversos comandos CLI y parámetros del archivo de configuración.

Comandos CLI de Jekyll

Éstos son algunos de los comandos CLI de Jekyll más populares. No es necesario que los memorices, pero basta con que sepas que existen, y no dudes en comprobar lo que hace cualquiera de ellos cuando veas su uso más adelante en este artículo.

• jekyll build: Genera el sitio estático en el directorio _site.
• jekyll serve: Construye el sitio e inicia un servidor web en tu máquina local, permitiéndote previsualizar el sitio en tu navegador en http://localhost:4000.
• jekyll new [site name]: Crea un nuevo sitio Jekyll en un nuevo directorio con el nombre de sitio especificado.
• jekyll doctor: Muestra cualquier problema de configuración o dependencia que pueda haber.
• jekyll clean: Elimina el directorio _site, que es donde se almacenan los archivos del sitio generado.
• jekyll help: Muestra la documentación de ayuda de Jekyll.
• jekyll serve --draft: Genera y sirve tu sitio Jekyll, incluidas las entradas que estén en el directorio _drafts.

También puedes añadir algunas opciones a estos comandos. Consulta la lista completa de comandos y opciones de Jekyll en la documentación de Jekyll.

Archivo de configuración de Jekyll

El archivo de configuración de Jekyll es un archivo YAML llamado _config.yml que contiene ajustes y opciones para tu sitio Jekyll. Se utiliza para configurar varios aspectos de tu sitio, como el título del sitio, la descripción, la URL y otras configuraciones.

Estas son algunas de las opciones de configuración más utilizadas:

• title: El título de tu sitio.
• description: Una breve descripción de tu sitio.
• url: La URL base de tu sitio.
• baseurl: El subdirectorio de tu sitio, si está alojado en un subdirectorio de un dominio.
• permalink: La estructura de URL para tus entradas y páginas.
• exclude: Una lista de archivos o directorios a excluir del proceso de generación del sitio.
• include: Una lista de archivos o directorios a incluir en el proceso de generación del sitio.
• paginate: El número de entradas a mostrar por página cuando se utiliza la paginación.
• plugins: Una lista de plugins Jekyll que cargar.
• theme: Por defecto, está configurado como minima. Puedes utilizar cualquier otro tema configurando su nombre e implementando otros ajustes que veremos más adelante en este artículo.

También puedes crear variables personalizadas en tu archivo de configuración y utilizarlas en las plantillas, diseños e includes de tu sitio. Por ejemplo, puedes crear una variable llamada author_name y utilizarla en tus plantillas así: {{ site.author_name }}.

Para modificar tu archivo de configuración de Jekyll, abre el archivo _config.yml del directorio de tu proyecto Jekyll en un editor de texto y realiza los cambios.

Nota: Cualquier cambio que hagas en el archivo de configuración tendrá efecto la próxima vez que generes tu sitio con jekyll build o jekyll serve.

¿Cómo Crear un Sitio Web Estático en Jekyll?

Ahora que tienes Jekyll instalado en tu máquina, es posible crear un sitio web estático en Jekyll con un solo comando y en pocos segundos. Abre tu terminal y ejecuta este comando

jekyll new joels-blog

Asegúrate de sustituir «joels-blog» por el nombre del sitio que prefieras.

A continuación, navega hasta la carpeta del sitio web. Verás una estructura básica de sitio Jekyll que incluye directorios y archivos como éstos:

├── _config.yml
├── _posts
├── Gemfile
├── Gemfile.lock
├── index.md
└── README.md

He aquí para qué sirve cada uno de estos directorios y archivos:

• _config.yml: El archivo de configuración de Jekyll que contiene los ajustes y opciones de tu sitio.
• _posts: Un directorio que contiene el contenido de tu sitio (pueden ser entradas de blog). Pueden ser archivos Markdown o HTML con una convención de nomenclatura de archivos específica: YEAR-MONTH-DAY-title.MARKUP.
• Gemfile y Gemfile.lock: Bundler utiliza estos archivos para gestionar las gemas Ruby en las que se basa tu sitio.
• index.md: La página de inicio por defecto de tu sitio, generada a partir de un archivo Markdown o HTML.

Pero hay más archivos/carpetas que pueden utilizarse para personalizar tu sitio web Jekyll. Estas carpetas incluyen:

• _includes: Un directorio que contiene fragmentos HTML reutilizables que puedes incluir en tus diseños y páginas. Como la barra de navegación, el pie de página, etc.
• _layouts: Un directorio que contiene plantillas de diseño HTML que definen la estructura de tus páginas.
• assets: Un directorio que contiene los archivos que utiliza tu sitio, como imágenes y archivos CSS.
• _sass: Un directorio que contiene archivos Sass que pueden utilizarse para generar CSS para tu sitio.

Esta estructura de archivos proporciona una base sólida para un proyecto Jekyll, pero puedes modificarla según sea necesario para adaptarla a las necesidades específicas de tu proyecto.

Opción de inicio rápido: Utiliza nuestra plantilla de GitHub

Como alternativa a iniciar tu proyecto utilizando la CLI de Jekyll, puedes crear un repositorio Git utilizando la plantilla Jekyll «Hello World» de Kinsta en GitHub. Selecciona Usar esta plantilla > Crear un nuevo repositorio para copiar el código de inicio en un nuevo repositorio dentro de tu propia cuenta de GitHub.

Cómo Previsualizar un Sitio Jekyll

Ya tienes un sitio Jekyll, pero ¿cómo puedes previsualizar el sitio web para ver qué aspecto tiene antes de empezar a personalizarlo para adaptarlo a tus necesidades? Abre tu terminal y entra en el directorio de tu proyecto, luego ejecuta el siguiente comando:

jekyll serve

Esto generará una carpeta _site que incluirá todos los archivos estáticos generados a partir de tu proyecto. También iniciará el servidor Jekyll, y podrás previsualizar tu sitio a través de http://localhost:4000.

Si visitas la URL en tu navegador web, deberías ver tu sitio Jekyll con el tema minima:

Cómo Personalizar un Sitio Jekyll

Cuando creas un sitio con Jekyll y utilizas un tema, puedes personalizar el sitio para adaptarlo a tus necesidades. Por ejemplo, puede que quieras añadir nuevas páginas, cambiar el diseño de una página o ajustar cómo se muestran algunos elementos. Todo esto es posible con Jekyll.

Cómo funciona el Front Matter en Jekyll

Cuando abras cada página o entrada de blog de tu carpeta de proyecto, verás un bloque de información dentro de tres guiones (—) en la parte superior de la página. Es lo que se denomina front matter.

Es un formato de metadatos utilizado en Jekyll, para almacenar información sobre una página o entrada – puede escribirse en YAML o JSON.

---
title:  "Welcome to Jekyll!"
description: "Introduction to what Jekyll is about and how it works"
date:   2023-03-07 16:54:37 +0100
---

En el ejemplo anterior, el front matter incluye variables como el título, la descripción y la fecha de la entrada. Estas variables pueden utilizarse en el diseño o contenido de la página o entrada.

Jekyll analiza el front matter y lo utiliza para generar el HTML de salida de tu sitio. Puedes utilizar el front matter para especificar varias opciones, como el diseño, el permalink, el estado de publicación, etc.

Cómo configurar el front matter defecto

También puedes configurar el front matter defecto, para no tener que definir el mismo front matter para archivos similares. Por ejemplo, si cada entrada del blog utiliza el mismo nombre de autor y el mismo diseño. Puedes definir un front matter personalizado en tu archivo _config.yml para servir a todas las entradas de tu blog.

La forma en que está estructurado es un poco compleja, pero aquí tienes el aspecto que tendrá. Pégalo debajo de la última configuración de tu archivo _config.yml:

defaults:
 -
   scope:
     path: "posts" # empty string means all files
   values:
     layout: "post"
     author: "John Doe"

Cuando ahora ejecutes el comando jekyll serve, te darás cuenta de que aunque no definas el diseño y el autor en cada entrada, sigues teniendo acceso a ellos dentro de tus archivos.

Nota: Cuando no definas una ruta, todos los archivos utilizarán los valores de front matter definidos.

Crear páginas en Jekyll

Cuando creas un archivo en el directorio raíz de tu proyecto, se considera una página. El nombre que des al archivo se utilizará la mayoría de las veces en la URL, por lo que darás a cada archivo de página un nombre que resuene bien.

Por ejemplo, si quieres crear una página con la URL https://example.com/about, crea un archivo llamado about.html o about.md. La extensión del archivo determina el lenguaje de marcado que se utilizará para el contenido de la página (HTML o Markdown).

Una vez que hayas creado el archivo, añade la portada y el contenido adecuados. Guarda el archivo y actualiza tu sitio Jekyll en el navegador. La nueva página debería estar ahora accesible en la URL correspondiente al nombre del archivo.

Crear diseños en Jekyll

Puedes utilizar Layouts para definir la estructura y el diseño de las páginas y entradas de tu sitio. Esto suele hacerse principalmente con código HTML. Puedes incluir un encabezado, un pie de página, información meta con los metadatos de la página.

El primer paso sería crear una carpeta _layouts en el directorio raíz de tu proyecto. A continuación, crea un archivo para cada maqueta: el archivo debe tener un nombre descriptivo que refleje la finalidad de la maqueta. Por ejemplo, podrías crear un archivo llamado page.html para definir el diseño de todas las páginas de tu sitio.

Lo mejor es definir la estructura general de tus diseños con HTML u otro lenguaje de marcado.

Puedes incluir marcadores de posición para cualquier contenido dinámico que se inserte en el diseño, como el título de la página, el contenido y los metadatos. Por ejemplo, puedes crear una maquetación básica que incluya un encabezado, un pie de página y un área de contenido como ésta:

<!DOCTYPE html>
<html>
    <head>
        <title>{{ page.title }}</title>
    </head>
    <body>
        <header>
                
        </header>
        <main>{{ content }}</main>
        <footer>
            
        </footer>
    </body>
</html>

En este ejemplo, los marcadores de posición {{ page.title }} y {{ content }} se sustituirán por el título y el contenido reales de la página que se está mostrando.

En este punto, cualquier página o entrada que utilice page como valor de diseño en su portada tendrá este diseño. Puedes crear varios diseños dentro de la carpeta _layouts y darles el estilo que quieras. También puedes anular el diseño de un tema definiendo un diseño con un nombre similar.

Cómo funciona la carpeta _includes en Jekyll

La carpeta _includes contiene fragmentos de código reutilizables que puedes incluir en distintas partes de tu sitio web. Por ejemplo, puedes crear un archivo navbar.html en tu carpeta includes y añadirlo a tu archivo de diseño page.html utilizando la etiqueta {% include %}.

<!DOCTYPE html>
 <html>
     <head>
         <title>{{ page.title }} </title>
     </head>
     <body>
         <header>{% include navbar.html %} </header>
         <main>{{ content }} </main>
         <footer>
             
         </footer>
     </body>
 </html>

En el momento de la compilación, Jekyll sustituirá la etiqueta por el contenido de navbar.html.

La carpeta _includes puede contener cualquier tipo de archivo, como archivos HTML, Markdown o Liquid. El objetivo principal es mantener tu código DRY (Don’t Repeat Yourself) permitiéndote reutilizar código en todo tu sitio.

Recorrer entradas en Jekyll

Es posible que quieras crear una página dedicada a tu blog que contenga todas las entradas de tu blog, lo que significa que querrás obtener todas las entradas de tu sitio y hacer un bucle a través de ellas. Con Jekyll es fácil hacerlo utilizando la etiqueta {% for %}.

Todas las entradas de cualquier sitio web Jekyll se almacenan en la variable site.posts. Puedes hacer un bucle y utilizar la variable {{ post.title }} Liquid para mostrar el título de cada entrada:

{% for post in site.posts %}
  <h2>{{ post.title }}</h2>
{% endfor %}

También puedes utilizar variables Liquid adicionales para obtener otra información sobre cada entrada, como la fecha o el autor:

{% for post in site.posts %}
  <h2>{{ post.title }}</h2>
  <p>Published on {{ post.date | date: "%B %-d, %Y" }} by {{ post.author }}</p>
{% endfor %}

Observa que en el ejemplo anterior, el filtro Liquid de fecha formatea la fecha de cada entrada en un formato más legible.

Ahora ya tienes una idea de algunos formatos básicos que puedes aplicar a tu sitio Jekyll. Pero puede que no necesites utilizar todo esto para construir un sitio Jekyll desde cero, porque siempre puedes buscar un tema que satisfaga tus necesidades y añadirlo a tu sitio Jekyll.

Cómo Añadir un Tema a un Sitio Jekyll

Existen varios temas fáciles de añadir, pero lo bueno es que para cada tema siempre hay información clara sobre cómo instalarlo en el archivo ReadMe de GitHub. Puedes decidir clonar el tema, o si se trata de un tema basado en gemas, el proceso es más sencillo.

Para este artículo, instalarás un tema de blog y lo personalizarás para tener un sitio de blog desplegado en Kinsta. Este es un tema basado en gemas y puedes acceder a su código fuente e instrucciones en GitHub.

Para añadir un tema basado en gemas, abre el Gemfile de tu sitio y añade la gema del tema que quieras utilizar. El tema que utilizaremos es el jekyll-theme-clean-blog. Puedes sustituir el tema por defecto minima en el Gemfile:

gem "jekyll-theme-clean-blog"

Ejecuta el comando bundle install en el directorio de tu sitio para instalar la gema del tema y sus dependencias.

En el archivo _config.yml de tu sitio, añade la siguiente línea para especificar el tema que deseas utilizar:

theme: jekyll-theme-clean-blog

En este punto, tu tema está listo para ser utilizado.

Deberás eliminar todos los diseños del directorio _layouts para evitar que anulen el diseño del tema.

Puedes encontrar los nombres de los diseños de tus archivos en la documentación del tema. Por ejemplo, si utilizas el tema jekyll-theme-clean-blog, los nombres de diseño para el archivo index. html es home, para otras páginas es page, y para todos los mensajes es post.

Por último, ejecuta jekyll serve para crear y servir tu sitio con el nuevo tema.

Ya está tu sitio Jekyll debería utilizar ahora el nuevo tema basado en gemas que has añadido. Puedes personalizar aún más el tema modificando su diseño en los directorios _layouts de tu sitio.

Personalizar un tema Jekyll

Ahora que ya tienes tu tema añadido a tu sitio, la siguiente acción sería personalizar el sitio para que satisfaga tus necesidades y funcione como está previsto que funcione. Por ejemplo, las imágenes de cada página y entrada no se muestran, sino que muestra un fondo gris.

Puedes arreglar esto añadiendo una opción de materia frontal a cada página y post especificando la ruta a una imagen que desees utilizar. En Jekyll, los activos como las imágenes se almacenan en la carpeta de assets. En esta carpeta, puedes decidir crear subcarpetas para organizar tus imágenes.

Ahora puedes añadir una opción de fondo al bloque front matter y una ruta a su imagen. Por ejemplo, en la página Acerca de, este es el asunto principal:

---
layout: page
title: About
description: This is the page description. 
permalink: /about/
background: '/assets/images/about-page.jpeg'
---

Haz esto para todas las páginas y entradas y tu página tendrá este aspecto:

Otra personalización que puedes hacer es ajustar las opciones de la barra de navegación. Por ejemplo, puede que no necesites una página de contacto, lo que significa que deberías eliminar su enlace de las opciones de la barra de navegación. Puedes hacerlo estudiando el código fuente del tema, fijándote en el archivo responsable de los enlaces de la navbar, y replicando el archivo exactamente en tu proyecto, eliminando la opción que no necesites.

Los enlaces nav están en el archivo navbar.html de la carpeta _includes. Puedes crear este archivo, pegar el código de tu código fuente, y eliminar la opción de contacto o añadir cualquier opción nueva que desees.

Cuando guardes tu proyecto, te darás cuenta de que las opciones de la navbar estarán personalizadas:

Finalmente, una última personalización sería crear una página de entradas que contendrá todas las entradas de tu blog – lo que significa que harás un bucle a través de todas las entradas en esta página.

Crea un archivo, posts.html y pega el siguiente código:

---
layout: page
title: Blog
description: Expand your knowledge and stay informed with our engaging blog posts.
background: '/assets/images/blog-page.jpeg'
---

{% for post in site.posts %}

<article class="post-preview">
    <a href="{{ post.url | prepend: site.baseurl | replace: '//', '/' }}">
        <h2 class="post-title">{{ post.title }}</h2>
        {% if post.subtitle %}
        <h3 class="post-subtitle">{{ post.subtitle }}</h3>
        {% else %}
        <h3 class="post-subtitle">
            {{ post.excerpt | strip_html | truncatewords: 15 }}
        </h3>
        {% endif %}
    </a>
    <p class="post-meta">
        Posted by {% if post.author %} {{ post.author }} {% else %} {{ site.author
        }} {% endif %} on {{ post.date | date: '%B %d, %Y' }} · {% include
        read_time.html content=post.content %}
    </p>
</article>

<hr />

{% endfor %}

Siéntete libre de ajustar la imagen de fondo para reflejar tu imagen guardada. En el código anterior, estás recorriendo todas las entradas para mostrar todas las entradas de esta página. Este es el aspecto que tendrá la página de entradas una vez guardada.

Cómo Añadir Contenido a un Sitio Jekyll

Ya has creado un sitio Jekyll y lo has configurado para satisfacer tus necesidades. El último paso sería añadir contenido o aprender cómo se puede añadir contenido a un sitio Jekyll.

Todo el contenido se almacena en la carpeta _posts. Cada contenido se almacena en un archivo con una convención de nomenclatura similar a YYYY-MM-DD-title.md  (o .html para archivos HTML). Por ejemplo, si quieres crear una entrada llamada «Mi primera entrada», crea un 2023-03-08-my-first-post.md en el directorio _posts.

A continuación, para cada archivo de entrada/contenido, asegúrate de añadir información sobre la entrada en la parte superior. Esto incluirá el diseño, el título, la descripción, la fecha y otra información.

---
layout: post
title: "How to Read Books: Tips and Strategies for Maximum Learning"
subtitle: "Reading books is one of the most powerful ways to learn new information, gain new perspectives, and expand your knowledge."
date: 2023-03-02 23:45:13 -0400
background: '/assets/images/blog/books.jpeg'
---

A continuación, puedes añadir tu contenido debajo del bloque de asunto principal con etiquetas HTML o sintaxis markdown.

Guarda el archivo y Jekyll lo creará e incluirá automáticamente en tu sitio.

Cómo Desplegar Tu Sitio Jekyll en Kinsta

Kinsta es una plataforma en la nube que te permite alojar sitios web estáticos, incluido Jekyll. Esto se puede hacer estableciendo algunas configuraciones, enviando tus códigos a GitHub, y finalmente desplegando en Kinsta.

Requisitos previos: Configurar tu sitio Jekyll

Comprueba tu archivo Gemfile.lock y asegúrate de que incluye una plataforma para todos los dispositivos. Para asegurarte de que todas las plataformas están correctamente configuradas, ejecuta el siguiente comando:

bundle lock --add-platform arm64-darwin-22 x64-mingw-ucrt x86_64-linux

A continuación, puedes proceder a crear un archivo Procfile – este archivo especifica los comandos que se ejecutan cuando se despliega tu sitio. Este archivo actualiza automáticamente los comandos que se ejecutarán en la pestaña Proceso de MyKinsta. Este es el comando que debes añadir a tu Procfile:

web: bundle exec jekyll build && ruby -run -e httpd _site

Envía tu sitio Jekyll a GitHub

Para este artículo, vamos a utilizar comandos Git para enviar tus códigos a GitHub. Primero, crea un repositorio en GitHub; esto te dará acceso a la URL del repositorio.

Ahora puedes inicializar un repositorio Git local abriendo tu terminal, navegando hasta el directorio que contiene tu proyecto y ejecutando el siguiente comando:

git init

Ahora añade tu código al repositorio Git local utilizando el siguiente comando:

git add

Ahora puedes confirmar tus cambios utilizando el siguiente comando:

git commit -m "my first commit"

Nota: Puedes sustituir «mi primera confirmación» por un breve mensaje que describa tus cambios.

Por último, envía tu código a GitHub utilizando los siguientes comandos:

git remote add origin [repository URL]
git push -u origin master

Nota: Asegúrate de sustituir «[URL del repositorio]» por la URL de tu propio repositorio de GitHub.

Una vez que hayas completado estos pasos, tu código será enviado a GitHub y accesible a través de la URL de tu repositorio. ¡Ya puedes desplegarlo en Kinsta!

Despliega tu sitio Jekyll en Kinsta

El despliegue en Kinsta se realiza en cuestión de minutos. Comienza en el panel MyKinsta para iniciar sesión o crear tu cuenta. A continuación, autorizarás a Kinsta en GitHub.

A continuación, puedes seguir estos pasos para desplegar tu sitio Jekyll:

1. Haz clic en Aplicaciones en la barra lateral izquierda
2. Haz clic en Añadir servicio
3. Haz clic en Aplicación en el menú desplegable

Aparecerá un modal a través del cual podrás seleccionar el repositorio que deseas desplegar. Selecciona la rama que deseas desplegar si tienes varias ramas en tu repositorio.

A continuación, puedes asignar un nombre a esta aplicación. Selecciona una ubicación de centro de datos entre las disponibles en 25 y, a continuación, el Procfile suministrará automáticamente el comando de proceso web.

Tu aplicación comenzará a desplegarse. En unos minutos, se proporcionará un enlace para acceder a la versión desplegada de tu sitio web. En este caso, es: https://myblog-84b54.kinsta.app/

Resumen

Hasta ahora, has aprendido cómo funciona Jekyll y las diversas personalizaciones que puedes hacer con Jekyll. Ahora puedes estar seguro de que Jekyll es una herramienta excelente para crear sitios web estáticos gracias a su sencillez, flexibilidad y potentes funciones.

El intuitivo sistema de plantillas de Jekyll, las plantillas líquidas y la compatibilidad integrada con markdown y otros lenguajes de marcado facilitan la creación y gestión rápida de sitios ricos en contenido.

Siéntete libre de alojar todos tus sitios web estáticos con el Alojamiento de Aplicaciones de Kinsta de forma gratuita, y si te gusta, opta por nuestro plan Nivel Hobby, a partir de 7 dólares al mes.

¿Qué opinas de Jekyll? ¿Has utilizado Jekyll para construir algo? No dudes en compartir tus proyectos y experiencias con nosotros en la sección de comentarios más abajo.