C'est un fait, un site statique ne dispose pas de base de données type MySQL pour stocker des informations et faire des requêtes pour aller les chercher. Comment faire dans ce cas, puisqu'il est évidement hors de question de tout faire à la main comme en 1996 ? En utilisant des fichiers au format YAML !

Structurer ses données

Vu la taille du site et le faible nombre de pages, on pourrait se dire qu'il est beaucoup plus simple de tout coder dans les pages html et ce ne serait pas totalement faux. Le problème c'est qu'on serait amené à répéter beaucoup de code, ce qui est tout sauf DRY. Niveau maintenabilité, cela voudrait aussi dire que si on doit changer une donnée, il faut aller la chercher dans le fichier HTML ce qui est une perte de temps et de flexibilité.

Lorsqu'on vient du monde des CMS, comme WordPress, la base de données est gérée directement par le CMS, les tables sont existantes à l'installation, et d'autres peuvent êtres créées en ajoutant des plugins. On ne se concentre que sur le contenu et pour les développeurs de thèmes sur les requêtes pour afficher les infos que l'on souhaite.

Grâce au fichiers datas, Middleman nous offre la chance de pouvoir architecturer nos données de manière simple, performante et adaptée au projet. Cela va surtout permettre de séparer le contenu du site (les données) de la structure du site, nos fichiers HTML/Slim.

L'ensemble agira donc à la manière d'un thème qui ira chercher dans les fichiers datas les informations qu'il a besoin pour construire la page.

Middleman et le format YAML

Les fichiers de données sont donc au format YAML et sont stockés dans un nouveau dossier data/ qu'il faudra créer à la racine du projet. Le format YAML permet de structurer très simplement des données dans un fichier avec une syntaxe facile à lire et à comprendre.
Exemple settings.yml:

site:
  title: No Wi-Fi Summercamp
  description: Camp de vacances loin de tout réseau téléphonique
  url: http://nowifisummercamp.github.io
  author: Samuel Bourdon
  i18n: fr

Dans ce fichier en exemple, je stocke des valeurs qui peuvent être ensuite réutilisées partout sur le site en utilisant une syntaxe composée de data + nom_du_fichier + clé

# Ainsi :
data.settings.site.title

# retourne :
No Wi-Fi Summercamp

# et :
data.settings.site.url

# retourne :
http://nowifisummercamp.github.io

YAML Frontmatter pour les données de pages

On vient de voir que l'on pouvait créer des fichiers .yml dans un dossier data/ pour y stocker nos données. On imagine facilement que c'est très pratique pour des données plutôt globales, mais comment faire lorsqu'on veut utiliser spécifiques à une page ?

Prenons l'exemple du blog que l'on ajoutera par la suite. Dans un CMS, si on crée un article de blog, sa date de création, son titre, son image à la une ou encore ses catégories sont stockés en base de données et lorsque le template appelle l'article en question, il récupère par la même occasion ces informations.

On pourrait donc imaginer créer un fichier .yml dans le dossier data/ et venir manuellement y consigner ce type d'infos à chaque création d'article. Mais cela serait vite ingérable! Grâce à YAML Frontmatter, on va pouvoir directement ajouter nos informations dans l'en-tête du fichier et laisser le template de page les utiliser.

Dans le cas d'un article de blog on aura ce type de fichier :

---
title: Le titre de mon article
categorie: Actualités
author: Samuel
---

# reste de l'article en markdown

Dans notre template de blog on affiche ensuite les données comme on l'a vu plus haut mais en précisant qu'on doit aller chercher les informations dans l'en-tête grâce à current_page:

# soit :
current_page.data.title
current_page.data.categorie

# qui retournent :
Le titre de mon article
Actualités

Si vous n'êtes pas familier avec ce genre de syntaxe ou les notions de template, rassurez vous, ça va s'éclaircir rapidement, continuez simplement la lecture :)

Organisons les données du projet

Le meilleur moyen pour organiser les données c'est déjà de les connaître. Donc avoir en amont le contenu du site est réel atout. Dans notre cas, tout le contenu est présent dans le design. Si vous regardez à nouveau cette vue d'ensemble, on peut facilement imaginer la structure.

On aura donc plusieurs fichiers .yml dans le dossier data/ qui regroupent chacun un ensemble de données définit. On pourrait tout mettre dans un seul gros fichier mais encore une fois, la segmentation permet une meilleure maintenabilité.

On aura donc, dans un premier temps :

  • settings.yml: données principales du site
  • galleries.yml: images pour les galeries des pages d'accueil et camp
  • members.yml: les membres de l'équipe
  • activities.yml: la liste des activités
  • testimonials.yml: les témoignages de la page d'accueil

