Café y webs multi-idioma

¡Hola!

Tras mucho currelar en esto ya toca el momento de hablar de Schiumato, un generador de sitios web estáticos que ya mencioné en mi entrada sobre el amado arte de afeitar animales lanudos.

Lo hice para gestionar la página web de ElenQ Technology, la empresa que estoy fundando y que también os mencioné in the past.

Como ya he hecho la web y esto ha funcionado es momento de contar cómo funciona y cómo se utiliza.

La verdad es que tiene una lista más larga de cosas pendientes que la lista de cosas hechas, pero es un programa tan extremadamente sencillo que da risa. Pero funciona. Como tiene que ser.

Lo podéis instalar directamente con:

npm install -g schiumato

Para usarlo también os recomiendo que instaléis un servidor HTTP para probar.

npm install -g live-server

Este servidor mola porque cuando se hacen cambios en sus ficheros te actualiza el browser automáticamente. ¡Para nuestro proceso vendrá perfecto!

Schiumato funciona de la siguiente manera:

Tienes un conjunto de plantillas de nunjucks con un par de movidas extra que yo he añadido: _() y filter translate sirven para traducir. Todo string bajo esas funciones será traducido tomando como referencia los ficheros de locales. Tenéis más explicaciones en la minidocumentación de Schiumato.

Cuando disparemos schiumato create, se procesarán esas plantillas y el resultado se copiará en la carpeta de destino de forma ordenada. Las plantillas se renderizan en orden, una vez por idioma, y se vuelcan en su carpeta correspondiente. Los ficheros de la carpeta estática se copian literalmente. Por ejemplo, con mi web:

www
├── en
│   ├── about.html
│   ├── contact.html
│   ├── index.html
│   ├── services.html
│   └── support.html
├── es
│   ├── about.html
│   ├── contact.html
│   ├── index.html
│   ├── services.html
│   └── support.html
├── eu
│   ├── about.html
│   ├── contact.html
│   ├── index.html
│   ├── services.html
│   └── support.html
└── static
    ├── css
    │   ├── fonts.css
    │   ├── normalize.css
    │   ├── skeleton.css
    │   └── style.css
    ├── files
    │   └── publickey.hello@elenq.tech.txt
    ├── fonts
    │   ├── LatoLatin-Light.eot
    │   ├── LatoLatin-Light.ttf
    │   ├── LatoLatin-Light.woff
    │   ├── LatoLatin-Light.woff2
    │   ├── LatoLatin-Regular.eot
    │   ├── LatoLatin-Regular.ttf
    │   ├── LatoLatin-Regular.woff
    │   ├── LatoLatin-Regular.woff2
    │   └── OFL.txt
    └── img
        ├── ElenQTechLogo.png
        ├── ElenQTechLogo.svg
        ├── faces
        │   └── ekaitz.jpg
        ├── liberapay.svg
        └── projects
            └── sotapatroi.png

10 directories, 34 files

Veis como se vuelca 3 veces el HTML, en Inglés, Español y Euskera. El contenido estático está sólo una vez porque no se traduce y así no se replica.

Con live-server arrancado en la carpeta www, podéis ir viendo cómo quedan las cosas cada vez que lanzáis una creación.

Y este es el rollo.

Si queréis ver las plantillas podéis verlas en el repo de la web aquí.

Para hacer el deploy copiáis toda la carpeta WWW y ya, eso sí, tenéis que seleccionar el idioma que queréis que se muestre por defecto para que os redireccione ahí vuestro servidor para que se vea algo al entrar a la raíz. Eso es fácil de hacer.

Y nada, esta es la web resultante:

http://elenq.tech

Esta también redirecciona a HTTPS 😉

Espero que os mole el rollo.

Sed buenos.