2011-nouveau-site-avec-hyde.html

---
title: Nouveau site avec Hyde
uuid: 5f6db065-38d1-4b64-af20-de632ad0f39b
tags:
  - outdated
  - web
---

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](https://github.com/hyde/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](https://fr.dotclear.org/) ou
[WordPress](https://fr.wordpress.com/), 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](https://nginx.org/)
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](https://aws.amazon.com/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](https://disqus.com/). L'omniprésence de JavaScript permet
un peu de marier les deux mondes.

# Hyde

[Hyde](https://github.com/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][1] qui a obtenu pas mal de réponses sur
[StackOverflow][2]. Il y a également une liste assez complète sur
[ce blog][3]. Si vous êtes plutôt Ruby, il me semble que [nanoc][4] et
[Webgen][5] 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][6]).

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][7]
comme système de templating, [Markdown][10] comme syntaxe pour écrire
les textes, [Less][8] pour écrire du CSS de manière assez pratique (et
le minifier), [UglifyJS][9] 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.

[1]: https://web.archive.org/web/20101217132223/http://stackoverflow.com:80/questions/186290/best-static-website-generator
[2]: https://stackoverflow.com/
[3]: https://web.archive.org/web/2011/http://iwantmyname.com/blog/2011/02/list-static-website-generators.html
[4]: https://web.archive.org/web/2011/http://nanoc.stoneship.org/
[5]: https://webgen.gettalong.org/
[6]: https://github.com/vincentbernat/hyde
[7]: https://jinja.palletsprojects.com/
[8]: http://lesscss.org/
[9]: https://github.com/mishoo/UglifyJS
[10]: https://daringfireball.net/projects/markdown/

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](https://github.com/vincentbernat/hyde/tree/multi-language-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](https://jquery.com/)) à l'aide
d'un petit loader qui fait partie de
[Modernizr](https://www.npmjs.com/package/modernizr) et qui est
[yepnope.js](https://web.archive.org/web/2011/http://yepnopejs.com/). 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][11] [sites][12] [très sobres][13] mais aussi par d'autres
plus [sophistiqués][14]. 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][15] pour les curieux !

[11]: https://web.archive.org/web/2013/http://cloudhead.io/
[12]: http://diveinto.html5doctor.com/
[13]: https://stackoverflow.blog/
[14]: https://web.archive.org/web/2014/http://marcofolio.net/
[15]: {{ resource.meta.sources }}