On peut donc créer rapidement les fichiers :

# Depuis la racine du projet
# Si le dossier data n'a pas été crée

$ mkdir data
$ cd data
$ touch settings.yml galleries.yml team.yml activities.yml testimonials.yml

Tous les fichiers détaillés ci-après sont disponibles sur ce gist Utilisez plutôt le _gist_ pour les copier/coller.

Fichier settings.yml

Ce fichier contient les informations principales du site:

# settings.yml
site:
  title: No Wifi Summercamp, camp de vacances dans les Pyrénées Ariégeoises
  description: "Nous sommes un camp de vancances en pleine nature qui privilègie un retour aux sources en éloignant les nouvelles technologies le temps d'un séjour."
  url: "http://nowifisummercamp.github.io"

author:
  name: No Wifi Summercamp
  address: Chemin de coudère 09420 Rimont
  phone: 02 86 54 96 30
  email: infos@nowifisummercamp.fr

social:
  facebook: "https://facebook.com/nowifisummercamp"
  twitter: "https://twitter.com/nowifisummercamp"

copyright:
  developer:
    name: Samuel Bourdon
    url: "http://samuelbourdon.com"

google_analytics:
  tracking_code: "Your-tracking-code"

Fichier galleries.yml

Ici, on va stocker les noms des images qui seront utilisées dans les galeries. Elles seront affichées dans nos pages à l'aide d'une simple boucle. La syntaxe YAML change un peu, on crée ici de simples listes :

# galleries.yml
homepage:
  - randonnee-montagne.jpg
  - nourriture-biouvac.jpg
  - cible-arc.jpg
  - equitation.jpg
  - barbecue.jpg
  - escalade.jpg
  - balade-lac.jpg
  - bivouac-riviere.jpg

camp:
  - peche-a-la-ligne.jpg
  - feu-de-camp.jpg
  - cheval.jpg
  - bicyclette.jpg
  - permaculture.jpg
  - eau-naturelle.jpg
  - lac-turquoise.jpg
  - teapot.jpg

Fichier members.yml

Ce fichier contient les informations sur les membres de l'équipe, notamment leurs prénoms, photos et descriptions. Comme pour les galeries, on verra ensuite qu'une simple boucle de quelques lignes de code suffira pour tous les afficher sur une page.

# members.yml

- Laurent:
  name: Laurent
  picture: laurent.jpg
  description: "C’est le grand chef du camp, il veille sur tout et sur tout le monde, le premier à se lever et le dernier à se coucher.  Derrière son côté sérieux et protecteur, il est dôté de très grandes valeurs humaines."

- Mathilde:
  name: Mathilde
  picture: mathilde.jpg
  description: "Comptable et trésorière, elle gère tout ce qui se rapporte aux finances sur le camp, du ravitallement aux besoins en materiaux. En fin d’après-midi faites attention à ses bombes à eau.

- Vincent:
  name: Vincent
  picture: vincent.jpg
  description: "Notre expert en logistique, il sait trouver n’importe quoi, n’importe ou et trouve toujours le moyen de transporter le matériel. Même si il faut inventer de nouveaux modes de transport."

- Amélie:
  name: Amélie
  picture: amelie.jpg
  description: "Artiste dans l’âme, elle connait mille et une techniques de dessin, de peinture et de sculpture qu’elle transmet à tous. On peut souvent la trouver en train de méditer au pied de notre grand chêne."

- Youri:
  name: Youri
  picture: youri.jpg
  description: "Le plus sportif de toute l’équipe ! Un athlète de haut niveau qui vous enseignera une multitude de sport en toute sécurité. On dit également qu’ à la nuit tombée, il se tranforme en danseur fou."

- Micky:
  name: Micky
  picture: micky.jpg
  description: "Le meilleur musicien de la bande qui vous apprendra à construire des instruments et en jouer. C’est aussi le docteur des vélos qu’il répare et customise pour les rendre plus joyeux."

- Karine:
  name: Karine
  picture: karine.jpg
  description: "Après des années de voyages autour du monde, elle s’est posée chez nous pour nous aider dans notre jardin potager. Elle en est depuis responsable pour le bien de nos assiettes."

- Romain:
  name: Romain
  picture: romain.jpg
  description: "Le roi du système D et du bricolage, donnez lui deux morceaux de bois, il vous fera un arc, donnez de la terre et des pierres, il vous construira une maison. Donnez lui un seau d’eau, il vous arrosera."

