Cómo construir un blog con Jekyll

Sep 12, 2025

Cómo

[dieciséis] (Crédito de la imagen: NET)

Este tutorial es para las personas que han oído hablar de los generadores de sitios estáticos y han decidido que desean ir a construir su propio sitio usando uno. Aquí vamos a mostrarte Cómo iniciar un blog usando jekyll.

Un conocimiento básico de la terminal es bueno, aunque debería poder seguir a medida que los comandos son bastante simples. Los sitios en las páginas de GitHub están alimentados por Jekyll detrás de las escenas, por lo que cuando se usa junto con las páginas de GitHub, crea una forma de alojar y administrar su sitio web gratis (consulte nuestra lista de los mejores Alojamiento web Servicios para otras opciones, o ver nuestra lista si desea un tipo diferente de Creador de sitios web ).

Este tutorial asume que estás en una Mac; Como Jekyll es un programa de rubí, es posible ejecutarlo en Windows, pero no es oficialmente compatible. Si está siguiendo en Windows, saltar por aquí Por ayuda para configurar Ruby.

Después de completar este tutorial, habrá creado un blog de Jekyll y se enterará de cómo sus características y lenguaje de plantilla pueden construir un blog personal. Este es un gran punto de partida para desarrollar su propio sitio. Y recuerde, si tiene muchas ideas de diseño o archivos de medios, asegúrese de mantenerlos de forma segura en los mejores almacenamiento en la nube .

Encuentra los archivos para este tutorial. aquí .

10 mejores generadores de sitios estáticos

01. Ponerse en marcha

En una Mac, debe tener instalado Ruby de forma predeterminada, pero vamos a verificar escribiendo ruby -v en su terminal.

Ahora, en realidad, podemos hacer que Jekyll se ejecute en el sitio, asegúrese de estar en el directorio que desea crear su sitio y simplemente escribir GEM INSTALAR JEKYLL BUNDLER ; Su computadora va a ir y agarrará todas las dependencias necesarias para ejecutar un sitio.

02. Servir localmente o construir

Hay dos comandos principales que usarás con Jekyll - atender y construir . Para ejecutar su sitio de tipo localmente Jekyll servir en su línea de comando. Esto ejecutará una versión en http://127.0.0.1:4000 para que pueda previsualizar sus cambios. Si ya tiene GEM y otras dependencias instaladas en su máquina, este comando puede fallar debido a un desajuste en las versiones de dependencia; En este caso, prueba Subdle Exec Jekyll servir en lugar de. Corriendo lo mismo pero con la palabra. construir Simplemente compila el sitio.

03. Obtenga los archivos de inicio

Copie los archivos suministrados con este tutorial en este punto para darle una base para trabajar. Esto nos dará una página de inicio, una lista de blogs, página de detalles y la estructura de activos para el sitio. Actualice su página en http://127.0.0.1:4000 y verá que ahora tenemos algunas páginas básicas para construir. Tengamos una visión general rápida de cómo funciona un sitio de Jekyll.

Un sitio Jekyll está estructurado de forma fácil de seguir. Cualquier colección (tipos de publicaciones) se mantiene en su propia carpeta, al igual que los diseños e incluye. Notará una carpeta '_site': esta es la carpeta que usa Jekyll cuando ejecuta un Jekyll Build mando.

04. Configuración

Abra _config.yml en su editor de texto y agregue sus propios detalles; Un área clave para verificar es configurar su URL base. Esta es la carpeta en la que se está cargando su sitio. El archivo de configuración es similar a usar las opciones globales combinadas con su archivo WP-Config si estaba construyendo un tema de WordPress.

Puede controlar la información del núcleo, como los títulos y las descripciones de META, su correo electrónico y las cuentas sociales y luego toda la información que el sitio necesita para compilar, como las colecciones y los complementos utilizados. Puede usar una mezcla de HTML y marcar para páginas, dependiendo de lo que quiera lograr. Sin embargo, las páginas personalizadas, como su página de inicio y las páginas de la lista, generalmente serán HTML, mientras que las publicaciones y otras páginas generales que usan una plantilla establecida se reducirán.

05. Materia delantera

La materia frontal es un fragmento de YAML en la parte superior de un archivo. Jekyll lo usa para mantener las variables. Mire en el archivo sobre.md y puede ver que establecemos el título, que diseñó para usar, el autor y cualquier imagen relacionada.

