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 en línea, promocionar su marca y llegar a clientes potenciales. Sin embargo, crear un sitio web puede ser una tarea desalentadora.

Aquí es donde entran en juego los generadores de sitios estáticos (SSG): facilitan la creación de sitios web hermosos y de carga rápida sin la necesidad de complejos sistemas back-end o bases de datos.

En este artículo, se le presentará uno de los SSG populares: Jekyll, aprenderá cómo funciona y cómo puede crear un sitio web estático con él.

Aquí hay una demostración en vivo del sitio de blog que construirá con Jekyll.

Puede acceder al repositorio de GitHub del proyecto si desea echar un vistazo más de cerca.

¿Qué es Jekyll?

Jekyll es un SSG gratuito de código abierto que está construido y se ejecuta en el lenguaje de programación Ruby. No necesitas entender cómo funciona Ruby para usar Jekyll; solo necesita tener Ruby instalado en su máquina.

Jekyll se puede utilizar para crear varios tipos de sitios estáticos, como un blog personal, un sitio web de cartera y un sitio web de documentación sin necesidad de una base de datos o utilizando un sistema de gestión de contenido como WordPress.

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

1. Fácil de usar : Jekyll usa archivos de texto sin formato y sintaxis de marcado para crear y administrar contenido, lo que significa que no necesita tener conocimientos de HTML o CSS para comenzar.
2. Rápido y seguro: Jekyll no se ocupa de ninguna base de datos o secuencias de comandos del lado del servidor, lo que significa que hay menos riesgo de vulnerabilidades y ataques. Genera archivos HTML estáticos que hacen que su sitio web sea increíblemente rápido y seguro.
3. Personalizable: Jekyll es altamente personalizable, lo que le permite usar diseños y plantillas o incluso crear complementos para ampliar la funcionalidad.
4. Fácil de implementar : Jekyll genera archivos HTML estáticos que se pueden implementar en un servidor web o proveedor de alojamiento sin necesidad de un sistema de gestión de contenido dinámico.
5. Respaldado por una gran comunidad: Jekyll tiene una gran comunidad de usuarios y desarrolladores, lo que significa que hay muchos recursos disponibles si necesita ayuda o desea ampliar la funcionalidad de su sitio.

Cómo instalar Jekyll

Primero debe instalar Ruby en su máquina antes de proceder a instalar Jekyll como se indica en la documentación de Jekyll.

Cómo instalar Jekyll en macOS

De manera predeterminada, Ruby viene preinstalado con macOS, pero no se recomienda que use una versión de este tipo 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 cual la última versión es la 3.1.3 (al momento de escribir este artículo).

Para solucionar esto, necesitaría instalar Ruby correctamente usando un administrador de versiones como chruby. Primero necesitaría instalar Homebrew en su Mac usando el siguiente comando en su terminal:

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

Una vez que la instalación sea exitosa, salga y reinicie Terminal, luego verifique si Homebrew está listo ejecutando este comando:

 brew doctor

Si obtiene " Su sistema está listo para preparar" , ahora puede pasar a instalar chruby y ruby-install con el siguiente comando:

 brew install chruby ruby-install

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

 ruby-install 3.1.3

Esto tomará unos pocos minutos. Una vez que tenga éxito, configure su shell para usar automáticamente chruby con el siguiente comando:

 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 puede salir y reiniciar su terminal, luego verifique que todo funcione ejecutando este comando:

 ruby -v

Debería decir ruby ​​3.1.3 .

Ahora tiene la última versión de Ruby instalada en su máquina. Ahora puede 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 con Windows, usaría RubyInstaller. Esto se puede hacer descargando e instalando una versión de Ruby+Devkit desde RubyInstaller Downloads y usando las opciones predeterminadas para la instalación.

En la última etapa del asistente de instalación, ejecute el paso ridk install , que se usa para instalar gemas. Obtenga más información a través de la documentación de RubyInstaller.

De las opciones, elija la cadena de herramientas de desarrollo MSYS2 y MINGW. Abra una nueva ventana del símbolo del sistema e instale Jekyll y Bundler usando el siguiente comando:

 gem install jekyll bundler

Cómo verificar que Jekyll esté instalado correctamente

Para verificar que Jekyll esté instalado correctamente en su máquina, abra su terminal y ejecute el siguiente comando:

 jekyll -v

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

