Marcos P.

Tecnológicamente Inquieto...

Crea tu blog con Pelican


Con todo el trabajo de crear la web he aprendido mucho sobre frontend y backend, además he repasado muchos conceptos que si no se practican se pierden. Para crear la web esta vez no quise utilizar WordPress. Hace un tiempo había empezado a utilizar Jekyll1, pero tenía un pequeño inconveniente, esta hecho en Ruby. No es difícil la sintaxis de Ruby, pero de todas formas preferí un generador de páginas web hecho en Python, busque un poco por la web y encontré Pelican2.

¿Qué es Pelican?

Como les adelanté, es un generador de sitios estáticos escrito en Python 3. Esto significa que podemos escribir nuestro contenido en algún lenguaje de marcado, como Markdown4, generar nuestro sitio, subirlo al servidor y dejarlo listo para mostrarse al usuario que acceda a el, nuestro servidor solo tiene que enviarlo. No hace falta configurar ninguna base de datos o servicios, el servidor no tiene que buscar contenido, ni procesarlo para recién después enviarlo al usuario. Esto, resumido de forma muy escueta.

Por eso tiene ventajas:

  • Velocidad: Esta es la ventaja principal, casi cualquier servidor web grande o pequeño, dedicado o compartido podrá servir rápidamente la web. Es prácticamente instantáneo, no hace falta mostrar cargadores, ni esperas.
  • Control de Versiones del contenido: Como todo el contenido fuente desde el que se genera la web está en texto plano, podemos llevar un control de las modificaciones que hagamos a la web. Utilizando herramientas como GitHub o GitLab podremos volver atrás cualquier cambio, sin temor a perder nada.
  • Seguridad: Seguro han escuchado hablar sobre inyecciones de código a base de datos, o contraseñas de WordPress robadas. Bueno el riesgo se reduce casi a cero, dado que no hay base de datos y el contenido fuente lo tenemos nosotros por separado. Le limitamos mucho a los delincuentes el factor de ataque.
  • Menos servidor: La función de nuestro servidor u hosting web, se reduce a uno: Servir la web. Y no hacen falta grandes requisitos, la escalabilidad esta asegurada.
  • Picos de Tráficos: Supongamos que uno de nuestros artículos se vuelve trending topic de golpe. Con una web basada en WordPress el servidor reventaría nuestra base de datos a peticiones y terminaría bloqueando el acceso a las demás, no por nada, últimamente se aplican tantas tecnologías como memcached. La simpleza de los sitios estáticos se convierte en un fuerte, tenemos más procesador enviando peticiones que buscando en la base de datos.

Algunas desventajas serían:

  • Sin contenido en tiempo real: No esperen cosas como artículos recomendados a base de cookies, o que la web cambie dependiendo del usuario. Y aunque parezca una contra, yo prefiero verlo como una web sincera, estoy soy/somos, mejor que esto eres (0_0). Tal vez sea el único punto que en el que realmente se deba sacrificar algo.
  • Sin entradas para el usuario: Esto significa que en un primer momento ningún post tendrá comentarios, o no habrá formularios de contactos. La mayoría de los generadores estáticos cuentan con plugins que mitigan esto, incluyendo formularios, o incrustando comentarios como los de Disqus.
  • Sin Interfaz de Administración: Es muy fácil entrar en WordPress o Medium y generar una entrada. Con los sitios estáticos los pasos para hacerlo son varios y puede llegar a ser una contra para algún usuario, pero si están leyendo este articulo creo que podrán con esto. Una vez creado un flujo de trabajo la velocidad se dispara, incluso hay plugins que pueden generar una interfaz o ayudar a la creación de post, hasta se puede publicar vía e-mail.

Éstas son alguna de las características de Pelican:

  • Soporta contenido escrito en formato reStructuredText, Markdown, o AsciiDoc
  • Salida completamente estática para ser subida al host fácilmente.
  • Los temas pueden personalizar se con Jinja2
  • Publicar Contenido en múltiple lenguajes
  • Feeds de noticias en Atom/RSS
  • Coloreado de códigos
  • Importar desde WordPress, Dotclear, RSS Feeds, y otros servicios
  • Sistema de plugins modulares, y repositorios de plugins.

Y mucho más, casi lo que deseen hacer se puede.

Instalación de Pelican

Seguir los pasos de la documentación es sumamente sencillo. Antes que nada, les aconsejo aprender a utilizar VirtualEnv, este crea un entorno virtual y separa todas las instalaciones de paquetes de Python que hagamos del resto del sistema. Instalamos VirtualEnv:

sudo pip install virtualenv

Una vez instalado creamos un directorio para los entornos virtuales y un directorio para Pelican:

