Creando paginas estáticas con jekyll

Jekyll es una herramienta muy popular para crear páginas web estáticas al igual que muchas otras opciones como Middleman, Wordpress y Hugo por mencionar otros frameworks muy conocidos, al final todos tienen el mismo objetivo, siendo cuestión de gustos y preferencias en el lenguaje de programación los que influyan en tu decisión, si tienes experiencia en ruby te vas a sentir más cómodo usando un framework similar a rails como lo es Jekyll, a mi parecer es sencillo pero a la vez ofrece opciones avanzadas siendo una labor sencilla agregar nuevas páginas o incluso migrar páginas de otros lados dentro de Jekyll.

Aquí te voy a mostrar el uso básico que necesitas conocer para crear tu sitio desde cero hasta tenerlo publicado en Internet.

Comenzando con la instalación de Jekyll

Como todos los frameworks de ruby la forma en cómo se distribuye jekyll es a través de una gema, desde cualquier terminal ejecuta:

gem install bundler jekyll

Esto nos instala dos paquetes bundler, un manejador de dependencias(gemas), y jekylls la utilería que nos va ayudar a crear nuestro sitio estático.

Nota: Asegurate de tener al menos la versión 2.1 de ruby, ya que jekylls no soporta versiones anteriores.

Creando nuestro sitio web

Crear sitios es fácil con jekyll, al igual que hacerlo con Rails, solo tenemos que ejecutar un comando en la terminal pasandole como parametro el nombre de tu sitio, recuerda usar un nombre sin espacios ni caracteres especiales:

jelyll new onecoder

Al terminar de ejecutarse el comando, ya tenemos nuestro primer sitio totalmente funcional, aunque no es precisamente útil para verlo desde nuestro navegador ejecuta:

bundle exec jekyll serve

Internamente jekyll preparará nuestros archivos de forma que puedan funcionar directamente en el navegador, típicamente desde http://localhost:4000, si accedes a esa url deberías ver algo como esto:

Si puedes ver el sitio desde tu navegador, es un indicio de que vamos por buen camino, ya comprobamos que todo está funcionando correctamente, ahora solo nos queda saber qué función tienen los archivos que fueron creados:

  • _posts: Esta carpeta es donde se almacenan los blogpost, Jekyll está pensado como plataforma de blogging, no te preocupes no usaremos esta carpeta pero es importante saber su objetivo.
  • _site: Como ya lo mencione antes, Jekyll se hace cargo de procesar todos los archivos y dejar una estructura independiente que no requiere de un servidor que la procese, justamente los archivos finales para ser consumidos se encontraran aquí. Nunca deberías de modificar estos archivos ya que son recreados cuando hay modificaciones.
  • _config.yml: Contiene todas las configuraciones que usa jekyll, atributos por default o convenciones de atributos que queramos usar en otras páginas.
  • Gemfile: Es el archivo de ruby por excelencia para manejar las dependencias de gemas, aquí puedes agregar plugins, temas, etc,
  • index.md: Es nuestro archivo principal, nuestro homepage, la primera pagina que nuestros usuarios verían al visitar nuestro sitio.

Nota: Si bien el generador nos dio paginas en formato de Markdown, los archivos pueden ser cambiados a una extensión más conocida como html

Anatomia de una pagina

Las paginas están separadas en dos secciones:

  • Front Matter que es básicamente información sobre nuestra página o sitio, y está delimitada por una serie de separadores --- al inicio y final, aquí podemos especificar atributos conocidos de jekyll como título, fecha, categorías, permalink, layout, etc, además de datos personalizados como variables o colecciones que podremos usar dentro de nuestro contenido. Estos atributos normalmente están en formato YAML pero también JSON es soportado.
  • Y el contenido, que incluye la información que deseamos mostrar a nuestros usuarios, aquí ademas podremos hacer uso de variables especiales de jekyll así como includes (parciales), hace uso de liquid(un lenguaje de templates muy sencillo) y tiene acceso a cualquier información personalizada que hayamos agregado en el front matter o en el config.yml

No te preocupes por entender todos los conceptos ahorita, los vamos a repasar cada uno conforme agreguemos nuestra primera página, aquí puedes ver un ejemplo de cómo luce la estructura:

Creando mi primer página

