HacheMuda

Blog personal de Guillermo Latorre

Resultados de la búsqueda de "":

Migrando el blog de Cuéntica de WordPress a Mixture.io en HTML estático y Markdown

Los puntos más importantes del proceso de migración del blog de Cuéntica, que estaba basado en WordPress, para convertirlo en un blog en HTML estático utilizando la herramienta Mixture.io.

Desde hace unos días, el blog de Cuéntica ya no está basado en WordPress sino que es un blog en HTML estático, generado por la herramienta Mixture. Este software se define como una herramienta de prototipado rápido para Mac y Windows, pero es mucho más que eso y tenemos que decir que el soporte técnico de sus creadores es realmente excepcional. Nos han aconsejado, ayudado y han solucionado problemas sobre la marcha (sobre todo con temas de la localización, el idioma y los caracteres especiales usados en español).

La idea principal era probar una nueva tecnología para la generación de blogs estáticos, con todas las ventajas que eso supone en mantenimiento del propio sitio, la flexibilidad y la velocidad.

Mixture es una aplicación brutal para desarrolladores de frontend:

  • Un montón de boilerplates soportados y disponibles para descargar y crear el proyecto con un solo click.
  • Utiliza plantillas Liquid para la generación del sitio web, lo que permite desarrollar un sitio web estático con las funcionalidades más importantes de uno dinámico en general.
  • Auto-refresca el navegador ante cualquier cambio de cualquier fichero, y lo hace además súper rápido.
  • Contiene preprocesadores para casi cualquier lenguaje que quieras usar: Sass, Less, CoffeScript… y tiene la opción del autoprefix para CSS.
  • Optimización de todos los ficheros estáticos y un buen debugger de errores.
  • Permite generar el sitio web en HTML estático y subirlo automáticamente a tu servidor FTP o a GitHub Pages.
  • Tiene una plataforma de hosting para publicar fácilmente el sitio web.
  • Y muchas cosas más.

Mixture - Boilerplates

Es bastante complicado explicar con todos los detalles la configuración y programación del blog con Mixture, así que vamos a echar un vistazo a los puntos más importantes sabiendo que todo está basado en el boilerplate que viene por defecto para la creación de blogs, que se basa en la funcionalidad de “collections” y que permite crear bucles de contenidos en ficheros estáticos, escritos en Markdown.

1. Exportación de todos los contenidos de WP a formato Markdown

Existen varios plugins de WordPress para exportar todos los artículos y páginas de la base de datos a ficheros en formato Markdown. Nosotros utilizamos WordPress to Jekyll Exporter, un plugin pensado para generar los contenidos en Markdown que requiere el popular sistema Jekyll para la generación de sitios web y blogs estáticos. Tuvimos que hacer algunos ajustes para que los metadatos de cada post estuvieran bien especificados, como los necesita Mixture.io, pero fue bastante sencillo.

2. Organización de todos los ficheros

En el directorio del proyecto, tenemos esta estructura de directorios y ficheros:

  • collections: contiene una carpeta articles y en su interior todos los artículos en Markdown. El nombre de los ficheros es el slug de la URL del artículo.
  • public: todos los ficheros estáticos (CSS, Javascript, imágenes, fuentes…)
  • assets: todas las imágenes usadas en el contenido de los artículos para la ilustración de los posts.
  • templates: el propio “theme”, las plantillas para la creación del sitio web. Nos hemos basado en la estructura que viene por defecto en Mixture en el ejemplo de “blog”.
  • Como ficheros especiales en las plantillas, tenemos templates/sitemap.liquid y templates/rss.liquid, añadidas para la generación de un sitemap XML y del feed RSS para poder suscribirse a los nuevos artículos. También templates/404.liquid para la gestión de errores 404.

Así se ve la organización en el navegador de archivos:

Organización de ficheros y directorios

3. El contenido de un artículo Markdown

Todos los artículos están escritos en Markdown, el nombre del fichero es el slug de su URL y todos ellos tienen:

  • Una cabecera con los metadatos del artículo: título, fecha, etc.
  • El contenido del post, en Markdown.

El Markdown de cada post tiene este aspecto:

---
title: 'El título del post'
published: true
thumbnail: /assets/images/2014/03/url-imagen-post-thumbnail.jpg
date: 2014-03-23 08:00:00
categories:
    - categoría 1
    - categoría 2
tags:
    - etiqueta 1
    - etiqueta 2    
---
Aquí va el contenido del post.

4. Creación de rutas para las plantillas en la configuración del proyecto

