Mon site web était jusqu’à récemment géré par le mod_autoindex d’Apache. Plutôt basique. Voilà donc un nouveau site, entièrement statique et généré par Hyde, un générateur de site statique en Python.

Statique ou dynamique ?#

Depuis que nous sommes entrés dans le nouveau millénaire, la mode est plutôt aux sites dynamiques. Souvent en PHP avec un moteur comme DotClear ou WordPress, parfois fabriqués à la main dans son langage préféré. Aujourd’hui, la problématique de l’hebergément est beaucoup plus simple : pour pas très cher, il est possible d’obtenir un serveur virtuel sur lequel on fait ce que l’on veut.

Toutefois, les sites dynamiques ont plusieurs défauts :

• Il faut surveiller de manière très attentive les mises à jour de sécurité, certaines plateformes étant plus vulnérables que d’autres.
• La montée en charge peut être très problématique, même pour un petit site qui pourrait avoir à absorber momentanément un pic de charge.

Avec un site statique, les problèmes de sécurité sont moindre vu qu’il y a moins d’élements qui entrent en jeu. La montée en charge est aussi beaucoup plus simple. Un site sous nginx peut supporter des milliers de connexions par seconde sans aucun problème et il est possible de multiplier les serveurs pour obtenir une montée en charge quasiment linéaire. Pour un site dynamique, les performances seront beaucoup plus réduites : quelques centaines de connexions par seconde, voire beaucoup moins sur un petit serveur virtuel.

L’hébergement peut de plus se faire sur des plateformes plus simple, comme par exemple Amazon S3.

De plus, même avec un site statique, il est possible d’opter pour un système de commentaires en utilisant un système comme Disqus. L’omniprésence de JavaScript permet un peu de marier les deux mondes.

Hyde#

Hyde est un générateur de site statique écrit en Python. Il en existe beaucoup d’autres. Il y a une question sur le sujet qui a obtenu pas mal de réponses sur StackOverflow. Il y a également une liste assez complète sur ce blog. Si vous êtes plutôt Ruby, il me semble que nanoc et Webgen sont de bons candidats.

Revenons à Hyde. Il a été réécrit récemment et la documentation n’est pas encore tout à fait à jour. Il faut donc lire le code source pour bien comprendre ce qu’il peut faire et comment. Tout s’articule autour de plugins et j’espère que ce ne sera pas trop le bazar dans un an (j’y contribue).

Il vous prend donc vos fichiers et vous les fait passer dans tout un tas de moulinettes pour arriver au site final. Il utilise Jinja comme système de templating, Markdown comme syntaxe pour écrire les textes, Less pour écrire du CSS de manière assez pratique (et le minifier), UglifyJS pour minimiser le JavaScript, etc. Il est possible d’attacher des métadonnées aux fichiers (titre, auteur, date de création). Mais tout étant quasiment sous forme de plugins, on peut choisir d’autres technologies si on le souhaite.

Au final, on fait un peu ce qu’on veut. Du coup, il faut aussi un peu tout faire soi-même.

Dans les aspects pratiques, un petit serveur web est fourni et il regenère les fichiers à la volée quand on fait des modifications. C’est vraiment pratique mais classique pour ce genre de logiciel.

Nouveau site#

Voilà donc un site supplémentaire réalisé avec Hyde. Parmi les caractéristiques notables, il faut noter que la plupart des articles sont en anglais et en français. Ceci est géré par un petit plugin dans Hyde. Je suis assez content du résultat.

Niveau technique, je ne sers un seul fichier CSS (minifié) et le gros du JavaScript et servi dans un seul fichier (minifié aussi) et chargé avec ses dépendances (jQuery) à l’aide d’un petit loader qui fait partie de Modernizr et qui est yepnope.js. Je vais tenter de mettre en œuvre les bonnes pratiques du moment. Je vise la compatibilité avec Firefox 3, Internet Explorer 7 (pas d’Internet Explorer 6 !), Chrome et Safari dans des versions suffisamment récents.

Niveau habillage, j’ai toujours été indécis. Je suis impressionné par certains sites très sobres mais aussi par d’autres plus sophistiqués. J’ai tenté de choisir un juste milieu, plutôt côté sobre vu que cela permet de ne pas trop mettre à contribution mes talents graphiques.

Les sources sont disponibles sur GitHub pour les curieux !