Comandos y configuración de Jekyll

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

Comandos CLI de Jekyll

Estos son algunos de los comandos populares de la CLI de Jekyll. No es necesario que los memorices, solo debes saber que existen y no dudes en volver a comprobar qué hace cada uno de ellos cuando notes su uso más adelante en este artículo.

• jekyll build : genera el sitio estático en el directorio _site .
• jekyll serve : crea el sitio e inicia un servidor web en su máquina local, lo que le permite obtener una vista previa del sitio en su navegador en http://localhost:4000.
• jekyll new [site name] : crea un nuevo sitio Jekyll en un nuevo directorio con el nombre del sitio especificado.
• jekyll doctor : genera cualquier problema de configuración o dependencia que pueda estar presente.
• jekyll clean : elimina el directorio _site , que es donde se almacenan los archivos del sitio generado.
• jekyll help : genera la documentación de ayuda para Jekyll.
• jekyll serve --draft : genera y sirve su sitio Jekyll, incluidas las publicaciones que se encuentran en el directorio _drafts .

También puede agregar algunas opciones a estos comandos. Vea una lista completa de los 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 configuraciones y opciones para su sitio de Jekyll. Se utiliza para configurar varios aspectos de su sitio, incluido 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 su sitio.
• description: Una breve descripción de su sitio.
• url: la URL base de su sitio.
• baseurl: el subdirectorio de su sitio, si está alojado en un subdirectorio de un dominio.
• enlace permanente: la estructura de URL para sus publicaciones y páginas.
• excluir: una lista de archivos o directorios para excluir del proceso de generación del sitio.
• incluir: una lista de archivos o directorios para incluir en el proceso de generación del sitio.
• paginar: la cantidad de publicaciones que se muestran por página cuando se usa la paginación.
• complementos: una lista de complementos de Jekyll para cargar.
• tema: De forma predeterminada, está configurado en minima . Puede usar cualquier otro tema configurando su nombre e implementando otras configuraciones que veremos más adelante en este artículo.

También puede crear variables personalizadas en su archivo de configuración y usarlas en las plantillas, diseños e inclusiones de su sitio. Por ejemplo, podría crear una variable llamada author_name y luego usarla en sus plantillas de esta manera: {{ site.author_name }} .

Para modificar su archivo de configuración de Jekyll, abra el archivo _config.yml en el directorio de su proyecto Jekyll en un editor de texto y realice los cambios.

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

¿Cómo se crea un sitio web estático en Jekyll?

Ahora que tiene Jekyll instalado en su máquina, ahora es posible crear un sitio web estático de Jekyll con un comando en unos pocos segundos. Abre tu terminal y ejecuta este comando:

 jekyll new joels-blog

Asegúrese de reemplazar "joels-blog" con el nombre de su sitio preferido.

A continuación, navegue a la carpeta del sitio web. Notará una estructura básica del sitio Jekyll que incluye directorios y archivos como estos:

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

Esto es para lo que sirve cada uno de estos directorios y archivos:

• _config.yml: el archivo de configuración de Jekyll que contiene la configuración y las opciones de su sitio.
• _posts: un directorio que contiene el contenido de su sitio (pueden ser publicaciones de blog). Estos pueden ser archivos Markdown o HTML con una convención de nomenclatura de archivos específica: AÑO-MES-DÍA-título.MARKUP .
• Gemfile y Gemfile.lock: Bundler usa estos archivos para administrar las gemas de Ruby en las que se basa su sitio.
• index.md: la página de inicio predeterminada de su sitio, generada a partir de un archivo Markdown o HTML.

Pero hay más archivos/carpetas que se pueden usar para personalizar su sitio web de Jekyll. Estas carpetas incluyen:

• _incluye: un directorio que contiene fragmentos de HTML reutilizables que se pueden incluir en sus diseños y páginas. Como barra de navegación, pie de página, etc.
• _layouts: un directorio que contiene plantillas de diseño HTML que definen la estructura de sus páginas.
• activos: un directorio que contiene los archivos que utiliza su sitio, como imágenes y archivos CSS.
• _sass: un directorio que contiene archivos Sass que se pueden usar para generar CSS para su sitio.

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

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