Para nuestro ejemplo vamos a usar un template de themewagon ligeramente modificado, que nos ayude a mostrar el potencial de jekyll como nuestro generador de sitios estáticos sin entrar a detalles de estilo y maquetado, esta es una imagen de como va lucir nuestro sitio:

http://demo.themewagon.com/preview/free-bootstrap-4-html5-business-website-template-tangre

Vamos a comenzar por agregar una carpeta llamada _layouts y dentro de ella un archivo llamadoapplication.html, este va contener nuestra estructura base, también cambiaremos el nombre de nuestro archivo principal index.md a index.html por facilidad en su uso.

Dentro del archivo _layouts/application.html que acabamos de crear, vamos a poner nuestro template de página web, teniendo especial cuidado en agregar {{ content }} para que nuestro contenido sea incluido:

<!DOCTYPE html>
<html lang="zxx" class="no-js">

<head>
	<title>Tangre Furniture</title>

	<link href="https://fonts.googleapis.com/css?family=Poppins:100,200,400,300,500,600,700" rel="stylesheet">
</head>

<body>
  {{ content }}
</body>
</html>

Después continuaremos con nuestra pagina principal index.html y agregaremos el siguiente codigo de HTML, además usaremos el atributo de layout en el front matter para hacer uso de nuestro layout recién creado layout: application:

---
# Feel free to add content and custom Front Matter to this file.
# To modify the layout, see https://jekyllrb.com/docs/themes/#overriding-theme-defaults