- Anne_lise:
  name: Anne-Lise
  picture: anne-lise.jpg
  description: "La personne à aller voir en cas de bobos. Médecin sur le camp pour les humains elle est aussi responsable de la bonne santé de nos animaux. Elle vous accompagnera pour vos balades à cheval."

Fichier activities.yml

Comme pour le fichier members.yml on stocke ici une liste comportant nom, image et description.

# activities.yml

- name: randonnée
  picture: randonnee.jpg
  description: "Partez à la découverte de nos montagnes, nos vallées, nos rivières et nos lacs."

- name: équitation
  picture: équitation.jpg
  description: "Apprenez à monter et partez en balade avec d’autres cavaliers."

- name: canoé
  picture: canoé.jpg
  description: "Au calme sur les lacs ou en rivière, profitez de nos canoés et kayaks "

- name: rafting
  picture: rafting.jpg
  description: "Embarquez avec les plus téméraires pour une descente de rivière sportive"

- name: lutherie
  picture: lutherie.jpg
  description: "Fabriquez vous même votre instrument à cordes et jouez lors des feux de camps "

- name: construction
  picture: construction.jpg
  description: "Apprenez les bases de la construction éco responsable et pratiquez."

- name: poterie
  picture: poterie.jpg
  description: "Fabriquez pots, vaisselle et récipients qui serviront à tous sur le camp"

- name: peinture
  picture: peinture.jpg
  description: "Donnez libre court à votre inspiration et votre créativité lors de cours collectif."

- name: sculpture
  picture: sculpture.jpg
  description: "A partir de bois, de craie ou d’argile, apprenez à sculpter des objets."

- name: escalade
  picture: escalade.jpg
  description: "Accompagné d’un moniteur, tentez de gravir les sommets"

- name: "tir à l'arc"
  picture: tir-a-l-arc.jpg
  description: "Saurez-vous viser juste à une bonne centaine de mètres. "

- name: permaculture
  picture: permaculture.jpg
  description: "Découvrez les bases de la permaculture, aidez nous sur le camp."

- name: vélo custom
  picture: velo-custom.jpg
  description: "Customisez les vélos que nous récupérons pour leur donner une nouvelle vie"

- name: pêche
  picture: peche.jpg
  description: "Posez vos cannes au bord d’une rivère et attendez que ça morde."

- name: baignade
  picture: baignade.jpg
  description: "Profitez des lacs et nombreuses rivères pour vous rafraichir."

Fichier testimonials.yml

Ce fichier sera à l'image des autres, une nouvelle liste avec prénom, âge, ville, description et photo.

# testimonials.yml

- name: Céline
  age: 36 ans
  town: Paris
  picture: celine.jpg
  message: "Superbe surprise que ce séjour. J’en suis revenue ressourcée, reposée et j’ai considérablement réduit ma dépendance à mon téléphone."

- name: Nordine
  age: 24 ans
  town: Lille
  picture: nordine.jpg
  message: "15 jours en pleine nature qui ont redonné un peu de sens à ma vie, loin du tumulte du travail et m’ont permis de faire de belles rencontres."

- name: Benjamin
  age: 13 ans
  town: Strasbourg
  picture: benjamin.jpg
  message: "Je ne pensais pas arriver à tenir un mois loin de ma console et pourtant, si j’avais  rester un mois de plus, je l’aurai fait. Vivement l’année prochaine."

- name: Aurélie
  age: 19 ans
  town: Lyon
  picture: aurélie.jpg
  message: "Un séjour magnifique  je me suis découvert une véritable passion pour l’équitation et à la vie au grand air. J’espère pouvoir revenir rapidement."

Voilà toutes les données principales sont dans leurs fichiers .yml dans le dossier data/. On va donc pouvoir commencer à coder nos templates de pages pour afficher les informations.

Je parlais un peu plus haut de YAML Frontmatter pour les données propres à une page, on y reviendra lors de la création des pages puis lorsqu'on abordera les optimisations SEO. Si vous avez bien regardé les différentes vues du site, on se rend compte qu'il y a toujours une grande image dans le header, on utilisera Frontmatter pour indiquer quelle image utiliser pour chacune des pages et chaque article de blog.

Passons donc à la suite avec la création des layouts et partials et templates avec Slim. Un petit commit avant de partir ne fera pas mal…

Article précédent : Tutoriel Middleman, installer Middleman
Article suivant : Tutoriel Middleman, utiliser les layouts et partials

Je suis disponible pour des missions longues / CDD / CDI Cliquez pour en savoir plus