Como alternativa a comenzar su proyecto usando Jekyll CLI, puede crear un repositorio Git usando la plantilla Jekyll "Hello World" de Kinsta en GitHub. Seleccione Usar esta plantilla > Crear un nuevo repositorio para copiar el código de inicio en un nuevo repositorio dentro de su propia cuenta de GitHub.

Cómo obtener una vista previa de un sitio Jekyll

Ahora tiene un sitio de Jekyll, pero ¿cómo puede obtener una vista previa del sitio web para ver cómo se ve antes de comenzar a personalizarlo para satisfacer sus necesidades? Abra su terminal y muévase al directorio de su proyecto, luego ejecute el siguiente comando:

 jekyll serve

Esto generará una carpeta _site que incluye todos los archivos estáticos generados a partir de su proyecto. También iniciará el servidor Jekyll y podrá obtener una vista previa de su sitio a través de http://localhost:4000 .

Si visita la URL en su navegador web, debería ver su sitio Jekyll con el tema mínimo:

Cómo personalizar un sitio Jekyll

Cuando crea un sitio con Jekyll y usa un tema, puede personalizar el sitio para satisfacer sus necesidades. Por ejemplo, es posible que desee agregar 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 la materia frontal en Jekyll

Cuando abra cada página o publicación de blog de la carpeta de su proyecto, notará un bloque de información dentro de tres guiones (—) en la parte superior de la página. Esto se conoce como material preliminar .

Es un formato de metadatos que se usa en Jekyll para almacenar información sobre una página o publicación; se puede escribir 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 tema principal incluye variables, como el título, la descripción y la fecha de la publicación. Estas variables se pueden usar en la página o el diseño o el contenido de la publicación.

Jekyll parse es el tema principal y lo usa para generar el HTML de salida para su sitio. Puede usar el material preliminar para especificar varias opciones, como el diseño, el enlace permanente, el estado publicado, etc.

Cómo configurar el material frontal predeterminado

También puede configurar la información preliminar predeterminada, por lo que no necesita definir la misma información preliminar para archivos similares. Por ejemplo, si cada publicación de blog usa el mismo nombre y diseño del autor. Puede definir un frente personalizado en su archivo _config.yml para publicar todas las publicaciones de su blog.

La forma en que está estructurada es un poco compleja, pero así es como se verá. Pegue esto debajo de la última configuración en su archivo _config.yml :

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

Cuando ejecute el comando jekyll serve , notará que incluso cuando no define el diseño y el autor en cada publicación, aún tiene acceso a ellos dentro de sus archivos.

Nota: Cuando no define una ruta, todos los archivos utilizarán los valores de materia prima definidos.

Creación de páginas en Jekyll

Cuando crea un archivo en el directorio raíz de su proyecto, se considera una página. El nombre que le da al archivo se usa la mayoría de las veces en la URL, por lo que nombrará a cada archivo de página con un nombre que resuene bien.

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

Una vez que haya creado un archivo, agregue el material preliminar y el contenido adecuados. Guarde el archivo y actualice su sitio Jekyll en el navegador. Ahora se debe poder acceder a la nueva página en la URL correspondiente al nombre del archivo.

Creación de diseños en Jekyll

Puede usar Diseños para definir la estructura y el diseño de las páginas y publicaciones de su sitio. Esto generalmente se hace principalmente con código HTML. Puede incluir un encabezado, pie de página, metainformación con los metadatos de la página.

El primer paso sería crear una carpeta _layouts en el directorio raíz de su proyecto. Luego cree un archivo para cada diseño; el archivo debe tener un nombre descriptivo que refleje el propósito del diseño. Por ejemplo, puede crear un archivo llamado page.htm l para definir el diseño de página para todas las páginas de su sitio.

Es mejor definir la estructura general de sus diseños con HTML u otro lenguaje de marcado.

Puede incluir marcadores de posición para cualquier contenido dinámico que se insertará en el diseño, como el título de la página, el contenido y los metadatos. Por ejemplo, puede crear un diseño básico que incluya un encabezado, un pie de página y un área de contenido como este:

 <!DOCTYPE html> <html> <head> <title>{{ page.title }}</title> </head> <body> <header> <!-- Navigation menu goes here --> </header> <main>{{ content }}</main> <footer> <!-- Footer content goes here --> </footer> </body> </html>

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

