Cómo crear un blog en Jekyll
Jekyll es un generador de sitios estáticos. Básicamente, te ayuda a compilar archivos HTML a partir de plantillas y texto, que luego puedes alojar en cualquier servidor web. Este sitio, Códica Guides, funciona con Jekyll.
A diferencia de los motores de blogs o CMS como Wordpress o Ghost, el resultado final de Jekyll no son programas ejecutables en un lenguaje de programación, sino archivos HTML estáticos. Por lo tanto, no necesitas PHP, Node, bases de datos ni un hosting potente para alojar el sitio. La entrega de archivos estáticos genera una carga mínima en el servidor, por lo que generalmente es suficiente con un hosting económico.
Puedes alojar un sitio de Jekyll de forma gratuita en Github Pages, y eso es lo que haremos en esta guía.
Puedes alojar un sitio de Jekyll de forma gratuita en Github Pages, y eso es lo que haremos en esta guía.
Resumen
Veamos brevemente cómo funciona Jekyll y cómo publicar un sitio:
- 1Creas plantillas para tu sitio: cómo se ve la página principal, cómo se ven las páginas de publicaciones, categorías, encabezados, pies de página y otros bloques del sitio.
- 2Escribes publicaciones en formato Markdown (también se admiten otros formatos).
- 3Jekyll genera las páginas HTML finales basadas en las plantillas y los archivos Markdown.
- 4Publicas los archivos HTML en un servidor web y el sitio se vuelve accesible en Internet.
GitHub Pages te permite alojar cualquier página HTML, pero también admite Jekyll en su lado. Esto significa que no necesitas enviar el HTML generado a Github, solo envía la carpeta de tu proyecto de Jekyll y los archivos Markdown, y Github generará el HTML y lo alojará por ti.
Instalación de Jekyll en tu máquina local
Hay dos formas de trabajar con Jekyll en tu máquina local: directamente o a través de Docker. La segunda forma es más fácil y rápida, pero puede ser desconocida si nunca has trabajado con Docker antes.
Instalación y ejecución directa de Jekyll
Jekyll es un programa de línea de comandos escrito en Ruby. No necesitas conocer este lenguaje para trabajar con Jekyll, pero debes tener el intérprete de Ruby instalado en tu sistema.
Dependiendo del sistema operativo, es posible que ya tengas Ruby instalado.
En Windows, puedes usar RubyInstaller. Debes trabajar con Jekyll a través de la línea de comandos.
La documentación oficial de Jekyll tiene una sección dedicada a diferentes formas de instalar Ruby y Jekyll en Windows.
En macOS, Ruby ya está incluido. Verifica su versión:
Instalación y ejecución directa de Jekyll
Jekyll es un programa de línea de comandos escrito en Ruby. No necesitas conocer este lenguaje para trabajar con Jekyll, pero debes tener el intérprete de Ruby instalado en tu sistema.
Dependiendo del sistema operativo, es posible que ya tengas Ruby instalado.
En Windows, puedes usar RubyInstaller. Debes trabajar con Jekyll a través de la línea de comandos.
La documentación oficial de Jekyll tiene una sección dedicada a diferentes formas de instalar Ruby y Jekyll en Windows.
En macOS, Ruby ya está incluido. Verifica su versión:
ruby -v
ruby 2.3.3p222 (2016-11-21 revision 56859) [x86_64-darwin16]
Necesitas la versión 2.0 o superior. Si tienes una versión anterior por alguna razón, actualiza Ruby con el comando sudo gem install ruby.
Ahora, instala Bundler. Es un administrador de paquetes que te permitirá instalar Jekyll y otros paquetes necesarios:
Ahora, instala Bundler. Es un administrador de paquetes que te permitirá instalar Jekyll y otros paquetes necesarios:
gem install bundler
Luego, instala Jekyll:
gem install jekyll
Ahora, crea un blog:
jekyll new myblog
cd myblog
bundle exec jekyll serve
Abre tu navegador.
Instalación y ejecución de Jekyll a través de Docker
Para obtener más información sobre Docker, puedes leer este tutorial o consultar la documentación oficial y buscar otros artículos en Internet.
La imagen oficial de Docker de Jekyll es jekyll/jekyll.
La forma más sencilla de comenzar es utilizar nuestro paquete con un tema predefinido basado en Bootstrap 4.
Para obtener más información sobre Docker, puedes leer este tutorial o consultar la documentación oficial y buscar otros artículos en Internet.
La imagen oficial de Docker de Jekyll es jekyll/jekyll.
La forma más sencilla de comenzar es utilizar nuestro paquete con un tema predefinido basado en Bootstrap 4.
git clone git@github.com:hexlet-boilerplates/jekyll-bootstrap4-docker.git
cd jekyll-bootstrap4-docker
make serve
Abre tu navegador.
Estructura de archivos
La estructura básica de un directorio de un sitio se ve así:
.
├── _config.yml
├── _drafts
| ├── begin-with-the-crazy-ideas.md
| └── on-simplicity-in-technology.md
├── _includes
| ├── footer.html
| └── header.html
├── _layouts
| ├── default.html
| └── post.html
├── _posts
| ├── 2007-10-29-hello.md
| └── 2009-04-26-good-stuff.md
├── _sass
| ├── _base.scss
| └── _layout.scss
├── _site
└── index.html
En resumen:
- tus publicaciones (por ejemplo, en formato Markdown se encuentran en la carpeta _posts
- las plantillas de las páginas se encuentran en la carpeta _layouts
- los bloques repetitivos utilizados en las plantillas se encuentran en la carpeta _includes
- la página principal del sitio se encuentra en index.html
Jekyll toma una plantilla como base, genera páginas HTML finales para cada publicación y recopila todo el sitio en la carpeta _site.
Configuración
_config.yml
El archivo _config.yml contiene la configuración del sitio.
El archivo _config.yml contiene la configuración del sitio.
title: "Page title"
header_title: "Header Title"
email: your@ema.il
author: Your Name
description: "My blog description"
baseurl: ""
url: "https://myblog.com"
date_format: "%-d.%m.%Y"
Un detalle importante: url es la dirección de tu sitio raíz, y baseurl es la ruta de tu sitio de Jekyll.
https://hello.goo.com/myblog/
|--------------------|======|
| |
url baseurl
Si tu sitio está en la raíz, baseurl estará vacío.
Además de los parámetros básicos, puedes agregar tus propios parámetros en este archivo. Estarán disponibles en las plantillas. Por ejemplo, en nuestro paquete base, hay una línea en la configuración:
Además de los parámetros básicos, puedes agregar tus propios parámetros en este archivo. Estarán disponibles en las plantillas. Por ejemplo, en nuestro paquete base, hay una línea en la configuración:
twitter_username: hexlet
Este parámetro se utiliza en el archivo _includes/header.html:
{% raw %}{% if site.twitter_username %}
<li class="nav-item">
<a class="nav-link" href="https://twitter.com/{{ site.twitter_username }}">
<span class="mr-1 fa fa-twitter"></span>
</a>
</li>
{% endif %}{% endraw %}
Aquí se dice "si hay un parámetro twitter_username en la configuración con un valor no vacío, muestra un enlace a Twitter".
Configuración del tema
Jekyll viene con un tema base. Nuestro paquete se basa en el popular framework Bootstrap 4.
Veamos más de cerca nuestro ejemplo:
Jekyll viene con un tema base. Nuestro paquete se basa en el popular framework Bootstrap 4.
Veamos más de cerca nuestro ejemplo:
- _includes contiene bloques utilizados en varios lugares
- head.html es el elemento <head>, donde se incluyen los estilos, las etiquetas meta, etc.
- header.html es el encabezado del sitio
- footer.html es el pie de página del sitio
- post_footer.html se muestra debajo de una publicación en la página de la publicación (se incluye en la configuración)
- share_buttons.html son los botones de compartir en redes sociales debajo de una publicación en la página de la publicación (se incluyen y se configuran en la configuración)
- social_links.html son los enlaces a redes sociales que se muestran en el encabezado del sitio (se incluyen y se configuran en la configuración)
- _layouts contiene las plantillas principales del sitio
- default.html es la plantilla principal, se utiliza en la página principal
- post.html es la plantilla de una publicación, se utiliza en la página de la publicación
- css contiene los estilos
- style.css es el archivo principal de estilos del sitio
- likely.css son los estilos para los botones de compartir en redes sociales
- js contiene los scripts
- likely.js es el script para los botones de compartir en redes sociales
- images contiene las imágenes
Front Matter
Cualquier archivo que contenga un bloque Front Matter en formato YAML será procesado por Jekyll como un archivo especial. El bloque Front Matter debe ir al comienzo del archivo.
Por ejemplo, la página index.html (página principal del sitio) contiene estas líneas al comienzo:
Cualquier archivo que contenga un bloque Front Matter en formato YAML será procesado por Jekyll como un archivo especial. El bloque Front Matter debe ir al comienzo del archivo.
Por ejemplo, la página index.html (página principal del sitio) contiene estas líneas al comienzo:
---
layout: default
---
Y así se ve la plantilla predeterminada (archivo _layouts/default.html):
{% raw %}<!DOCTYPE html>
<html>
{% include head.html %}
<body>
{% include header.html %}
<div class="container">
<div class="row">
<div class="col">{{ content }}</div>
</div>
{% include footer.html %}
</div>
</body>
</html>{% endraw %}
De esta manera, Jekyll toma el contenido del archivo index.html, lo inserta en {% raw %}{{ content }}{% endraw %} de la plantilla y crea el archivo index.html final.
Creación de publicaciones
Las publicaciones se encuentran en la carpeta _posts. Utilizamos el formato predeterminado: Markdown. Ejemplo de nombre de archivo: 2017-12-18-features.md. Como puedes ver, la fecha de publicación se incluye en el nombre del archivo. Después de la fecha, viene el título que se utilizará en la URL. Esta publicación estará disponible en mysite.com/features.
La publicación también comienza con un bloque front matter:
La publicación también comienza con un bloque front matter:
---
layout: post
title: Features
cover_url: "/images/tree.jpg"
---
Aquí puedes incluir tanto variables de Jekyll como tus propias variables. En este caso, hemos incluido dos variables personalizadas: title y cover_url. Se utilizan en las plantillas:
En el archivo _layouts/post.html:
En el archivo _layouts/post.html:
<h1>{% raw %}{{ page.title }}{% endraw %}</h1>
En el archivo _includes/head.html:
<meta property="og:image" content="{{ page.cover_url | prepend: site.baseurl | prepend: site.url }}">
Aquí se establece la URL completa de la imagen de portada para las redes sociales.
Puedes colocar imágenes en cualquier directorio y usarlas en las publicaciones y en el Front Matter utilizando rutas relativas.
Puedes colocar imágenes en cualquier directorio y usarlas en las publicaciones y en el Front Matter utilizando rutas relativas.
Creación de páginas
Puedes crear cualquier directorio y archivo HTML por tu cuenta, siguiendo el ejemplo de index.html.
Por ejemplo, si creas el directorio works y colocas un nuevo archivo index.html dentro (que incluso puede no contener front matter y ser un archivo estático independiente), la página estará disponible en mysite.com/works (según los valores de url y baseurl en la configuración).
Por ejemplo, si creas el directorio works y colocas un nuevo archivo index.html dentro (que incluso puede no contener front matter y ser un archivo estático independiente), la página estará disponible en mysite.com/works (según los valores de url y baseurl en la configuración).
Publicación en Internet
Publicación de archivos HTML en un servidor web
Simplemente coloca los archivos de la carpeta _site en un servidor web. Casi cualquier hosting servirá para esto.
Publicación en Github Pages con soporte para Jekyll
Github, un popular hosting de repositorios git, admite Jekyll. Esto significa que puedes colocar toda la carpeta de tu proyecto de Jekyll en un repositorio, y Github generará el HTML por ti. No necesitas incluir la carpeta _site en el repositorio. Los archivos HTML finales no se mostrarán en el repositorio de ninguna manera. Este servicio se llama Github Pages.
Más información sobre Git y cómo trabajar con Github se encuentra en el curso gratuito Control de versiones (GIT) en Códica.
Simplemente coloca los archivos de la carpeta _site en un servidor web. Casi cualquier hosting servirá para esto.
Publicación en Github Pages con soporte para Jekyll
Github, un popular hosting de repositorios git, admite Jekyll. Esto significa que puedes colocar toda la carpeta de tu proyecto de Jekyll en un repositorio, y Github generará el HTML por ti. No necesitas incluir la carpeta _site en el repositorio. Los archivos HTML finales no se mostrarán en el repositorio de ninguna manera. Este servicio se llama Github Pages.
Más información sobre Git y cómo trabajar con Github se encuentra en el curso gratuito Control de versiones (GIT) en Códica.
- 1Regístrate en https://github.com/ si aún no lo has hecho.
- 2Crea un nuevo repositorio con el nombre username.github.io, donde username es tu nombre de usuario en Github.
- 3Inicializa el repositorio en el directorio de Jekyll: git init
- 4Agrega el remote: git remote add origin git@github.com:YOUR_USERNAME/YOUR_REPO.git
- 5Haz un commit y envíalo a Github:
git add --all
git commit -m "Initial commit"
git push -u origin master
- 6Después de unos momentos, tu página estará disponible en tu dirección https://YOUR_USERNAME.github.io
Esta es una forma conveniente de trabajar, pero como la compilación se realiza en el lado de Github, no puedes controlar este proceso. Por ejemplo, no puedes instalar ningún plugin, ya que Github solo admite un conjunto limitado de plugins básicos.
Publicación en Github Pages sin soporte para Jekyll
Github Pages te permite alojar cualquier archivo HTML y no trabajar con Jekyll en el lado de Github. Esto significa que simplemente puedes colocar tu carpeta _site en Github. Este enfoque te permite utilizar cualquier plugin, ya que la generación de archivos HTML se realiza en tu propia computadora y Github actúa como un servidor web simple.
El proceso es el mismo, solo debes almacenar los archivos HTML finales en el repositorio en lugar del proyecto de Jekyll.
Obtén más información sobre todas las opciones de alojamiento de sitios web en la página pages.github.com.
Conexión de tu propio dominio
Github Pages te permite conectar un dominio personalizado. Además, se realizará una redirección 301 automática desde la dirección https://YOUR_USERNAME.github.io a tu dominio.
Publicación en Github Pages sin soporte para Jekyll
Github Pages te permite alojar cualquier archivo HTML y no trabajar con Jekyll en el lado de Github. Esto significa que simplemente puedes colocar tu carpeta _site en Github. Este enfoque te permite utilizar cualquier plugin, ya que la generación de archivos HTML se realiza en tu propia computadora y Github actúa como un servidor web simple.
El proceso es el mismo, solo debes almacenar los archivos HTML finales en el repositorio en lugar del proyecto de Jekyll.
Obtén más información sobre todas las opciones de alojamiento de sitios web en la página pages.github.com.
Conexión de tu propio dominio
Github Pages te permite conectar un dominio personalizado. Además, se realizará una redirección 301 automática desde la dirección https://YOUR_USERNAME.github.io a tu dominio.
- 1Agrega un archivo CNAME (sin extensión) a tu repositorio y escribe tu dominio sin el protocolo. Por ejemplo, myblog.com.
- 2Si estás utilizando un dominio de segundo nivel, configura un registro ALIAS o ANAME en tu proveedor de DNS con el valor YOUR_USERNAME.github.io; o configura dos registros A con los valores 192.30.252.153 y 192.30.252.154. Si estás utilizando un dominio de tercer nivel, configura un registro CNAME con el valor YOUR_USERNAME.github.io. Obtén más información sobre tus dominios en la documentación oficial.
Funcionalidades adicionales
Todo lo descrito en esta guía se refiere a las funcionalidades y configuraciones básicas. La documentación oficial describe muchas funcionalidades adicionales, como:
- creación de "colecciones" de publicaciones y páginas
- paginación
- migración desde otras plataformas de blogs
- resaltado de código y soporte para fórmulas matemáticas en las publicaciones
- plugins
- temas
- etiquetas
- análisis de archivos de datos (YAML, JSON, CSV)
- integración continua
Los plugins te permiten ampliar aún más las funcionalidades del sistema.
Leer otros artículos de Guías
Lea otros artículos relevantes del mundo de la tecnología y el espíritu empresarial.