Mixture permite crear routes en el fichero de configuración del proyecto mixture.json, que son reglas de URL’s visitadas y redirecciones o plantillas que deben usarse para cada una de ellas. En nuestro caso queríamos tener las siguientes vistas:

  • Etiqueta: una plantilla que muestra todos los artículos con esa etiqueta.
  • Categoría: una plantilla que muestra todos los artículos con esa etiqueta.
  • RSS: una plantilla que genera el feed RSS con los últimos 10 artículos.
  • Sitemap: una plantilla que genera el itemap en XML con todas las URL’s de los artículos publicados.
  • Artículo: una plantilla que muestra el contenido de un artículo concreto.

Nuestras rutas han quedado así:

"routes": [
    {
        "redirect": null, "route": "tag/:tag", "template": "taxonomy" 
    },
    {
        "redirect": null, "route": "category/:category", "template": "taxonomy"
    },
    { 
        "route": "rss", "template": "rss", "redirect": null 
    },
    { 
        "route": "sitemap", "template": "sitemap", "redirect": null 
    },
    { 
        "route": ":url", "template": "article", "redirect": null 
    } 
]

4. Las colecciones de artículos

Por defecto, Mixture genera las URL’s de cada artículo añadiendo el nombre del directorio donde están guardados, dentro de collections. Nosotros no queríamos eso así que hemos seguido sus recomendaciones y cada vez que se genera la URL de un post en una plantilla, le suprimimos ese primer “/article/” usando la genial sintaxis de Liquid.

<a href="{{ article.slug | replace_first:'/article' }}">
    {{ article.title }}
</a>

Ejemplo de uso de la etiqueta collection en la plantilla de la portada del blog:

{% layout "index" %}
{% block content %} 
    {% collection "article" by 10 order desc %}
        {% if collection.current_page > collection.pages and collection.size > 0 %}
            {% include "articles/paged-too-far" %}
        {% elseif collection.size == 0 %}
            {% include "articles/no-articles" %}
        {% else %}
            {% assign currentpage = collection.current_page %}
            {% include "articles/article" with collection.items %}
        {% endif %}
    {% endcollection %}
{% endblock %}

Esta plantilla es un bucle que captura los últimos 10 artículos publicados y para cada uno de ellos llama a la plantilla includes/articles/article.liquid, que contiene todo el HTML que se renderiza: título con link, fecha, categorías y etiquetas, extracto del contenido y el thumbnail.

En caso de que la paginación se haya ido demasiado lejos muestra la plantilla paged-too-far.liquid y si el bucle no devuelve ningún elemento, entonces se mostrará la plantilla no-articles.liquid.

Exactamente lo mismo puede hacerse en la plantilla tag.liquid, que es la que está referenciada en la route para ser ejecutada cuando se accede a una URL que debe contener un listado de posts con una etiqueta concreta.

Se puede hacer uso de las variables {{ mixture.route }} para la detección del slug de la URL. Por ejemplo, si se accede a la URL:

  • http://dominio.com/tag/lo-que-sea

en la plantilla Liquid puede usarse {{ mixture.route.tag }} y devolverá lo-que-sea. Así pueden detectarse las etiquetas a buscar en un bucle con collections, por ejemplo:

{% collection "article" by 10 query 'tags={{ mixture.route.tag }}' order desc %}
    {% for items in collection.items %}
        <!-- Mostrar cada artículo -->
    {% endfor %}
{% endcollection %}

Y lo mismo en la plantilla de categorías, pero usando {{ mixture.route.category }}.

5. Redirección vía .htaccess de las URL’s viejas a las nuevas

Hemos intentado no hacer ningún cambio en las URL’s utilizadas en el blog, pero ha sido inevitable que cada URL de cada artículo tenga al final la extensión .html. Como en el antiguo con WordPress las teníamos sin la extensión al final, hemos creado una redirección a través del fichero .htaccess:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RedirectMatch ^/([\w-]+)/?$ https://blog.cuentica.com/$1.html 
</IfModule>

6. Publicación de nuevos artículos

Mixture tiene la opción de convertir el sitio a HTML estático y automáticamente subir los últimos cambios a tu propio servidor FTP, por lo que te da todas las facilidades. Escribes el post en tu entorno local, compruebas que todo está bien y ejecutas la generación y la subida.

Esperamos que te haya gustado la idea, nosotros estamos súper contentos con el resultado y teníamos ganas de probar esta nueva tendencia a la generación de blogs estáticos. Escribe un comentario si tienes cualquier duda o si puedo ayudarte en alguna cosa, :)