mkdir -p ~/virtualenvs/pelican
virtualenv ~/virtualenvs/pelican
cd ~/virtualenvs/pelican
source bin/activate

El último comando activa el entorno virtual, todo lo que instalemos de aquí en adelante quedará dentro de ~/virtualenv/pelican/bin. Seguimos con Pelican:

pip install pelican

Esto nos proporciona la versión en los repositorios de pip. En la documentación nos explica cómo instalar la última versión en GitHub. Si estamos interesados en escribir en Markdown debemos tener este paquete también:

pip install markdown

Una vez instalado necesitamos crear un directorio para el blog, además de un conjunto de archivos de configuración y de carpetas. Para eso hay un script que nos hará un par de preguntas para tal fin. Lo ejecutamos así:

mkdir blog && cd blog
pelican-quickstart

El script nos preguntará el directorio en dónde estará guardado, el título del sitio, el nombre de dominio, cómo queremos subirlo al servidor (ssh, ftp, AmazonS3, etc.). También, nos preguntará si queremos generar los archivos Fabfile/Makefile, le respondemos yes, porque nos facilitará la vida más adelante. Cuando terminemos tendremos lo siguiente:

blog/
├── content/
├── output/
├── develop_server.sh
├── fabfile.py
├── Makefile
├── pelicanconf.py       # Configuración principal
└── publishconf.py       # Configuración para subir al servidor

Escribiendo contenido

Ya vamos a llegar a la parte de probarlo, por ahora vamos a generar algo de contenido. Y como lo dice su nombre este debería guardarse en la carpeta content, el formato a elegir pueden ser varios, personalmente, les recomiendo Markdown ya que es rápido de escribir y fácil de aprender. Abrimos nuestro editor preferido, o alguno para markdown y escribimos nuestro artículo:

Title: mi título
Date: 2010-12-03 10:20
Modified: 2010-12-05 19:30
Category: Python
Tags: pelican, publishing
Slug: mi-titulo
Authors: Alexis Metaireau, Conan Doyle
Summary: Short version for index and feedsDescripcion corta

## titulo h2 ##
El contenido de mi trending topic post. __Negrita__, _cursiva_... Todo este blog se escribio de esta forma.

Como verán al principio de nuestro artículo podemos especificar algunos metadatos que generan contenido extra, en el blog podremos buscar por etiquetas, categorías, fechas, etc.

Generando y probando el blog

Gracias a que generamos el Makefile, ahora solo tenemos que entrar al directorio blog y ejecutar esto:

make html

Esto automáticamente tomará todos los archivos .md/.markdown en la carpeta content y los convertirá en artículos del blog, generará el sitio y lo guardará en la carpeta output. Para ver como queda nuestro gran post ejecutamos:

make devserver

Abrimos el navegador, ponemos localhost:8000 y ya tenemos nuestro blog. ¿Bonito no?. Este comando tiene una peculiaridad, no solo nos muestra el sitio, sino que si hacemos algún cambio en nuestro artículo y lo guardamos aplicará los cambios y refrescando la página podremos ver como queda, casi en tiempo real.

Podcasting con Pelican

No me quiero meter mucho en como funciona pelican, para eso les dejo un enlace a la documentación5, que, aunque esta en ingles, se entiende muy bien y es amena. Voy a dar por sentado que ya estuvieron estudiando como funcionan los temas, plantillas y plugins.

Como me gustaría publicar un podcast busqué un plugin que pueda generar un Feeds, para luego publicar en iTunes Podcast. Este Feeds es algo especial, ya que debe tener algunos campos para que iTunes lo dé como válido. También, quería publicar el podcast directamente desde los metadatos del post, no quería tener que hacer otro movimiento extra para generarlo, aparte de subir el audio. Lo siguiente era tener una página dedicada solo a los podcast y un resumen de este. Bueno, esta sería más o menos mi lista de características, veamos qué pude obtener.

El Plugin

Encontré uno que es bueno, rápido y fácil, Crystal Pidgeon6 es un plugin que es sumamente pequeño y además cumple con lo que yo quería, los datos generales del podcast se establecen como variables en el archivo pelicanconf.py.