06. Etiquetas de líquido

Jekyll usa líquido: un lenguaje de plantilla que usa objetos, etiquetas y filtros. Utilizamos el objeto Etiqueta rodeada de tirantes dobles. {{}} Para salir de las variables de la materia frontal y un signo de abrazancia y porcentaje para la lógica {%%} .

07. Construye tu navegación

En lugar de una navegación estática, usamos el poder de los archivos de configuración para separar el contenido de la plantilla. Realizaremos elementos de navegación en la carpeta 'Datos' como un archivo de configuración y luego bucle a través de ellos en navegación.html. Solo podemos ingresar las páginas y los enlaces que queremos seguir adelante sin volver a la plantilla. Asegúrese de tener mucho cuidado con el espacio en blanco al editar sus archivos de configuración, como navegación.yml o la materia frontal al inicio de una publicación, ya que un espacio perdido causará un error.

El archivo de configuración ya está configurado, así que ingrese el siguiente código en su archivo 'navigation.html' incluya:

 {% para el artículo en sitio.data.navigation%}
     & lt; a href = "{{sitio.baseurl}} / {{item.link}}" {% if page.url == item.link%} clase = "actual" {% endif%} & gt; {{item .NAME}} & LT; / A & GT;
   {% endfor%}

Estamos utilizando etiquetas de lógicas líquidas para buscar en el archivo de configuración de navegación y reducir un enlace y un nombre para cada entrada, básicamente solo un estándar para el bucle.

08. Crea la página de inicio.

En nuestra página de inicio, vamos a enumerar nuestra última publicación de blogs como héroe y luego tener un fragmento de nuestro acerca de nuestra página con un enlace. Vamos a empezar con el bloqueo del héroe. Abra index.html y luego agregue el siguiente código:

 {% Asignar post = sitio.posts.first%}
& lt; div clase = "C-Hero" Style = "Background: URL ({{Post.Thumbnail_Image.large | Relative_Url}}) Centro de fondo / Cubierta sin repetición;" & gt;
   & lt; h1 class = "c-hero__title" & gt; {{post.title}} & lt; / h1 & gt;
   {{Post.Intro | Markdownify}}
   & lt; a href = "{{post.url}}" class = "btn - héroe" & gt; Lea el post completo & lt; / a & gt;
& lt; / DIV & GT;

Verá que primero asignamos la última publicación y luego haga referencia a la imagen en miniatura que se encuentra en la materia frontal de la publicación. El post intro usa un filtro líquido. marcar para convertir la descuento a HTML.

Con eso en su lugar, también agreguemos un teaser de la página sobre la página. Añadir lo siguiente:

 & lt; div clase = "C-Feature" & GT;
   {% para página en sitio.pages%}
       {% if page.url == '/about.html'%}
           & lt; img src = "{{page.profile_image.small}}" alt = "profie imagen" clase = "C-feature__Image" / & gt;
           & lt; div clase = "C-Feature__Text" & GT;
               & lt; h2 & gt; & lt; a href = "{{page.url}}" & gt; {{page.title}} & lt; / a & gt; & lt; & lt; & lt; & lt; / h2 & gt;
               & lt; p & gt; {{page.intro}} & lt; / p & gt;
           & lt; / DIV & GT;
          
       {% terminara si %}
   {% endfor%}
& lt; / DIV & GT;

Esta vez estamos usando un por bucle para revisar las páginas en el sitio. Estamos usando URL de la página Para filtrar la página Acerca de la página y luego usamos un estilo de plantilla similar al héroe para emitir la información de las páginas.

09. Lista de blogs

Con la página de inicio creada, podemos pasar a la página de la lista de blogs. Para crear la página de lista, volvemos a usar etiquetas líquidas para darnos la lógica para bucle a través de todos los archivos en la carpeta 'Publicaciones'.