layout: application
---

	<!--################ Start Header Area ########-->
	<header id="header" id="home">
		<div class="header-top">
			<div class="container">
				<div class="row">
					<div class="col-lg-6 col-sm-6 col-4 no-padding">
						<div class="header-top-left">
							<a href="">
								<i class="fa fa-phone"></i>
								012-6532-568-9746
							</a>
						</div>
					</div>
					<div class="col-lg-6 col-sm-6 col-8 header-top-right no-padding">
						<ul>
							<li><a href="#"><i class="fa fa-facebook"></i></a></li>
							<li><a href="#"><i class="fa fa-twitter"></i></a></li>
							<li><a href="#"><i class="fa fa-dribbble"></i></a></li>
							<li><a href="#"><i class="fa fa-behance"></i></a></li>
						</ul>
						<ul>
							<li>
								<a href="#">Get free Quote</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<hr>
		<div class="container main-menu">
			<div class="row align-items-center justify-content-between d-flex">
				<div id="logo">
					<a href="index.html"><img src="/assets/img/logo.png" alt="" title="" /></a>
				</div>
				<nav id="nav-menu-container">
					<ul class="nav-menu">
						<li class="menu-active"><a href="/">home</a></li>
						<li><a href="#">portfolio</a></li>
						<li><a href="/about/">about</a></li>
						<li class="menu-has-children"><a href="#">blog</a>
							<ul>
								<li><a href="#">Blog Home</a></li>
								<li><a href="#">Blog Single</a></li>
							</ul>
						</li>
						<li class="menu-has-children"><a href="">Pages</a>
							<ul>
								<li><a href="#">Portfolio Details</a></li>
								<li><a href="#">Elements</a></li>
							</ul>
						</li>
						<li><a href="#">Contact</a></li>
					</ul>
				</nav>
				<!--######## #nav-menu-container -->
			</div>
		</div>
	</header>
	<!--######## End Header Area ########-->


	<!--######## start banner Area ########-->
	<section class="home-banner-area relative" id="home">
		<div class="container">
			<div class="row fullscreen d-flex align-items-center">
				<div class="banner-content col-lg-9 col-md-12">
					<h1>
						Creativity <br> Beyond <br> Life
					</h1>
					<a href="#" class="primary-btn header-btn text-capitalize mt-10">hire us now!</a>
				</div>
			</div>
		</div>
	</section>
  <!--######## End banner Area ########-->

	<!--######## Start Latest News Area ########-->
	<section class="latest-news-area section-gap">
		<div class="container">
			<div class="row justify-content-center">
				<div class="col-lg-12">
					<div class="main-title text-center">
						<h1>Latest News from all categories</h1>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
							aliqua.
						</p>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-lg-4 col-md-6">
					<div class="single-news card">
						<img class="card-top-img" src="/assets/img/news/n1.jpg" alt="Card image cap">
						<div class="card-body">
							<h4 class="card-title">
								<a href="#">
									Addiction Whit Gambling
								</a>
							</h4>
							<p class="card-text">It is a good idea to think of your PC as an office. It stores files, programs, pictures. This
								can be compared to an actual.</p>
						</div>
					</div>
				</div>
				<div class="col-lg-4 col-md-6">
					<div class="single-news card">
						<img class="card-top-img" src="/assets/img/news/n2.jpg" alt="Card image cap">
						<div class="card-body">
							<h4 class="card-title">
								<a href="#">
									Headset No Longer Wired
								</a>
							</h4>
							<p class="card-text">It is a good idea to think of your PC as an office. It stores files, programs, pictures. This
								can be compared to an actual.</p>
						</div>
					</div>
				</div>
				<div class="col-lg-4 col-md-6">
					<div class="single-news card">
						<img class="card-top-img" src="/assets/img/news/n3.jpg" alt="Card image cap">
						<div class="card-body">
							<h4 class="card-title">
								<a href="#">
									Life Advice Looking At Window
								</a>
							</h4>
							<p class="card-text">It is a good idea to think of your PC as an office. It stores files, programs, pictures. This
								can be compared to an actual.</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
	<!--######## End Latest News Area ########-->

	<!--######## start footer Area ########-->
	<footer class="footer-area section-gap">
		<div class="container">
			<div class="row">
				<div class="col-lg-3  col-md-6">
					<div class="single-footer-widget">
						<h6>Top Products</h6>
						<ul class="footer-nav">
							<li><a href="#">Managed Website</a></li>
							<li><a href="#">Manage Reputation</a></li>
							<li><a href="#">Power Tools</a></li>
							<li><a href="#">Marketing Service</a></li>
						</ul>
					</div>
				</div>
				<div class="col-lg-6 col-md-6">
					<div class="single-footer-widget newsletter">
						<h6>Newsletter</h6>
						<p>You can trust us. we only send promo offers, not a single spam.</p>
						<div id="mc_embed_signup">
							<form target="_blank" novalidate="true" action="https://spondonit.us12.list-manage.com/subscribe/post?u=1462626880ade1ac87bd9c93a&amp;id=92a4423d01"
							 method="get" class="form-inline">

								<div class="form-group row" style="width: 100%">
									<div class="col-lg-8 col-md-12">
										<input name="EMAIL" placeholder="Your Email Address" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Your Email Address'"
										 required="" type="email">
										<div style="position: absolute; left: -5000px;">
											<input name="b_36c4fd991d266f23781ded980_aefe40901a" tabindex="-1" value="" type="text">
										</div>
									</div>

									<div class="col-lg-4 col-md-12">
										<button class="nw-btn primary-btn">Subscribe<span class="lnr lnr-arrow-right"></span></button>
									</div>
								</div>
								<div class="info"></div>
							</form>
						</div>
					</div>
				</div>
				<div class="col-lg-3  col-md-12">
					<div class="single-footer-widget mail-chimp">
						<h6 class="mb-20">Instragram Feed</h6>
						<ul class="instafeed d-flex flex-wrap">
							<li><img src="/assets/img/i1.jpg" alt=""></li>
							<li><img src="/assets/img/i2.jpg" alt=""></li>
							<li><img src="/assets/img/i3.jpg" alt=""></li>
							<li><img src="/assets/img/i4.jpg" alt=""></li>
							<li><img src="/assets/img/i5.jpg" alt=""></li>
							<li><img src="/assets/img/i6.jpg" alt=""></li>
							<li><img src="/assets/img/i7.jpg" alt=""></li>
							<li><img src="/assets/img/i8.jpg" alt=""></li>
						</ul>
					</div>
				</div>
			</div>

			<div class="footer-bottom d-flex justify-content-between align-items-center flex-wrap">
				<p class="col-lg-8 col-sm-12 footer-text m-0"><!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
Copyright &copy;<script>document.write(new Date().getFullYear());</script> All rights reserved | This template is made with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://colorlib.com" target="_blank">Colorlib</a>
<!-- Link back to Colorlib can't be removed. Template is licensed under CC BY 3.0. -->
</p>
				<div class="footer-social d-flex align-items-center">
					<a href="#"><i class="fa fa-facebook"></i></a>
					<a href="#"><i class="fa fa-twitter"></i></a>
					<a href="#"><i class="fa fa-dribbble"></i></a>
					<a href="#"><i class="fa fa-behance"></i></a>
				</div>
			</div>
		</div>
	</footer>
	<!--######## End footer Area ########-->