En este punto, cualquier página o publicación que use la página como su valor de diseño en su portada tendrá este diseño. Puede crear varios diseños dentro de la carpeta _layouts y diseñar sus diseños como desee. También puede 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 puede incluir en diferentes partes de su sitio web. Por ejemplo, puede crear un archivo navbar.html en su carpeta de inclusión y agregarlo a su archivo de diseño page.html usando la etiqueta {% include %} .

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

En el momento de la compilación, Jekyll reemplazará la etiqueta con 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 su código SECO (No se repita) al permitirle reutilizar el código en su sitio.

Recorriendo publicaciones en Jekyll

Es posible que desee crear una página de blog dedicada para contener todas las publicaciones de su blog, esto significa que desea obtener todas las publicaciones en su sitio y recorrerlas. Con Jekyll es fácil de lograr usando la etiqueta {% for %} .

Todas las publicaciones en cualquier sitio web de Jekyll se almacenan en la variable site.posts . Puede recorrer y usar la variable Liquid {{ post.title }} para generar el título de cada publicación de esta manera:

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

También puede usar variables de Liquid adicionales para generar otra información sobre cada publicación, como la fecha o el autor de la publicación:

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

Tenga en cuenta que en el ejemplo anterior, el filtro de fecha Liquid formatea la fecha de cada publicación en un formato más legible por humanos.

Ahora, tiene una idea de algunos formatos básicos que se pueden aplicar a su sitio Jekyll. Pero es posible que no necesite usar todo esto para crear un sitio de Jekyll desde cero porque siempre puede buscar un tema que satisfaga sus necesidades y agregarlo a su sitio de Jekyll.

Cómo agregar un tema a un sitio Jekyll

Hay varios temas fáciles de agregar, pero lo bueno es que para cada tema, siempre hay información clara sobre cómo instalarlos en el archivo Léame en GitHub. Puede 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ía un tema de blog y lo personalizaría para implementar un sitio de blog en Kinsta. Este es un tema basado en gen y puede acceder a su código fuente e instrucciones en GitHub.

Para agregar un tema basado en gemas, abra el Gemfile de su sitio y agregue la gema para el tema que desea usar. El tema que usaremos es jekyll-theme-clean-blog . Puede reemplazar el tema mínimo predeterminado en el Gemfile:

 gem "jekyll-theme-clean-blog"

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

En el archivo _config.yml de su sitio, agregue la siguiente línea para especificar el tema que desea usar:

 theme: jekyll-theme-clean-blog

En este punto, su tema está listo para usar.

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

Luego puede encontrar los nombres de diseño para sus archivos en la documentación del tema. Por ejemplo, si usa el tema jekyll-theme-clean-blog , los nombres de diseño para el archivo index.html son home , otras páginas es page y todas las publicaciones son post .

Finalmente, ejecute jekyll serve para construir y servir su sitio usando el nuevo tema.

¡Eso es todo! Su sitio Jekyll ahora debería estar usando el nuevo tema basado en gemas que agregó. Puede personalizar aún más el tema modificando su diseño en los directorios _layouts de su sitio.

Personaliza un tema de Jekyll

Ahora tiene su tema agregado a su sitio, la siguiente acción sería personalizar el sitio para satisfacer sus necesidades y trabajar como debe funcionar. Por ejemplo, las imágenes de cada página y publicación no se muestran, sino que muestran un fondo gris.

Puede solucionar esto agregando una opción de tema principal a cada página y publicación especificando la ruta a una imagen que desea usar. En Jekyll, los recursos, como las imágenes, se almacenan en la carpeta de recursos . En esta carpeta, puede decidir crear subcarpetas para organizar sus imágenes.

Ahora puede agregar una opción de fondo al bloque de materia frontal y una ruta a su imagen. Por ejemplo, en la página Acerca de, este es el tema principal:

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

Haga esto para todas las páginas y publicaciones y su página se verá así:

Otra personalización que puede hacer es ajustar las opciones de la barra de navegación. Por ejemplo, es posible que no necesite una página de contacto, lo que significa que debe eliminar su enlace de las opciones de la barra de navegación. Puede hacer esto estudiando el código fuente del tema, observando el archivo responsable de los enlaces de navegación y replicando el archivo exactamente en su proyecto, eliminando la opción que no necesita.

Los enlaces de navegación están en el archivo navbar.html de la carpeta _includes. Puede crear este archivo, pegar el código de su código fuente y eliminar la opción de contacto o agregar cualquier opción nueva que desee.

