Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Sitios estáticos con Jekyll

by
Read Time:12 minsLanguages:

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

Un CMS en toda regla rara vez es necesario. A veces, solo necesita crear un sitio web ligero y estático ... pero tiene las páginas suficientes para realizar el proceso de copiar los archivos de plantilla y hacer que las tareas de marcado entre sitios sean una tarea. Hoy demostraré una solución simple, Jekyll, que facilitará la creación de sitios web pequeños.


Paso 0: Conociendo a Jekyll

Jekyll es un generador de sitios estático simple, consciente del blog.

Jekyll es un generador de sitios estático simple, consciente del blog. Pero, ¿qué significa esto exactamente? Un generador de sitio estático es un programa que toma un conjunto de archivos y genera su sitio con ellos. Como verá, podremos usar un conjunto de plantillas, crear los archivos de contenido por separado y luego usar Jekyll para generar nuestro sitio. La parte "consciente del blog" significa que podríamos usar esto para crear un blog, o cualquier sitio web que tenga una serie de entradas post-like (como una portafolio). ¡Hagamos un intento!


Paso 1: Instalación de Jekyll

Consulte aquí para obtener más información sobre Ruby Gems.

Comenzaremos instalando Jekyll; Es una gema de Ruby, así que hacerlo debería ser bastante sencillo.

Sí, es así de fácil. Hay algunas piezas más que podríamos instalar si planeamos hacer una configuración más compleja, sin embargo, dado que no lo estamos haciendo, esto hará el truco.


Paso 2: Creando nuestra primera plantilla

Cada archivo o carpeta que no comience con un guión bajo se copiará al sitio generado.

A continuación, vamos a configurar las carpetas para Jekyll. Crea una carpeta, llamada example-app para este tutorial; Crearemos un pequeño sitio de portafolio para, por ejemplo, un fotógrafo. Este es un gran ejemplo de cómo brilla Jekyll: es un sitio pequeño que no se actualizará con demasiada frecuencia, pero es lo suficientemente grande como para que no quiera abrir todas las páginas cuando necesite realizar un cambio de marca.

Dentro de example-app, crea una carpeta llamada _layouts. Observe el guión bajo al comienzo de esta carpeta: cualquier carpeta o archivo que comience con un guión bajo no formará parte del sitio que Jekyll genera. Si tienen un nombre que Jekyll reconoce (como _config.yml o _layouts), su contenido se usará en la generación del sitio, pero los archivos en sí no se mostrarán en el sitio. Recuerde esto: todos los archivos o carpetas que no comiencen con un guión bajo se copiarán en el sitio generado (que, por cierto, se asigna de forma predeterminada a la subcarpeta _site).

Entonces, vamos a crear un diseño. Comenzaremos con un diseño general del sitio que incluye todo el "chrome" de nuestro sitio. Cree un nuevo archivo, llamado default.html dentro de la carpeta _layouts (el nombre no importa), y agregue el siguiente código:

Un par de cosas aquí para tener en cuenta...

En primer lugar, Jekyll utiliza el sistema de plantillas líquidas (de forma predeterminada). Esto significa que, cualquier cosa que pueda hacer con Liquid, puede hacerlo en una plantilla en Jekyll. Por ejemplo, en la etiqueta <title>, estamos usando ambos tipos de marcado líquido: marcado de salida y marcado de etiqueta. El marcado de salida puede generar texto (si existe la variable a la que se hace referencia), mientras que el marcado de etiqueta no. El marcado de salida está delimitado por llaves dobles, mientras que el marcado de la etiqueta está delimitado por el dúo de signo de porcentaje / corchete.

Lo siguiente que hay que notar anteriormente es lo que está dentro de las etiquetas de Liquid: cosas como page.title y content. Estas son variables proporcionadas por Jekyll; Puede ver la lista de datos de plantillas disponibles en los documentos. También podemos crear datos de plantillas personalizadas, como revisaremos en breve.

Por último, observe el CSS al que estamos vinculando: cree una carpeta css en la raíz de su proyecto y agregue este poco de estilo a un archivo style.css:

Además, cree una carpeta img y agregue una imagen, denominada banner.jpg; Lo usaremos en breve. Cualquier imagen servirá; simplemente recórtelo a 960px por 300px;.

Quizás se esté preguntando por qué estamos usando la instrucción if si la variable page.title simplemente no se mostrará si existe. Bueno, si existe, quiero incluir la barra vertical después de ella; Otra forma de escribir sería así:

Entonces, ¿cómo usamos esta plantilla? Bueno, necesitamos crear una página que usará esta plantilla. En el directorio raíz de nuestro proyecto, cree un archivo index.html. Aquí está el contenido:

Aquí está el contenido de nuestro archivo index.html. Observe lo que hay en la parte superior del archivo: Jekyll llama a esta cuestión YAML. Jekyll generará cualquier archivo (que no comience con un guión bajo) que tenga la parte frontal de YAML antes de colocarlo en la carpeta _site (si no tiene guión bajo o YFM, solo se copiará _site). En este caso, la cuestión del frente de YAML solo le dice a Jekyll qué plantilla queremos que use.

Ahora, abra un terminal, cd en el directorio de su proyecto y ejecute jekyll. Debería ver algo como esto:

Ignora la advertencia; Vamos a llegar a eso en breve. Por ahora, puede ver que el sitio se ha creado en un directorio _site recién creado. Si abre el archivo _site/index.html en el navegador que elija, debería ver ... un error. El problema es que nuestras rutas (urls y hoja de estilo) comienzan con una barra diagonal. Esto significa que no podemos simplemente verlos como archivos, necesitamos verlos en un servidor. Claro, usted podría comenzar W / MAMP, pero ¿por qué tomarse la molestia? Jekyll tiene un servidor incorporado. Entonces, ejecute jekyll --server, y vaya a localhost:4000 para ver algo como la imagen a continuación:

Tutorial ImageTutorial ImageTutorial Image

Si la imagen de arriba no es suficiente, mire el código de _site/index.html. Verá que la plantilla que especificamos se combinó con el contenido que proporcionamos y, ¡voilá!, Tenemos nuestra página.

Quiero recordarte que es el asunto del frente de YAML lo que hace que esta magia suceda; Si un archivo no comienza con tres guiones, una o más líneas de propiedades y otra línea de tres guiones, el archivo se copiará en la carpeta _site, sin que se produzca ninguna generación.


Paso 3: Crear una plantilla de portafolio

Ahora que estamos cómodos con lo básico, creemos un portafolio para nuestro fotógrafo ficticio. ¿Recuerdas cómo noté que Jekyll está “al tanto del blog”? Bueno, vamos a utilizar esta función de conocimiento del blog para nuestra ventaja: en lugar de publicaciones, tendremos entradas.

Las publicaciones pertenecen a una carpeta, llamada _posts, así que crea eso ahora. El patrón de nombre de archivo para las publicaciones también debe ser específico: año-mes-día-título.ext. Las publicaciones, bueno, cualquier archivo en su sitio Jekyll, realmente, pueden ser Markdown o HTML.

Así que hagamos algunas publicaciones: recuerde, estas serán entradas en nuestro portafolio:

_posts/2010-03-04-bikes.md

_posts/2010-10-01-wing.md

_posts/2011-06-05-bridge.md

_posts/2011-07-09-road.md

Bastante simple, ¿eh? Observe cómo estamos creando un campo de materia frontal YAML personalizado: image. Esta es la URL de la imagen para esa entrada. Claro, podríamos compilar todo el HTML de entrada aquí en este archivo, pero ¿qué pasa si queremos cambiar eso? Tendríamos que volver y cambiarlo en cada entrada. De esta manera, podemos usar nuestra plantilla portfolio_entry para renderizarlos. ¿Cómo es esa plantilla? Es bastante simple también:

_layouts/portfolio_entry.html

Si miró la página de datos de la plantilla, sabrá que cualquier asunto personalizado que agreguemos estará disponible en la page; Entonces, aquí, podemos acceder a page.image. También estamos usando page.title y content (todo después de la última línea de tres guiones).

Debo mencionar aquí que, aunque se supone que el title de la publicación está disponible en el objeto de post, solo he podido hacer que funcione en el objeto de page. ¡Lo que sea que funcione!

Además, tenga en cuenta que tenemos esta plantilla utilizando nuestro diseño default. Puede anidar plantillas como esa y hacer su trabajo aún más fácil.

Esto nos da nuestras páginas de entrada (publicación), pero ¿qué pasa con la página de la cartera principal? Al escribir nuestra navegación en nuestro diseño predeterminado, noté que lo queremos como /portfolio/. Entonces, cree una carpeta, llamada portfolio en el directorio raíz, y abra un archivo index.html dentro de ella.

