Ràpid, senzill i fiable: Jekyll

Quan vam decidir que necessitàvem refer la web d’itnig des de zero, vam aconseguir sintetitzar les nostres necessitats en tres paraules.

Ràpid, senzill i fiable.

Hi ha res més ràpid, senzill i fiable que l’html estàtic? Escriure una pàgina html estàtica en el món dinàmic en què vivim quedava fora de qüestió, però necessitàvem alguna cosa que ens permetés fer-ho d’una manera fàcil. Va ser llavors quan vam trobar Jekyll.

Jekyll et permet generar un lloc html estàtic a partir de components dinàmics com plantilles, partials, codi liquid, markdown, etc.

Estructura de dades

Les classes de dades s’estructuren en Collections, on cada col·lecció és una carpeta on cada instància es representa amb un fitxer. Cadascun d’aquests fitxers comença amb el que anomenen Front Matter, una capçalera on es defineixen tots els atributs de la instància. Aquest Front Matter és el que permet les relacions entre classes, el filtratge, les consultes, etc.

Les classes que no necessiten una representació en pàgina html es guarden mitjançant Data Files (un fitxer CSV típic) en lloc de representar-se amb un fitxer dins d’una col·lecció. En el nostre cas, els utilitzem per emmagatzemar les persones que treballen a les nostres startups.

Origen de les dades

Podríem crear manualment un fitxer a la col·lecció _jobs cada vegada que tenim una nova oferta de feina, o un nou fitxer a la col·lecció _events cada vegada que tenim un esdeveniment, però ens encanta optimitzar el temps, i ja actualitzem les nostres ofertes de feina a Workable i els nostres esdeveniments a Meetup, així que per què no utilitzar les seves APIs? Doncs això és exactament el que fem. Executem periòdicament un script que recupera totes les ofertes de Workable creant un fitxer per a cadascuna, que després es guarda a la col·lecció _jobs. Fem el mateix amb els propers esdeveniments i també utilitzem l’API de Google Drive per recuperar l’última versió del fitxer CSV de persones.

Disseny

Una vegada definida l’estructura i creades algunes dades, pots començar a treballar en el disseny. Pots definir propietats i atributs en qualsevol fitxer utilitzant el Front Matter, i obtenir i jugar amb les dades prèviament creades utilitzant Liquid (un motor de plantilles creat per Shopify), per finalment mostrar-les mitjançant HTML.

Conclusions

Després de treballar i mantenir un lloc Jekyll durant un parell de mesos, puc dir que compleix les nostres expectatives, però hi ha un parell d’inconvenients que hauries de tenir en compte abans de llançar-te a adoptar-lo.

El primer és precisament el que el fa ràpid i fiable, és a dir, la manca de backend. Abans de triar Jekyll, hauràs de preguntar-te si el teu projecte és prou senzill per evitar el registre d’usuaris i un modelatge complex de classes i base de dades. Si ho és, endavant.

El segon és la manca d’un “backoffice” per a persones no tècniques. Cada vegada que actualitzem manualment el contingut d’un fitxer (afegint per exemple l’url del vídeo d’un esdeveniment un cop és en línia), cal sincronitzar-lo amb el repositori utilitzant git, i desplegar-lo al servidor on està allotjat el lloc. Això pot semblar senzill i net des de la perspectiva del desenvolupador, però quan el contingut l’han d’actualitzar usuaris no tècnics, això pot ser un problema. Hauràs d’assegurar-te que la persona que gestiona el contingut sap o està disposada a aprendre git.