El héroe se hace por usted porque sigue el mismo proceso que la página de inicio. Debajo del héroe en 'blog.html', agregue lo siguiente:

 & lt; div clase = "restringir" & gt;
   & lt; H1 & GT; Lo mejor del resto & lt; / H1 & GT;
   & lt; Sección Class = "Lista de tarjetas" & GT;
           {% para publicar en el sitio.posts offset: 1%}
           & lt; div clase = "tarjeta" & gt;
                   & lt; img src = "{{post.thumbnail_image.small}}" / & gt;
                   & lt; div clase = "Detalles de la tarjeta" & gt;
                   & lt; h3 & gt; {{post.date | Fecha: "% d% b"}} - {{post.title}} & lt; / h3 & gt;
               & lt; a href = "{{post.url}}" class = "btn" & gt; Leer más y lt; / a & gt;
                   & lt; / DIV & GT;
               & lt; / DIV & GT;
           {% endfor%}
          
   & lt; / Sección y GT;
& lt; / DIV & GT;

Otra vez usamos un por Bucle para pasar por la colección de publicaciones. Pero como ya hemos encendido lo último en el héroe, compensamos este bucle para comenzar a publicar dos. Se utiliza un filtro de líquido para convertir la fecha a un formato de nuestra elección.

10. Página de detalle del blog

No es mucho tiempo para ir ahora: casi tenemos todos los elementos básicos juntos. Un aspecto importante que queda a la dirección es la navegación. Cuando está leyendo una publicación de blog, necesita una manera de recorrer y leer más. Podemos agregar una buena paginación a nuestro sitio utilizando una variable de página. Abra Post.HTML en la carpeta Diseños y agregue lo siguiente:

 & lt; Div Class = "C-Pagination" & GT;
   {% if Page.Previous%}
   & lt; div & gt;
       & lt; H3 & GT; Anterior y LT; / H3 & GT;
       & lt; p & gt; {{página.previous.title}} & lt; / p & gt;
       & lt; p & gt; & lt; a clase = "btn" href = "{{site.baseurl}} {{página.previous.url}}" & gt; Leer post & lt; / a & gt; & lt; / p & gt; / p & gt;
   & lt; / DIV & GT;
   {% terminara si %}
   {% if PAGE.NEXT%}
   & lt; div & gt;
       & lt; H3 & GT; Up Siguiente & Lt; / H3 & GT;
       & lt; p & gt; {{page.next.title}} & lt; / p & gt;
       & lt; p & gt; & lt; a clase = "btn" href = "{{site.baseurl}} {{page.next.url}}" & gt; Leer post & lt; / a & gt; & lt; / p & gt; / p & gt;
   & lt; / DIV & GT;
   {% terminara si %}
& lt; / DIV & GT;

Utilizamos el Página.Previa y Página.Siguiente Variables para verificar si hay una publicación para hacer clic en. Si hay que entonces podemos generar un bloque e incluir el título y el enlace de la publicación.

11. Construir y publicar.

GitHub Pages hace que los archivos SASS para nosotros, así que cuando corres Jekyll Build Los archivos compilados se crean en la carpeta _site. ¡No hay archivos Gulp o Pack AQUÍ, solo buenos estilos magros! Incluso puede minifique la salida de SASS como una configuración en el archivo de Config.YML principal para el sitio. Los contenidos de este directorio se pueden transferir a su alojamiento elegido. Una cosa a ser consciente de que GitHub Pages en realidad apoya a Jekyll para que pueda construir y organizar un sitio usando su sucursal maestra como la fuente. Puedes encontrar más información sobre esto. aquí .

Este artículo fue publicado originalmente en el número 320 de neto , la revista más vendida del mundo para diseñadores web y desarrolladores web. Compre el problema 320 aquí o Suscríbete aquí .

Artículos relacionados:

Construye un blog con cuadrícula y FlexBox.
Las mejores plataformas de blogs gratuitas.
Cómo construir un sitio de blogs con Gatsby

Cómo construir un blog con Jekyll

01. Ponerse en marcha

02. Servir localmente o construir

03. Obtenga los archivos de inicio

04. Configuración

05. Materia delantera

06. Etiquetas de líquido

07. Construye tu navegación

08. Crea la página de inicio.

09. Lista de blogs

10. Página de detalle del blog

11. Construir y publicar.

Cómo - Artículos más populares

Cómo convertir WordPress en un constructor visual

Cómo crear un efecto de paralaje en capas en su sitio

Procreate Tutorial: Cómo pintar como los maestros viejos

Crea nubes con FumeFX para 3DS MAX

Cómo influir en las clasificaciones de Google con su contenido

Cómo dominar la anatomía de la criatura

5 maneras de administrar el flujo de efectivo efectivamente

Cómo hacer una plataforma de cinta flexible

Categorías