Nota: No prestes mucha atención al código de maquetado, este viene del archivo index.html del template tangre

A estas alturas nuestra pagina ya debería tener contenido más no estilo, debería lucir algo como:

Muy bien, ahora organizaremos un poco nuestro código para poder agregar mas páginas sin mucho esfuerzo, lo primero que vamos hacer es mover el header y footer a sus propios archivos, haciendo uso de la funcionalidad de includes, vamos a crear otra carpeta en el directorio principal llamada _includes y dentro vamos a crear dos archivos header.html y footer.html esto nos facilitara reusar el código dentro de otras páginas que vayamos creando.

Ahora vamos a mover el código del header y footer a los archivos header.html y footer.html respectivamente, y en nuestro archivo principal en index.html vamos hacer uso de include para hacer referencia a estos archivos, por ejemplo:

---
# Feel free to add content and custom Front Matter to this file.
# To modify the layout, see https://jekyllrb.com/docs/themes/#overriding-theme-defaults

layout: application
---

  {% include header.html %}

	<!--######## start banner Area ########-->
	<section class="home-banner-area relative" id="home">
		<div class="container">
			<div class="row fullscreen d-flex align-items-center">
				<div class="banner-content col-lg-9 col-md-12">
					<h1>
						Creativity <br> Beyond <br> Life
					</h1>
					<a href="#" class="primary-btn header-btn text-capitalize mt-10">hire us now!</a>
				</div>
			</div>
		</div>
	</section>
  <!--######## End banner Area ########-->

	<!--######## Start Latest News Area ########-->
	<section class="latest-news-area section-gap">
		<div class="container">
			<div class="row justify-content-center">
				<div class="col-lg-12">
					<div class="main-title text-center">
						<h1>Latest News from all categories</h1>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
							aliqua.
						</p>
					</div>
				</div>
			</div>
			<div class="row">
				<div class="col-lg-4 col-md-6">
					<div class="single-news card">
						<img class="card-top-img" src="/assets/img/news/n1.jpg" alt="Card image cap">
						<div class="card-body">
							<h4 class="card-title">
								<a href="#">
									Addiction Whit Gambling
								</a>
							</h4>
							<p class="card-text">It is a good idea to think of your PC as an office. It stores files, programs, pictures. This
								can be compared to an actual.</p>
						</div>
					</div>
				</div>
				<div class="col-lg-4 col-md-6">
					<div class="single-news card">
						<img class="card-top-img" src="/assets/img/news/n2.jpg" alt="Card image cap">
						<div class="card-body">
							<h4 class="card-title">
								<a href="#">
									Headset No Longer Wired
								</a>
							</h4>
							<p class="card-text">It is a good idea to think of your PC as an office. It stores files, programs, pictures. This
								can be compared to an actual.</p>
						</div>
					</div>
				</div>
				<div class="col-lg-4 col-md-6">
					<div class="single-news card">
						<img class="card-top-img" src="/assets/img/news/n3.jpg" alt="Card image cap">
						<div class="card-body">
							<h4 class="card-title">
								<a href="#">
									Life Advice Looking At Window
								</a>
							</h4>
							<p class="card-text">It is a good idea to think of your PC as an office. It stores files, programs, pictures. This
								can be compared to an actual.</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
	<!--######## End Latest News Area ########-->

  {% include footer.html %}

Esta nueva sintaxis de {% code %}viene de liquid un lenguaje que facilita el manejo de templates creado por shopify y que está soportado en Jekyll.

Después de la pequeña refactorización, podremos usar nuestro header y footer en otras páginas, ahora haremos lo mismo con nuestro about:

---
layout: application
title: About
permalink: /about/
---

  {% include header.html %}

	<!--######## start banner Area ########-->
	<section class="banner-area relative" id="home">
		<div class="container">
			<div class="row d-flex align-items-center justify-content-center">
				<div class="about-content col-lg-12">
					<h1 class="text-white text-uppercase">
						About Us
					</h1>
					<p class="text-white link-nav"><a href="/">Home </a> <span class="lnr lnr-arrow-right"></span> <a href="/about/">
							About Us</a></p>
				</div>
			</div>
		</div>
	</section>
	<!--######## End banner Area ########-->

  {% include footer.html %}

