Vous êtes motorisé ?
Pour la refonte de mon site, j’en avais un peu marre de l’omniprésence de Wordpress et de ses galères (plugin, maintenances, piratages, besoin de le tordre dans tous les sens pour faire autre chose qu’un blog…), j’ai donc un moment pensé à faire un site statique avec un générateur, mais je n’étais pas équipé pour (il faut souvent jekyll / ruby / nodejs / npm / trucs que je comprends pas / ligne de commande).
J’ai alors décidé de jeter un œil aux sites basés sur des fichiers au lieu de reposer sur une base de donnée, et j’en ai essayé un dont on m’avait dit du bien : Kirby. Ça c’est mon CMS Flat file. Il y en a beaucoup comme ça (+ des générateurs de sites statiques qui sont à la mode) mais lui c’est le mien.
Kirby est opensource (les sources sont disponibles sur github) mais pas libre. Il est aussi payant pour un site en prod (15€) mais vous pouvez faire tout votre site gratuitement puis acheter la licence quand vous mettez en ligne. Ça les vaut largement.
Sur mesure
J’ai rapidement vu que c’était l’outil qu’il me fallait pour les raisons suivantes :
- Pas de base de donnée = migration facile, sauvegardes plus rapides.
- Pas de structure imposée, complètement flexible, donc aucune bidouille pour l’adapter à mes besoins.
- Champs personnalisés au cœur de la logique du CMS.
- Rédaction en Markdown, pas de formatage superflu.
- Création de template facile sans moteur spécifique à apprendre.
- Code facile à comprendre pour un non-développeur, et les tests un peu au hasard sont souvent couronnés de succès (“ha tiens ça marche ça ! Cool”).
- Documentation claire.
- Totalement Multilingue.
Fonctionnement
Le fonctionnement de Kirby est archi simple : le contenu est constitué de dossiers, de fichiers texte et de fichiers autre (images…), dans lequel vous pouvez créer à la volée autant de “champ personnalisés” que vous le souhaitez. Cette logique de base est parfaite car un portfolio aura tendance à se composer de plusieurs gabarits bien distincts avec peu de contenu mais plein d’information différentes, contrairement à un blog qui sera plus “monolithique”. Vincent en parle aussi sur son site car c’est le CMS utilisé pour le Kit de survie du créatif.
La structure
Pour ajouter une page au site, il suffit de rajouter un dossier, pour en changer le contenu il suffit d’éditer le fichier texte et pour rajouter des images… il suffit de les glisser dans le dossier. Quand je vous dis que c’est simple !
Le site dans son entier :
Les projets dans le portfolio :
Le détail d’un projet (avec les images uploadées) :
Avec ce système, rien n’est prévu à l’avance et on a donc pas à contourner un système pensé pour autre chose pour arriver à ses fins, on peut faire son site exactement comme on le souhaite.
Les pages
Pour appeler les pages stockées dans les dossiers, le système est très intuitif. Par exemple si vous souhaitez afficher sur la home quelques projets “à la une” issus de la page portfolio il vous suffira juste de d’utiliser ce code, qui parle de lui même :
page('portfolio')->children()->visible()->filterBy('featured', 'true'); //Sélectionne tous les enfants visibles de la page portfolio comportant le champ "featured".
Là c’est l’exemple le plus basique, mais ce système de chaînage est très puissant et permet d’afficher finement les pages souhaitées. Par exemple, pour afficher 3 projets du portfolio au hasard on fera :
page('portfolio')->children()->visible()->shuffle()->limit(3); //Sélectionne tous les enfants visibles de la page portfolio, les mélange et en renvoie 3.
On pourrait aussi combiner les éléments de chaines pour renvoyer 5 pages “à la une” au hasard. Bref, vous voyez l’idée.
Les champs personnalisés
Comme les données du site ne sont que des fichiers textes, la création de champ personnalisé à l’intérieur des pages ne demande aucune formalité particulière, il suffit de l’écrire et d’enregistrer son fichier, comme ceci (notez que le format Markdown est géré dans n’importe quel champ):
Title: Boulogne – Parchamp ---- projectDate: 2014 ---- Agency: (link: http://roxane-company.fr text: Roxane) ---- Featured: true ---- Brand: Ville de Boulogne-Billancourt ---- Status: Appel d'offre ---- Job: Conception,Direction Artistique,Identité
Puis ensuite d’appeler n’importe lequel de ces champs là où vous voulez dans le template en faisant simplement :
$page->title() $page->projectDate() … $page->brand()
Ces champs sont illimités en nombre et peuvent contenir tout type de données, du texte brut, du Markdown, des tags, du HTML, des variables… le système est très souple car il n’y a pas besoin de manipulation préalable pour créer un champ.
Si par exemple vous vous rendez compte qu’il vous faut afficher d’autres infos sur votre page “projet”, il vous suffit d’ajouter des lignes dans le fichier texte !
Projecturl: url du site en ligne ---- Involved: intervenants ---- Featuredimage: url de l'image à la une
J’ai trouvé que ce fonctionnement correspondait parfaitement à ce que je recherchais car dans un book graphique il n’y a pas vraiment de long texte façon blog avec la logique titre/billet, mais une multitude de petites infos qui accompagnent les visuels et qui doivent être chacune formatées de manière différente.
Le panel
Tout le site peut être géré via un FTP ou un explorateur de fichier, et c’est ce qui fait la force de ce CMS. Toutefois il peut s’avérer pratique de l’éditer en ligne et ça tombe bien car Kirby propose un back office optionnel et complètement personnalisable.
Une fois de plus la logique est de ne pas imposer une interface rigide, mais de permettre à l’utilisateur de créer son site sur mesure. Ceux qui connaissent les affres de l’usine à gaz du back office Wordpress quand on est admin du site ne pourront pas me contredire.
Ici, c’est vous qui choisissez simplement quels champs sont éditables dans le back office, et sous quels formats vous voulez qu’ils s’affichent.
Encore une fois, tout se fait dans un fichier texte “blueprint” dans lequel vous dites quel champ doit s’afficher, et de quelle manière. Cette interface n’est que la retranscription de votre fichier texte de contenu.
projectDate: label: Year type: number brand: label: Brand type: text agency: label: Agency type: text status: label: Project type type: text projectURL: label: Project URL type: url job: label: Expertises type: tags
Ce qui donnera, une fois dans le panel :
On peut définir à l’avance le type de champs (nombre, email, url) avec les contrôles automatiques qui vont avec (ou en créer des personnalisés), et/ou la façon d’afficher ces champs (liste de tags, liste déroulante, zone de texte, cases à cocher). À vous de vous faire le back office dont vous avez toujours rêvé !
Ici, un aperçu du dossier de projet vu dans le panel : on y retrouve les informations du fichier texte et les fichiers uploadés :
La gestion des images
Comme on l’a vu, il suffit d’uploader des images dans le dossier pour qu’elles soient ajoutées à la page. On peut également les glisser-déposer sur la page dans le panel pour le même résultat.
On pourra ensuite les utiliser dans un texte de la page en markdown ou bien prévoir une boucle dans le template pour les afficher automatiquement (la solution idéale pour un portfolio).
Le panel permet de trier les images.
Chaque image peut elle même avoir autant de champs personnalisés que nécessaire (ici auteur et légende).
Délicats raffinements
Kirby étant un CMS très complet, je ne prétend pas vous en faire une démonstration complète en un seul billet, et nous avons vu les pincipaux mécanismes qui permettent de faire un site de type portfolio. Comme on l’a vu, il est facile d’obtenir un résultat probant très rapidement.
J’ai toutefois rajouté quelques raffinements à mon book, pour tester un peu toutes les possibilités du moteur. Je tiens à préciser que quelques-unes de ces fonctionnalités sont anecdotiques et m’ont demandé un temps de développement indécent par rapport à l’objectif visé du fait de mon bas niveau en développement, mais hé, il faut bien s’amuser un peu.
Smartypants
Kirby intègre smartypants, un interpréteur de texte qui permet de corriger automatiquement les erreurs de typographie les plus courantes (guillemets français, espaces insécables avant la ponctuation double…)
Navigation au clavier
Après avoir implémenté la navigation entre les projets précédents/suivant j’ai rendu cette navigation possible au clavier, parce que bon c’est quand même cool.
Noindex/forbidden
J’ai fait en sorte que les pages invisibles ne soient pas référencées par les moteurs de recherche, et que certaines pages soient complètement interdites (en cas de besoin).
Icones de réseaux sociaux
J’aurais pu bêtement mettre les icônes des réseaux sociaux en dur dans la page about et le footer du site mais c’eût été trop simple. J’ai donc utilisé des champs structurés en yaml que j’ai appelé dans le template, avec possibilité de choisir le texte, l’icône et le lien, d’en changer l’ordre et de rajouter autant de réseaux que je veux.
Textes des recommandations et entrées du CV
De la même façon, j’ai transformé le CV qui était juste un bloc de html brut en données structurées avec chaque entrée séparées. J’ai fait pareil pour les recommandations, pour en faciliter le tri et l’ajout. Prochaine étape : utiliser des micro formats hresume et compagnie si un jour j’arrive à m’en dépatouiller.
CV coté back office
CV sur le site
Dates variables avec le tag personalisé “from”
Rien de plus chiant qu’un site pas mis à jour quand il s’agit de l’âge du capitaine ou du nombre d’années d’expérience (par exemple sur mon ancien site j’ai eu 25 ans pendant 5 ans). J’ai donc codé un tag Markdown personnalisé qui calcule un laps de temps à partir d’une date. C’est surement une des fonctionnalités qui m’a pris le plus de temps pour le résultat le plus insignifiant. Mais ça m’a permis d’apprendre comment faire mes tags personnalisés.
Metatags sociaux
Impossible de passer à coté aujourd’hui, les metatags d’opengraph (facebook) ou de twitter permettent d’afficher une image quand votre site est partagé. J’ai développé un système qui permet d’avoir de forts beaux metatags pour briller en société.
Affichage des marques dans le about
Sous mon CV j’affiche les annonceurs pour lesquels j’ai travaillé. Ces marques se mettent à jour en fonction des champs renseignés dans chaque projet. Mais j’ai aussi travaillé pour des annonceurs notables sur des projets confidentiels, ou pour lesquels j’ai choisi de ne pas montrer les projets. J’ai donc ajouté un champ dans le back office qui vient s’agréger aux marques affichées automatiquement.
Projets au hasard en bas de page
Sous chaque projet, j’ai décidé d’afficher 3 projets piochés au hasard dans mon portfolio. Rien de plus simple avec le style de code vu plus haut, sauf que parfois le projet sur lequel on était déjà s’affichait de nouveau. Une fois de plus, la puissance et la simplicité de Kirby m’ont surpris puis qu’il est très facile d’exclure une page de la sélection avec :
page('portfolio')->children()->visible()->not($page)->shuffle()->limit(3);
Simple et génial !
Conclusion
Voilà toutes les raisons qui font que Kirby m’a comblé, j’ai enfin un site que je peux gérer et mettre à jour de la manière dont je l’entends et sans point de friction, ce qui est un point crucial dans un portfolio.
Si le système est compliqué, qu’il y a des champs obligatoires, des vignettes à recadrer et à uploader séparément, le graphiste flemmard n’ajoutera jamais de nouveaux projets, ou alors 10 ans après.
Ce CMS m’a permis d’avoir un portfolio organisé comme je le souhaitais, avec toutes les fonctionnalités que je souhaitais, mais surtout (le plus important) pas une de plus.
1 De fvsch - 09/05/2016, 14:14
Très bon retour d’expérience. Les exemples d’utilisation de l’admin (“panel”) sont chouettes.
Je connais bien Kirby que j’apprécie pour son absence presque totale contraintes pour le contenu: on fait un peu ce qu’on veut et c’est facile de récupérer et transformer un contenu, l’afficher dans un template, etc. Je trouve aussi l'approche “champs multiples avec séparateurs“ beaucoup plus intéressante que l’approche “un contenu principal plus un gros bloc de métadonnées” retenue par la plupart de ses concurrents et des générateurs de sites statiques.
L’espace d’admin est aussi ce qui se fait de mieux sur ce genre d’outil, je dirais à égalité avec Statamic 2, ce qui le rend viable sur des projets de clients, et ça c’est assez chouette.
2 De Julien - 09/05/2016, 15:48
@fvsch : C'est une découverte pour moi et je suis totalement fan. J'ai vu que tu étais assez actif sur kirby, je suis loin d'avoir une telle maîtrise du CMS mais justement la courbe d'apprentissage est assez douce.
J'y pense pour des clients mais il manque encore un vrai éditeur markdown un peu solide qui affiche le résultat, ainsi qu'un système de brouillon même si des plugins existent.
3 De Nicolas Hoizey - 09/05/2016, 16:08
Excellent retour d'expérience qui donne envie de tenter moi aussi, surtout que Vincent m'avait déjà bien vendu la solution…
Contrairement à Florens, je trouve cette répétition de séparateurs entre les champs plutôt lourdingue (juste à la lecture de ton billet). Je préfère le YAML Front Matter de Jekyll et autres. Mais il est vrai qu'il est plus conçu pour les méta données d'un « simple » billet de blog, pas pour des données très structurées plus riches.
Justement, puisque tout est très libre, est-ce qu'il y a quand même certains automatismes plus destinés à des blogs ?
Et question qui m'occupe beaucoup ces temps-ci, qu'y a-t-il pour les images responsives ?
Ah, et à quand un Phototrack renouvelé en Kirby ?
4 De Julien - 09/05/2016, 22:14
@Nicolas : j'ai séparé les champs car c'est ce que je voulais mais en fait tu fais comme tu veux, et le YAML est géré.
Je ne sais pas ce que tu cherches comme automatismes, mais de base tu as le titre et le texte, et ensuite à toi de mettre (très simplement) les champs que tu souhaites en plus.
Pareil pour les images responsives, c'est géré et/ou tu peux le faire toi même.
Phototrack en responsive, tu rigoles mais c'est en chantier justement !
5 De Nicolas Hoizey - 10/05/2016, 12:00
Comme automatismes pour un blog, par exemple utiliser comme date de publication une date format ISO au début du nom de fichier Markdown. Et la gestion des tags.
Pour les images responsives, ce serait carrément mieux si tu utilisais les nouveaux standards pour tes vignettes de portfolio par exemple, plutôt qu'une seule image de 748px de large systématiquement. Ce serait bien plus performant et sympa pour l'éventuel quota de data de tes visiteurs. C'est de ce genre d'automatisation que je parle.
Et tu abuses un peu sur l'image aléatoire du bandeau de la page d'accueil, en très grande dimension quelle que soit la taille du navigateur, alors même que tu n'en affiches qu'une partie… :-p
Cool pour Phototrack !
6 De Julien - 10/05/2016, 13:10
Le format iso : c'est géré de base, les pages sont classées par ordre alphabétique et donc par dates si au format iso (et le classement peut être inversé). Les tags sont là aussi, cf dans mes screenshots plus haut.
Les images responsive : On peut générer des images à la volée à la taille qu'on veut à partir d'une image source, donc c’est totalement possible, on peut aussi uploader 2 versions des images. C'est juste que dans le code je ne sais pas comment servir ces images donc je suis allé au plus simple. Je ne suis pas à la pointe de l'intégration, si tu as un lien n'hésite pas !
Le bandeau de la page d’accueil : c'est vrai que je pourrais générer une image moins grande à la volée.
7 De Gilles - 01/06/2016, 16:48
Bonjour,
Votre article est très clair et convainquant. Je suis très intéressé pour basculer de WP sur Kirby.
Question : permet-il d'intégrer facilement des OpenStreetMaps avec des points d'intérêt positionnés dessus ? Merci de votre avis.
Gilles
8 De Julien - 06/06/2016, 14:12
@Gilles openstreetmap s'intégregra de manière classique, je ne vois aucun problème avec ça.
9 De Macotuts - 05/08/2016, 22:01
Hello Julien !
Super article sur Kirby que je découvre par hasard ! Un très bon retour d'expérience qui je n'en doute pas va permettre à beaucoup de visiteurs de se faire une idée ce est-ce que Kirby correspond à leurs besoins !
J'ai trois questions qui me viennent à l'esprit:
1. Juste parcque j'adore ce genre de morceaux de code et la simplicité de les implémenter dans Kirby, est-ce que la liste des marques avec lesquelles tu as travaillées est vérifiée pour ne pas inclure de doublons ?
2. Est-ce que tu as trouvé une solution pour les images responsive, et si non, est-ce que un tuto t'intéresserait ?
3. Le système de commentaires, tu ne nous en parles pas ? :D
Mathieu @ Macotuts
10 De Julien - 03/10/2016, 16:37
1. Si tu parles de la liste que j'ajoute moi même à la main, non c'est pas comparé et consolidé, mais ça pourrait complètement être le cas de manière simple (comparaison/merge de 2 simples arrays) j'ai juste la flemme. Si tu parles de la liste des marques extraite de tous les projets, elle n'inclut pas de doublons de base.
2. J'ai pas cherché, globalement je ne sais pas comment marchent les images responsives techniquement, kirby ou pas.
3. C'est un folio, il n'y a pas de commentaires, je ne me suis pas penché sur la question.
11 De Aurélien - 24/08/2017, 01:04
J’arrive presque un an après, mais article très bien documenté, et super agréable à lire !
Pour l’histoire des commentaires : Avec l’utilisation de CMS flat file de ce genre on utilise généralement des solutions annexes telles que disqus qui sont très connues et font très bien l’affaire.