Estructura de un proyecto de Jekyll

En un post anterior sobre Jekyll vimos cómo instalar Jekyll tanto en el servidor como en el ordenador personal. En este artículo se explicará la estructura básica de esta plataforma así como la jerarquía de directorios.

_includes

En este directorio se encuentran todos los archivos HTML de los cuales nuestra página se apoya. Por ejemplo, si nuestra página tiene un aviso que se muestra para aceptar la política de cookies, este html iría en este directorio con el archivo JavaScript (si lo necesitara).
En esta carpeta es común también encontrar elementos comunes a todas las páginas dentro de nuestra web. Por ejemplo, la cabecera y el pie de página (llamados header.html y footer.html por defecto).

_layouts

Se encuentran los distintos esquemas de cada página que compone nuestra web.Por ejemplo, si nuestra web tiene una página principal (todas la tienen) y varias para posts de un blog, es lógico crear una plantilla html que sea común para todos los posts y luego leer los contenidos de distintos archivos de texto (que siempre es más fácil de redactar en ellos que en html) en formato MarkDown(.md).

_posts

En este directorio se engloban los distintos artículos o subpáginas que tiene una web. Esto es muy útil en un blog, por ejemplo, como se ha descrito antes. Cada entrada corresponde a un archivo .md, que por convención tiene el siguiente nombre: AAAA-MM-DD-nombre-del-articulo.md , donde AAAA-MM-DD es la fecha de escritura en formato inglés.
Dentro de cada archivo .md, se suele empezar con una cabecera para que esta se muestre en el html y añada funcionalidad a la página, como crear etiquetas:
—layout: post (lo habremos definido en _layouts)title: ¡Hola Mundo! (título)description: “Este es el primer artículo de una serie de 100” (descripción del mismo)modified: 2017-08-14 (fecha que se mostrará a los visitantes, formato anglosajón)category: linux (categoría principal)tags: [Arch, linux, OpenSource, LXDE] (etiquetas)—

_site

Esta carpeta la crea automáticamente jekyll y no es recomendable modificarla, cualquier cambio que queramos hacer lo podemos retocar en el directorio raiz de nuestro proyecto.

_drafts

Similar a posts, pero sólo para borradores (artículos no públicos).

Directorio raiz

En dicho directorio (fuera de todas las carpetas mencionadas) se pueden crear más archivos o subpáginas entre las cuales las siguientes son obligatorias:

  • index.html
    Es la página principal de nuestro programa. Es normal que use distintos componentes de layouts y tener así el proyecto mejor organizado.
  • _config.yml
    Este archivo es el más crítico y fundamental de nuestra página. Sin él, nuestra web no funcionará y es el que administra las distintas subpáginas y tiene en él toda la información de configuración. También podemos añadir todos las constantes que podemos usar a lo largo de todos las subpáginas, por ejemplo, el id de Google Analytics.

Las etiquetas más usuales son:

layout: post (lo habremos definido en _layouts)
title: ¡Hola Mundo! (título)
description: "Este es el primer artículo de una serie de 100" (descripción del mismo)
modified: 2017-08-14 (fecha que se mostrará a los visitantes, formato anglosajón)
category: linux (categoría principal)
tags: [Arch, linux, OpenSource, LXDE] (etiquetas)

Es común ver muchas más etiquetas, pero eso ya dependerá del tema con el que trabajemos.

El redactor de este post es David Población Criado, estudiante de Ingeniería Informática y Estadística en la Universidad de Valladolid.
CC-BY David Población Criado.

To write a comment on this article, fill out the form below. Fields marked with an asterisk (*) are required.