Como te habrás dado cuenta hicimos uso de 2 nuevas propiedades en el front matter, title y permalink, estas nos van ayudar a especificar el título de la página en el navegador y a definir desde qué ruta se va acceder a esta página, en el caso de about seria http://localhost:4000/about/.

Haciendo uso de archivos estáticos

Teniendo nuestra página principal y nuestro contenido, ahora solo nos queda agregar las imágenes y el estilo. Jekyll puede ayudarte a manejar los assets como lo haría rails, teniendo la posibilidad de usar pre-procesadores, estoy hablando de sass y coffeescript, sin meternos a más detalles nosotros no haremos uso de esta funcionalidad, simplemente haremos referencia directamente a los archivos dentro de la carpeta de assets.

Haciendo lo anterior nuestros assets serían usados como si de otra página se tratara, para este ejemplo tendremos que mover las carpetas css e img de nuestro template dentro de la carpeta assets de nuestro sitio estático.

Después tenemos que modificar nuestro archivo de layout application.html para hacer referencia a las hojas de estilo, por ejemplo:

<!DOCTYPE html>
<html lang="zxx" class="no-js">

<head>
	<title>Tangre Furniture</title>

	<link href="https://fonts.googleapis.com/css?family=Poppins:100,200,400,300,500,600,700" rel="stylesheet">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="/assets/css/main.css">
</head>

<body>
  {{ content }}
</body>
</html>

Con esto nuestro sitio se parecerá más al template original, puedes ver el sitio de ejemplo terminado desde mi repositorio aquí.:

Poniendo el sitio en línea

Muy bien, si has llegado hasta aquí ya debes de tener un sitio de ejemplo que podamos mostrarle al mundo, para esto hay varias alternativas como hacer uso de GitHub pages, pero la que más me gusta por su flexibilidad y profesionalismo es a través de Amazon S3, así que déjame mostrarte cómo se hace.

Primero debemos tener una cuenta de amazon AWS, en la cual crearemos un bucket en S3 donde vivirá nuestro sitio, asegurarte que se llame igual que el dominio que quieres usar, en mi caso jekyll.codebeats.org

Después vamos habilitar la opción de sitio estático, en las propiedades del bucket desde la consola de amazon en el navegador:

Ahora nos vamos asegurar que los permisos sean los correctos para que la gente pueda acceder a nuestra página web, esto lo vamos hacer en dos lugares, primero en las configuraciones de acceso público donde ninguna opción debería estar marcada:

Y segundo lugar es agregando una política de uso para que todos los archivos sean públicos desde Bucket policy, asegurarte de que el nombre de tu bucket sea el correcto

Con esto lo último que nos haría falta es subir los archivos estáticos, recuerdas el propósito de la carpeta de _site aquí es donde viene su uso, asegúrate de haber ejecutado al menos una vez el comando de bundle exec jekyll serve para que esta carpeta tenga los últimos archivos generados, y vamos a copiar el contenido dentro de nuestro nuevo bucket de S3.

Para esta tarea puedes hacer del navegador directamente o utilizar una herramienta que se conecte a S3, en mi caso lo hice con Cyberduck:

Listo, es todo lo que tienes que hacer en amazon, ahora puedes acceder directamente a tu nuevo sitio desde la url que amazon te da, esta url la podrás encontrar en la sección donde habilitamos el servidor web:

También puedes utilizar un dominio custom, lo unico que tienes que hacer es direccionar un registro CNAME hacia la url pública, así:

Nota: Es importante que el nombre del bucket coincida con el del dominio de otra forma pudieras tener comportamientos inesperados.

Espero que esta introducción te facilite el usar Jekyll como generador de sitios estáticos, hay muchísimas más características que lo hacen muy poderoso y que  detallaré más adelante en futuros blogpost con un uso mas avanzado, deja un comentario si te gusto el contenido y quieres que cubra más temas relacionados o si tienes problemas para hacer funciona el ejemplo no dudes en contactarme en (slack)[http://slack.rubyc.mx]



Adrian Castillo

Adrian Castillo


comments powered by Disqus

Siguenos

Boletí de noticias