Cuando guarde su proyecto, notará que las opciones de navegación se personalizarán:

Finalmente, una última personalización sería crear una página de publicaciones que contenga todas las publicaciones de su blog, lo que significa que recorrerá todas las publicaciones en esta página.

Cree un archivo, posts.html y pegue 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éntase libre de ajustar la imagen de fondo para reflejar su imagen guardada. En el código anterior, está recorriendo todas las publicaciones para mostrar todas las publicaciones en esta página. Así es como se verá la página de publicaciones cuando se guarde.

Cómo agregar contenido a un sitio Jekyll

Ahora ha creado un sitio Jekyll y configurado el sitio para satisfacer sus necesidades. El último paso sería agregar contenido o aprender cómo se puede agregar contenido a un sitio de Jekyll.

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

A continuación, para cada publicación/archivo de contenido, asegúrese de agregar información preliminar sobre la publicación 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' ---

Luego, puede agregar su contenido debajo del bloque principal con etiquetas HTML o sintaxis de rebajas.

Guarde el archivo y Jekyll lo compilará e incluirá automáticamente en su sitio.

Cómo implementar su sitio Jekyll en Kinsta

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

Requisitos previos: configuración de su sitio Jekyll

Verifique su archivo Gemfile.lock y asegúrese de que incluya una plataforma para todos los dispositivos. Para asegurarse de que todas las plataformas estén configuradas correctamente, ejecute el siguiente comando:

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

Luego puede proceder a crear un Procfile : este archivo especifica los comandos que se ejecutan cuando se implementa su sitio. Este archivo actualiza automáticamente los comandos que se ejecutarán en la pestaña Proceso de MyKinsta. Este es el comando que se agregará a su Procfile:

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

Empuje su sitio Jekyll a GitHub

Para este artículo, usemos los comandos de Git para enviar sus códigos a GitHub. Primero, crea un repositorio en GitHub; esto le dará acceso a la URL del repositorio.

Ahora puede inicializar un repositorio Git local abriendo su terminal, navegando al directorio que contiene su proyecto y ejecutando el siguiente comando:

 git init

Ahora agregue su código al repositorio Git local usando el siguiente comando:

 git add

Ahora puede confirmar sus cambios usando el siguiente comando:

 git commit -m "my first commit"

Nota: puede reemplazar "mi primera confirmación" con un breve mensaje que describa sus cambios.

Finalmente, envíe su código a GitHub usando los siguientes comandos:

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

Nota: asegúrese de reemplazar "[URL del repositorio]" con su propia URL del repositorio de GitHub.

Una vez que haya completado estos pasos, su código se enviará a GitHub y se podrá acceder a él a través de la URL de su repositorio. ¡Ahora puede implementar en Kinsta!

Implementación de su sitio Jekyll en Kinsta

La implementación en Kinsta ocurre en solo minutos. Comience en el panel de My Kinsta para iniciar sesión o crear su cuenta. A continuación, autorizará a Kinsta en GitHub.

Luego puede seguir estos pasos para implementar su sitio Jekyll:

1. Haga clic en Aplicaciones en la barra lateral izquierda
2. Haga clic en Agregar servicio
3. Haga clic en Aplicación en el menú desplegable

Aparecerá un modal a través del cual puede seleccionar el repositorio que desea implementar. Seleccione una rama que desee implementar si tiene varias ramas en su repositorio.

A continuación, puede asignar un nombre a esta aplicación. Seleccione una ubicación de centro de datos entre los 25 disponibles y, a continuación, Procfile proporcionará automáticamente el comando de proceso web.

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

Resumen

Hasta ahora, ha aprendido cómo funciona Jekyll y las diversas personalizaciones que puede hacer con Jekyll. Ahora es seguro estar de acuerdo en que Jekyll es una excelente herramienta para crear sitios web estáticos debido a su simplicidad, flexibilidad y potentes funciones.

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

Siéntase libre de hospedar todos sus sitios web estáticos con el hospedaje de aplicaciones de Kinsta de forma gratuita y, si lo desea, opte por nuestro plan Hobby Tier, desde $7/mes .

¿Cuál es tu opinión sobre Jekyll? ¿Has utilizado a Jekyll para construir algo? No dude en compartir sus proyectos y experiencias con nosotros en la sección de comentarios a continuación.