Voilà plusieurs années que nous voulions refaire le site du PLUG. Depuis ce soir, c’est chose faite : http:/plugfr.org/

Le design

Au début de cette refonte, j’ai proposé à tous ceux qui voulaient se lancer, de créer une ébauche de design pour le futur site afin qu’on choisisse ensemble, mais le sujet n’a motivé que moi. Ça m’a donné encore plus envie de le faire jà fond.

Les sites du PLUG n’ont jamais été très tape à l’œil, mais je voulais travailler sur un axe encore plus simple, orienté au maximum sur le contenu avec une lisibilité maximum et uniquement des informations utiles et placées en conséquences.

J’ai commencé par recenser les éléments fonctionnels ou d’informations qui me semblaient nécessaires, évaluer leur importance et les positionner dans l’espace. Dans cette phase j’ai notamment pensé aux visiteurs habitués et aux nouveaux. Les uns devaient rapidement trouver l’info fraiche et les autres comprendre qui ont est, où nous trouver…

Je voulais utiliser le moins de couleurs possible, des images uniquement quand elles ont un vrai sens (actuellement il n’y a que le logo et la carte), pas de bordure ni de couleur de fond inutiles…

je me suis servi de cet exercice de style pour mettre en pratique ce que j’apprenais sur l’HTML5. Les nouvelles balises sémantiques (header, footer, nav, article, section, aside…), les nouveaux types de champs de formulaire, les variantes d’attributs… J’ai essayé de coller à la lettre aux recommandations de html5doctor, ce qui s’est avéré plutôt simple vu la clarté de leur propos.

Le moteur

Tout comme le design, on n’était pas fixé sur le moteur du site. Depuis un paquet d’années, c’est le vénérable SPIP qui propulsait notre site. Une version 1.7.2, c’est dire s’il était resté longtemps sans rafraîchissement.

On hésitait entre refaire un template SPIP avec la version actuelle, utiliser un moteur de blog classique (Wordpress ou Dotclear) ou utiliser un générateur statique (Jekyll, Bonsaï…).

Vu qu’aucune autre initiative n’a été prise, et avec l’accord de mes collègues du bureau de l’association (Grégoryet Vincent), je me suis lancé avec Jekyll.

C’est un générateur de site statique. Il est codé en Ruby, ce qui me plaît bien. Il est très léger. Il n’a que très peu de dépendance et s’installe très facilement.

Le principe est qu’on crée des templates et des pages de contenu (articles…) puis Jekyll s’occupe de “compiler” tout ça en une arborescence de dossiers et de fichiers HTML, CSS… que l’on peut alors déposer sur un serveur web. Il n’y donc pas de base de données, pas de nécessité d’avoir un langage type PHP, Ruby, Python… sur le serveur. Il n’y a donc pas non plus de solution plus rapide car c’est juste le serveur web (genre Apache, Nginx…) qui travaille, et rien d’autre.

Comprendre les fondamentaux de Jekyll est très rapide, surtout si on est un peu programmeur et un peu designer. Rédiger un nouvel article est encore plus simple, il suffit de dupliquer un fichier d’article existant et adapter.

L’avantage de ne manipuler que des fichiers (source et “compilés”) c’est qu’on peut mettre tout ça dans un système de contrôle de version et on a de la sauvegarde multi-site gratuitement. Pour ça j’ai choisi Git.

L’hébergement et le code source

Depuis des années nous étions hébergés sur un serveur en colocation. D’ailleurs MERCI à leurs colocataires pour l’accueil gracieux.

Nous voulions changer et nous avons choisi TuxFamily car ils proposent des services gratuits pour la communauté du libre : hébergement web, bases de données, dépôt Git, services e-mail et listes de diffusion…

Le site est dorénavant hébergé chez eux, ainsi qu’une copie miroir du code source.

Le code source est donc géré dans un dépôt Git. Une copie de ce dépôt est chez Github. Il est accessible en lecture à tout le monde. Les fonctionnalités de Github font qu’il est très facile de proposer des modifications au site.

Une copie de ce dépôt Git est aussi chez TuxFamily, à des fins de copie car ils n’ont pas le même niveau d’outils collaboratifs que Github. Par contre avoir une copie chez eux augmente la sécurité et l’indépendance.

Le référencement

Il y a 1 an ou 2, on avait remarqué la très grande difficulté à trouver le site du PLUG sur Google. Tous les premiers résultats n’étaient d’ailleurs même pas dans le champ d’intérêt de l’informatique et des logiciels libres. J’avais alors pris quelques mesures dites de SEO pour tenter d’améliorer un peu la situation. Je ne me souviens plus exactement ce que j’avais fait, mais rien d’extraordinaire : des meilleurs balises HTML, du contenu plus évident…

Hier, j’ai constaté, plus ou moins par hasard, qu’une recherche sur “plug” nous propulse en première page, bien devant tous nos anciens “concurrents” sexuels.

Avec cette nouvelle mouture du site, et un travail encore plus poussé de référencement passif, j’espère bien que notre visibilité sera au moins conservée, voire renforcée.

J’ai évidemment créé un liste de redirections (partiellement dynamique) pour les anciennes URL du site, afin que Google ne s’y perde pas et ne considère pas le site comme tout cassé.

Conclusion

J’ai mis beaucoup plus de temps que je pensais pour finir ce nouveau site pour le PLUG. Mais je suis bien content du résultat : pour ce que ça représente pour le PLUG, et pour ce que j’ai appris en le faisant.

Il reste encore des choses à faire ou à améliorer. Toutes les annexes au site n’ont pas encore été migrées, mais ça viendra, en fonction de leur l’importance. Il y a certainement aussi des choses qu’on n’a pas vues. Donc, si vous avez envie de participer, n’hésitez pas