Creando paginas estáticas con jekyll

Jekyll es una herramienta muy popular para crear paginas 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 decision, si tienes experiencia en ruby te vas a sentir mas comodo 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 paginas o incluso migrar paginas de otros lados dentro de jekyll.

Aqui te voy a mostrar el uso basico 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 como se distribuye jekyll es a travez de una gema, desde cualquier terminal ejecuta:

gem install bundler jekyll

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

Nota: Asegurate de tener almenos la version 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 util 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 deberias 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 esta funcionando correctamente, ahora solo nos queda saber que funcion tienen los archivos que fueron creados:

  • _posts: Esta carpeta es donde se almacenan los blogpost, jekylls esta 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 require 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 paginas.
  • 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 verian al visitar nuestro sitio.

Nota: Si bien el generador nos dio paginas en formato de Markdown, los archivos pueden ser cambiados a una extension mas 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 pagina o sitio, y esta delimitada por una serie de separadores --- al inicio y final, aquí podemos especificar atributos conocidos de jekyll como titulo, fecha, categorías, permalink, layout, etc, ademas 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 accesso 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 pagina, aquí puedes ver un ejemplo de como luce la estructura:

Creando mi primera pagina

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, tambien 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 pagina 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>

Despues continuaremos con nuestra pagina principal index.html y agregaremos el siguiente codigo de HTML, ademas usaremos el atributo de layout en el front matter para hacer uso de nuestro layout recien 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 mas no estilo, debería lucir algo como:

Muy bien, ahora organizaremos un poco nuestro codigo para poder agregar mas paginas 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 codigo dentro de otras paginas que vayamos creando.

Ahora vamos a mover el codigo 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 esta soportado en jekyll.

Despues de la pequeña refactorizacion, podremos reusar nuestro header y footer en otras paginas, 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 habras dado cuenta hicimos uso de 2 nuevas propiedades en el front matter, title y permalink, estas nos van ayudar a especificar el titulo de la pagina en el navegador y a definir desde que ruta se va acceder a esta pagina, en el caso de about seria http://localhost:4000/about/.

Haciendo uso de archivos estáticos

Teniendo nuestra pagina principal y nuestro contenido, ahora solo nos queda agregarle 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 mas 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 serian usados como si de otra pagina se tratara, para este ejemplo tendremos que mover las carpetas css e img de nuestro template dentro de la carpeta assets de nuestro sitio estatico.

Despues 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á mas al template original, puedes ver el sitio de ejemplo terminado desde mi repositorio aqui.:

Poniendo el sitio en linea

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 mas me gusta por su flexibilidad y profesionalismo es a travez de Amazon S3, así que déjame mostrarte como se hace.

Primero debemos tener una cuenta de amazon AWS, desde ahi ocupamos crear 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

Despues 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 pagina web, esto lo vamos hacer en dos lugares, primero en las configuraciones de acceso publico 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 ultimo 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, asegurate de haber ejecutado al menos una vez el comando de bundle exec jekyll serve para que esta carpeta tenga los ultimos archivos genedados, 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:

Tambien puedes utilizar un dominio custom, lo unico que tienes que hacer es direccionar un registro CNAME hacia la url publica, 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 mas características que lo hacen muy poderoso y que  detallare mas adelante en futuros blogpost con un uso mas avanzado, deja un comentario si te gusto el contenido y quieres que cubra mas temas relacionados o si tienes problemas para hacer funciona el ejemplo no dudes en contactarme en (slack)[http://slack.rubyc.mx]




comments powered by Disqus

Siguenos

Boletí de noticias