Technique

MiddleMan, ou le retour des sites statiques

Laisser un commentaire

Le Net évolue très vite (nous sommes bien placés pour le savoir) et forcément notre site n’a pas pas échappé au vieillissement. Qu’à cela ne tienne, voici une belle occasion de le mettre au goût du jour en simplifiant son ergonomie et son accès : il est temps de revenir au Web 1.0 !

Fonctionnellement parlant et comme la plupart des vitrines, notre site n’est pas très riche. Il présente simplement notre travail et vous permet de nous contacter. Exit donc l’idée d’utiliser un CMS glouton : nous voulons quelque chose de nerveux et de robuste. « Un site statique, quoi ? » plaisantera quelqu’un. Exactement, c’est bien ce que nous allons choisir.

Nous n’avons pas besoin de l’arsenal des frameworks habituels, mais les nantis que nous sommes ont besoin de quelques fonctions confortables (au minimum l’inclusion de code). Comment alors bénéficier d’un minimum de commodité avec un site statique sans jouer du script à tout-va ? Avec des générateurs de sites statiques pardi ! Tout au moins l’un d’eux puisqu’après quelques essais, nous adoptons MiddleMan.

Cet « homme du milieu » prend votre code saupoudré de quelques tags maison et le compile en un beau site statique fait de bêtes pages HTML. Si vous ne connaissez pas ce bel outil, je me propose de vous en faire une rapide présentation :

Pourquoi un générateur de sites statiques ?

Pour commencer et comprendre où l’on met les pieds, petit inventaire des forces et faiblesses du candidat :

Les moins :

  • Pas de moteur de recherche intégré, pas de plug-ins, pas de base de données. Bref, pas de dynamique côté serveur.
  • La syntaxe de rédaction des pages vous lie au produit mais utilise des standards.

Les plus :

  • Difficile d’obtenir un délai de chargement des pages plus rapide qu’une simple page.
  • Le résultat de la compilation est bien sûr compatible tous serveurs web.
  • Un site en HTML statique peut malgré tout bénéficier de traitements côté serveur en l’associant à quelques web services bien sentis. C’est ce que nous avons mis en place pour l’envoi de mail par exemple.
  • Une surface d’attaque considérablement réduite.
    Certains internautes abandonnent les moteurs de blog à la WordPress pour des générateur comme Jekyll. Si leur mise en place réclame un peu de technique, ils sont considérablement moins vulnérables, notamment à cause de l’absence plug-ins douteux. Je vous mets au défit de pirater un site statique (mais pas le nôtre SVP 😉 ).

Comme vous le voyez, Middleman est parfait pour réaliser un site vitrine. A vous de voir maintenant si les fonctionnalités proposées vous conviennent :

Les fonctionnalités attendues

Nous avons retenu trois besoins indispensables :

Des includes

Le copier-coller de code mène invariablement à un désastre en terme de maintenance. Le fait de pouvoir inclure des portions de code dans une page est salvateur. Le menu est un bon exemple de code réutilisé sur chacune de nos pages.

Middleman propose d’inclure du code :

  • via ses asset pipelines qui sont de simples includes pour JS et CSS
  • grâce aux partials qui sont des includes de fichiers HTML comme on en trouve en PHP ou feu ASP.

Des templates

Les layouts ont répondu au besoin de templates. A l’inverse des includes, ils nous permettent d’intégrer du contenu au sein d’un modèle de page. Très pratiques pour avoir un tronc commun à toutes les pages.

De la localisation

Pour créer un site multilingue, il nous fallait une gestion de la localisation avec possibilité de définir des noms de fichiers différents en fonction de la langue (« /a-propos » devient « /about » en anglais).
Cerise sur le gâteau : les traductions sont soit stockées dans un fichier YAML (phrases courtes), soit dans des fichiers HTML suffixés avec la langue. Facile.

Bonus : de la performance et de la sécurité

Comme on le listait dans les avantages, un site simple site statique possède non seulement un temps de réponse instantané mais dispose également d’une surface d’attaque amoindrie.

Etc.

Middleman c’est aussi :

Installation

Middleman est documenté mais cache quelques uns de ses trésors. Commençons par monter rapidement un environnement de test sous Ubuntu 14.04.3.

$ sudo apt-get install ruby-dev nodejs zlib1g-dev build-essential
$ sudo gem install middleman
$ cd /var/www/middleman/
$ sudo middleman init site-timsoft
$ sudo iptables -A INPUT -p tcp --dport 4567 -j ACCEPT
$ cd site-timsoft/

Simple, efficace : l’outil est installé, un site « site-timsoft » est configuré et le port de test (4567) est ouvert.

Pour lancer un serveur de test qui compilera vos pages à la volée, rendez-vous dans le dossier de  votre site et tapez :

$ middleman

Pour builder le site dans un répertoire build :

$ middleman build --verbose

La documentation de l’outil est assez bien fichue et je vous invite à la parcourir. Cependant je peux peut-être vous faire économiser quelques heures en vous écartant des écueils auxquels vous risquez d’être confrontés.

De l’importance de l’ordre dans l’activation des modules.

Lorsque vous activez des modules, prenez garde à l’ordre dans lequel vous le faites. Ici, nous souhaitons utiliser deux fonctionnalités de MiddleMan :

  • la localisation et notamment celle des noms de fichiers.
  • l’amputation des extensions, qui concrètement transforme votre « /a-propos.html » en « /a-propos/ »

Sachez que vous devez d’abord activer la localisation, puis l’amputation des extensions :

activate :i18n, 
:mount_at_root => :fr,
:langs => [:fr, :en]
activate :directory_indexes

Spécifier le titre d’une page incluse dans un layout

Pour définir un titre de page, vous pouvez utiliser la syntaxe FrontMatter en tête de votre page :

---
title: "Mon Titre !"
---

Mais ce n’est évidemment plus si facile lorsque vous souhaitez traduire votre titre. Un moyen de contournement est alors de définir une variable localized_title avec un texte traduit. Dans votre page indiquez :

<% content_for :localized_title do %>
 <%= I18n.t(:maressource) %>
<% end %>

Et dans votre layout :

<title><%= yield_content :localized_title %></title>

Gérer les traductions hiérarchiquement

La documentation vous suggère d’utiliser cette syntaxe :

<%= t(:title) %>

Préférez ajouter des guillemets pour pouvoir utiliser la hiérarchie que propose le YAML.

<%= t("index.title") %>

Obtenir l’url d’une page dont le titre est localisé

L’outil vous propose une syntaxe pour obtenir des liens « <a> » tous prêts : link_to. Malheureusement, dans un site un peu avancé, vous aurez besoin de personnaliser vos liens. Si vous utilisez la réécriture de liens par langue, vous aurez spécifié les paths dans votre fichier de langue et vous pouvez y accèder comme à n’importe quel contenu traduit :

/<%= I18n.t("paths.chemin-vers-ma-page")%>/

Pour finir

Middleman a parfaitement rempli sa tâche. Notre site est maintenant en ligne et nous avons mis en place un sympathique processus de build et livraison par Git. Bref, ça fonctionne, et ça méritait pour une fois de faire l’apologie d’un outil (et pourtant, on n’y gagne rien 😉 ).

Si vous avez des questions, et si j’ai du temps, il y a les commentaires.

Références

Suivez-nous
Les derniers articles par Jérôme Maréchal (tout voir)

Laisser un commentaire