6 minutos
Crear un blog con Jekyll + Firebase
¿Que es Jekyll?
Jekyll es una herramienta que permite crear una página o blog de forma dinámica generando archivos estáticos. A diferencia de los conocidos CMS (WordPress, Joomla, etc.) con Jekyll no se necesitará acceder a base de datos ni hacer uso de PHP o cualquier lenguaje que ejecute código del lado del servidor.
Tiene un sistema de plantillas el cual permite diseñar el sitio web con la estructura que se necesite.
Es usado frecuentemente para documentación de librerías o herramientas, también para páginas tipo currículo.
Para realizar los post o páginas se trabaja con archivos Markdown (*.md) mismo formato que se utiliza en GitHub para documentar los repositorios. Jekyll se encargará de convertir estos archivos en archivos HTML estáticos los cuales finalmente serán los que el usuario verá.
¿Que es Firebase?
Firebase es una plataforma de Google para crear aplicaciones web y móviles. Entre los servicios que brindan está el de Hosting (estático) para poder mostrar contenido al usuario.
Tiene un plan gratis con 1 GB de almacenamiento y 10 GB por mes de transferencia de datos.
Paso a paso 
Instalar Jekyll
En estos momentos estoy usando Windows 10 por lo tanto, veremos cómo hacerlo en este sistema operativo.
Primero debemos instalar Ruby, puedes descargar el instalador desde la página de RubyInstaller descarguen la versión 2.4.3-2 (importante) versiones posteriores me dieron problemas para instalar Jekyll.
Luego de instalar no actualicen la versión (si en algún momento se lo pregunta).
Corremos desde consola el siguiente comando:
$ gem install jekyll bundler
Luego verificamos si ya está instalado con el comando:
$ jekyll -v
Para mayor información en esta página hay más detalles e instrucciones para instalarlo por otros medios.
Crear el proyecto
Desde la consola navegamos hasta una carpeta donde quieran crear el proyecto y ejecutamos los comandos:
$ jekyll new blog-prueba
$ cd blog-prueba
Para probar localmente el sitio corremos el comando:
$ bundle install
$ bundle exec jekyll serve
Por defecto corre en la ruta http://localhost:4000
Estructura de archivos
├── _drafts # Contiene los artículos borradores
├── _includes # Código a incluir en plantilla ejemplo la cabecera o el pie de pagina
├── _layouts # Contiene la estructura del sitio
├── _post # Contiene los artículos publicados
├── _sass # Contiene los estilos
├── _site # Contiene el código del sitio ya compilado
├── assets # Contiene imágenes y otros archivos multimedia
├── _config.yml # Configuración general del sitio
├── 404.html # Pagina de error al ingresar una url no existente
├── about.md # Pagina acerca de
├── Gemfile # Configuración del compilador
└── index.md # Página principal o de entrada
Las carpetas /assets, /_layouts, /_includes, /_sass son para incluir estructura y estilos de la plantilla a utilizar, más adelante veremos cómo agregar una plantilla y donde buscarlas.
Crear un artículo
Lo único que se debe hacer para crear un post es agregar un archivo con el nombre con el siguiente formato de nombre yyyy-MM-dd-titulo-del-post.md ejemplo: 2018-03-11-hola-mundo!.md.
Dentro del archivo las primeras lineas son de configuración:
---
layout: post
title: "Welcome to Jekyll!"
date: 2018-03-12 14:17:50 -0400
categories: jekyll update
---
Lo siguiente es el contenido del post en formato Markdown:
Párrafo normal, para saltar de linea solo debes escribir doble espacio
al final de la línea.
# Encabezado h1
## Encabezado h2
### Encabezado h3
#### Encabezado h4
##### Encabezado h5
###### Encabezado h6
> La vida es muy corta para aprender Alemán. -Tad Marburg
*énfasis* (cursiva)
**énfasis fuerte** (negrita)
Código dentro de una linea `hola`
```
Código en
varias líneas
```
La siguiente linea es un separador:
---
* Un elemento en una lista no ordenada
* Otro elemento en una lista
1. Elemento en una lista enumerada u ordenada.
2. Otro elemento
[Texto del enlace aquí](URL "Título del enlace")
Resultado:
Párrafo normal, para saltar de linea solo debes escribir doble espacio
al final de la línea.
Encabezado h1
Encabezado h2
Encabezado h3
Encabezado h4
Encabezado h5
Encabezado h6
La vida es muy corta para aprender Alemán. -Tad Marburg
énfasis (cursiva) énfasis fuerte (negrita)
Código dentro de una linea hola
Código en
varias líneas
La siguiente linea es un separador:
- Un elemento en una lista no ordenada
- Otro elemento en una lista
- Elemento en una lista enumerada u ordenada.
- Otro elemento
Borradores
Si en cambio quieres crear un borrador solo tienes que agregar el archivo .md a la carpeta _drafts (si no está creada, crearla) y para probar el sitio con los borradores se debe correr el siguiente script:
$ bundle exec jekyll serve --drafts
Ahora vamos con Firebase
Entra en la Consola de Firebase, te logueas con tu usuario de Google, vas a la opción “Agregar proyecto”, colocas el nombre y la región.
Al crear el proyecto vas a la opción Hosting y luego Comenzar.
Debemos instalar las herramientas de Firebase con el siguiente comando:
$ npm install -g firebase-tools
Nos logeamos con nuestro usuario:
$ firebase login
Iniciamos el proyecto en la misma carpeta que ya creamos con Jekyll ejecutando el siguiente comando y siguiendo las instrucciones:
$ firebase init
Cuando pregunte el nombre de la carpeta colocamos _site, o posteriormente modificamos el archivo firebase.json colocando en el valor de "public": "_site" .
{
"hosting": {
"public": "_site",
"ignore": [
"firebase.json",
"**/.*"
],
}
}
Ahora solo debemos subir los archivos al hosting ejecutando el siguiente comando:
$ firebase deploy
Modificaciones
Luego de crear o modificar contenido, para actualizar los cambios en el servidor puedes correr los siguientes comandos
$ bundle exec jekyll build
$ firebase deploy
Para finalizar
Ahora tenemos nuestro sitio online, una de las ventajas de Firebase es que permite configurar un dominio personalizado, solo tienes que seguir las instrucciones en el panel de control.
En esta página jekyllthemes.org puedes encontrar muchas plantillas que pueden servir de base para tu sitio web.
Herramientas adicionales que uso
- IDE: Visual Studio Code
- Subo las imágenes en cloudinary.com sobre todo por la facilidad de administrar y las herramientas que tiene.
- Visual Studio Team Services como manejador de código y para respaldar el proyecto, otras opciones pueden ser GitHub, GitLab, Bitbucket (idea para un artículo).
- DISQUS para los comenentarios en los post.
- formspree.io para el formulario de contacto, simplemente envía un correo.
- Google Analytics para llevar el registro de visitas al blog.
Comentarios