Esta es nuestra pieza más complicada hasta ahora. Recuerde, esto no es una plantilla: es un archivo "normal", pero aún puede incluir etiquetas líquidas. Comenzamos configurando el layout a default, y title a "Portafolio".

Tenga en cuenta que, en el HTML, tenemos un bucle for-in de entrada de Liquid. Recuperamos todos los mensajes con sites.posts; luego, repasamos esas publicaciones for post in site.posts / endfor. Si ha trabajado con WordPress, o con cualquier otro sistema de blogs, debe estar familiarizado con el concepto de un loop. Eso es todo lo que es! En el interior, como puede ver, podemos obtener las propiedades estándar, así como cualquier materia anterior que definimos (como image).

Ahora, si ejecutamos jekyll --server para volver a generar el sitio e iniciar el servidor, localhost:4000/portfolio/ debería mostrar esto:

Tutorial ImageTutorial ImageTutorial Image

Y aquí hay una página de entrada:

Tutorial ImageTutorial ImageTutorial Image

¡Genial! Has creado una cartera. Estoy seguro de que también ves cómo funciona esto para un blog. Veamos ahora algunas opciones de configuración para Jekyll.


Paso 4: Escribir un archivo de configuración

Hay una gran cantidad de opciones para Jekyll. Es genial que todos ellos tengan valores predeterminados muy sensibles, pero si quieres cambiarlos, no es nada difícil.

Hay dos formas de establecer opciones.

  • Primero, cuando ejecuta el programa en la línea de comando, puede pasar parámetros. Ya hemos visto el parámetro --server, que inicia un servidor después de generar el sitio.   
  • Una forma diferente, y la forma en que usaremos aquí, es en un archivo de configuración, llamado _config.yml; este es un archivo YAML, por lo que cada línea es un par key: value, al igual que en la parte frontal de YAML. Jekyll buscará este archivo antes de generar el sitio.

Por lo tanto, cree un archivo _config.yml y veamos algunas de las opciones más comunes.

Para obtener una lista completa de opciones, revise la documentación de configuración.

  • auto: Agregar auto: true a su archivo de configuración mantendrá a Jekyll en funcionamiento, observando los cambios en la carpeta de su proyecto y regenerando el sitio sobre la marcha.
  • source: si sus archivos de origen están en un directorio diferente al que está ejecutando Jekyll, querrá establecer ese directorio con la propiedad source.
  • destination: de forma predeterminada, el destino de su sitio generado es ./_site. Si quieres algo diferente, ponlo aquí.   
  • permalink: El enlace permanente es la ruta a tus publicaciones. Por defecto, es /año/mes/dia/titulo.html. Sin embargo, puedes personalizar eso si quieres. Entre otras, puede usar las variables :year, :month, :day, :title, y :categories. :categories provienen de la materia delantera; todos los demás vienen del nombre del archivo del post. Luego, puede establecer unpermalink a cosas como /:year/:month/:title/ o /:categories/:title.html. Sugerencia de bonificación: si tiene una propiedad permalink en el asunto posterior a la publicación, anulará el valor predeterminado de todo el sitio.
  • exclude: como dije anteriormente, Jekyll no generará archivos en directorios que comiencen con un guión bajo. Pero, si tienes carpetas que quieres que ignoren, pero que no comiencen con un guión bajo, puedes hacerlo con exclude en tu archivo de configuración.

Paso 5: Implementación del sitio

Entonces, digamos que usted ha creado el sitio y desea liberarlo en la red mundial. ¿Cómo haces eso?

Hay varias maneras de lograr esto. Por supuesto, si es un sitio pequeño que no actualizará con demasiada frecuencia, simplemente envíelo por FTP a su servidor; esta podría ser tu única opción, si estás usando un alojamiento compartido.

Si tiene una configuración de VPS o hosting dedicado, puede ejecutar más automáticamente. Echa un vistazo a la documentación de implementación para obtener una lista de buenas ideas. Si no está seguro de qué hacer, intente seguir las instrucciones para usar el enganche posterior a la recepción de git; Lo he intentado y está muy bien.


Paso 6: Llevándolo más lejos

Esto es sólo la punta de Jekyll.


Conclusión

Bueno, esa es su introducción a Jekyll: el generador de sitios estático simple y para blogs. ¿La próxima vez que construyas un sitio de micro-portafolio de tarjetas de visita y estilo de folleto, crees que le intentarás a Jekyll? ¡Déjame saber en los comentarios y muchas gracias por leer!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.