CRYSTAL_PIGEON = {}
CRYSTAL_PIGEON['PODCAST_TITLE'] = "The crystal_pigeon sHOE"
CRYSTAL_PIGEON['PODCAST_LANGUAGE'] = "en-us"
CRYSTAL_PIGEON['PODCAST_LINK'] = "http://127.0.0.1:35729"
CRYSTAL_PIGEON['PODCAST_COPYRIGHT'] = "cOPYRIGHT mR. pIGION"
CRYSTAL_PIGEON['PODCAST_AUTHOR'] = "c.d. pIGION"
CRYSTAL_PIGEON['PODCAST_CATEGORY'] = ['Technology']
CRYSTAL_PIGEON['PODCAST_IMAGE'] = "http://lab.jasonrigden.com/img/sag/square_logo.jpg"
CRYSTAL_PIGEON['PODCAST_EXPLICIT'] = True
CRYSTAL_PIGEON['PODCAST_OWNER'] = {'NAME': 'c.d. pIGION', 'EMAIL': 'CD_PIGION@HOTBIRD.COM'}
CRYSTAL_PIGEON['PODCAST_SUBTITLE'] = "tHE wORLD hAS wONGED mE"
CRYSTAL_PIGEON['PODCAST_SUMMARY'] = "cECIL d. pIGION IS HERE TO ENCOURAGE YOU TO JUST GIVE UP. jOIN HIM AS HE COMPLAINS FOR 2 HOURS ABOUT THOSE WHO HAVE WRONGED HIM."

Y para publicar un episodio, solo hay que agregar 4 metadatos extras al archivo .md del artículo, como la url del archivo de audio, la duración, el tipo de audio, y el tamaño del archivo.

Title: Episode 42 - Why is bus fare so expensive?
Date: 2015-10-03 10:20
Category: Podcast
Tags: public transport, money
Authors: Alexis Metaireau, Conan Doyle
Summary: The metro should be free. I am being oppressed.
Enclosure_url: http://example.xxx/42.mp3
Enclosure_length: 10000
Enclosure_type: audio/mpeg
Enclosure_duration: 10:00

This is the content of my super blog post.

El plugin generará automáticamente un archivo podcast.xml en la raíz de nuestra web, así, por ejemplo en mi web tengo http://marcosp.it/podcast.xml muy rápido y fácil. Lo que si debemos de conocer es que url va a tener el archivo de audio, esto dependerá de la configuración que ustedes tengan, en mi caso organicé todo por año así que mis audios están en el año correspondiente http://marcosp.it/2018/audio.mp3

blog/
├── content/
│   ├── articles/             # Todos los .md incluidos los episodios
│   ├── diario-de-campo/      # Aquí van los audios
│   ├── extra/                # archivos .htaccess robot.txt favicon.ico
│   ├── images/               # Todas las imágenes
│   └── pages/                # Los archivos .md que son páginas
├── output/
├── develop_server.sh
├── fabfile.py
├── Makefile
├── pelicanconf.py
└── publishconf.py

Para la página del podcast fue más complicado a la hora de modificar la plantilla de Pelican-Alchemy7 tuve un problema con las variables, a las que se no puede acceder desde todas las páginas del sitio. De todas formas creé una página oculta llamada Podcast y logré modificar la plantilla de la categoría Podcast, para que muestre el contenido de la página Podcast a modo de resumen y que debajo esté el listado de artículos de la categoría osea los episodios. Tengo pensado hacer un fork de este tema para que quede disponible para todos.

Lo que más me gustó de toquetear el tema fue aprender un poco de Jinja2, es casi como programar una página con Python, aunque no me gusta mucho el tema de cerrar los controles de flujo como por ejemplo:

{% if page in pages %}
  {{ page }}
{% endif %}

Porque siempre te olvidas de cerrar uno, o te pasas controlando que todo este bien, creo que si tuviera un jinja2-mode para emacs sería más fácil.

Y por último, un reproductor para el audio, seguro hay mucha gente que prefiere escuchar el podcast dejando la web de fondo, así que decidí agregar un reproductor súper sencillo, pero funcional, en el mismo archivo .md se puede agregar contenido html.

<audio controls>
  <source src="/diario-de-campo/audio.mp3" type="audio/mpeg">
  Su navegador no soporta el elemento audio de HTML5.
</audio>

Resumen final

Tengo que reconocer que Pelican puede lidiar con casi cualquier cosa que querramos agregar a nuestro blog, comentarios, estadísticas, podcast, imágenes, temas. Una vez configurado todo no hay que tocar nada más, creamos nuestros artículos en Markdown generamos el sitio y subimos a nuestro hosting. Esto siempre se puede automatizar, de manera muy sencilla, con un script. También aprendí que si quieres aplicar algo nuevo casi no vale la pena salir a buscar en google, o en Stackoverflow, si haces una búsqueda en las Issues de los proyectos de GitHub encontrarás casi seguro lo que quieres implementar y una solución. A veces las cosas más obvias pasan por desapercibido.

Bueno, sin más, espero que les haya gustado el Post, sé que el tema da para más, si desean que escriba en más detalle algún punto en concreto solo tienen que contactarme vía e-mail a contacto@marcosp.it o en las redes sociales que están arriba en el menú. Cualquier duda o comentario estaré contento de recibirlo. Un saludo a todos, nos leemos en la próxima.