Tutoriel Middleman, créer un site internet avec Middleman

Sommaire du tutoriel

Le tutoriel étant assez long, il est découpé en plusieurs pages correspondant chacune à différentes étapes:

• Installation de Middleman et des gems
• Comment organiser ses données sans base de données
• Créer le layout et les partials
• Création des pages du site
• Intégrer le blog, les catégories, articles en markdown et commentaires
• Intégration du design en CSS depuis le styleguide
• Build du site et déploiement sur Github Pages

Vue d'ensemble du projet

Le projet est assez classique, il s'agit d'un site type brochure/vitrine qui contient des pages de présentation et une partie blog.

On partira d'un design fait dans Sketch pour lequel les assets seront exportés et prêts à être utilisés. La finalité sera de déployer notre site sur Github Pages.

Le site utilisera donc Middleman qu'il faudra installer et configurer. Même si le design est existant et qu'il serait intéressant de l'intégrer directement, on commencera par architecturer nos données et les afficher dans nos pages. Middleman permettant l'usage de langage de template, on utilisera Slim.

Pour la partie CSS, on utilisera Sass, la librairie de mixins Bourbon et la grille responsive Neat, avec un petit mix de BEM SMACSS et OOCSS.

Le déploiement se fera sur Github Pages, permettant d'avoir un hébergement gratuit, auquel on attachera un nom de domaine.

Les pré-requis

La création du site va faire appel à diverses technos avec lesquelles il est bon d'être un minimum familier. Middleman étant en Ruby, connaitre un peu de syntaxe de ce langage sera utile. Il faut donc qu'un environnement Ruby soit fonctionnel sur votre ordinateur !

Il existe plusieurs possibilités pour installer Ruby que je ne vais pas détailler ici, il y a plein de doc en ligne expliquant comment faire. Si vous êtes sur Mac vous pouvez essayer le script Laptop.

Puisque le site sera hébergé par Github, avoir un compte github sera nécessaire, connaitre des commandes git sera un plus non négligeable.

Middleman, comme git s'utilise en ligne de commande, il faut donc savoir utiliser un terminal et au moins savoir naviguer dans les dossiers.

Les pages du site seront en Slim et les articles en Markdown, si vous en connaissez la syntaxe tant mieux sinon on verra que c'est très simple à apprendre.

Choix du type de site et design

Écrire ce genre du tutoriel prend beaucoup de temps et aussi bien pour le lecteur que pour le rédacteur, le choix d'un sujet plaisant aide à garder la motivation.

Je voulais éviter de balayer rapidement les fonctionnalités avec du lorem ipsum, des images de placehold.it, et du Bootstrap. C'est rapide mais l'intérêt risquait d'aller en décroissant.

Je me suis donc dit que créer un site fictif de toute pièce serait un challenge beaucoup plus intéressant et offrirait quelque chose de beaucoup plus concret.

Choisir le thème du site internet

Le choix du thème a été fait en fonction de mes aspirations du moment : mode de vie durable, éco-construction, auto suffisance alimentaire, mouvance diy, customisation de vélo et addiction aux nouvelles technologies.

En mélangeant le tout on obtient donc ce projet : Réaliser le site internet du "No Wi-fi Summercamp", un camp (fictif) situé dans le sud de la France offrant des séjours loin de tout téléphone tablette et ordinateur. Je prends les devants en disant que oui, c'est paradoxal pour ce camp de disposer d'un site web :)

Design du site

J'ai souhaité garder un design assez simple, le but ici n'étant pas de faire du webdesign mais de se concentrer sur Middleman. Le site servira par la suite de base pour l'ajout d'autres fonctionnalités. Il est bien sûr disponible en ligne : No Wi-Fi Summercamp.

Si vous voulez reproduire le site pas à pas en suivant le tutoriel, les assets sont disponibles en téléchargement. Le code source est également disponible dans son dépôt github.

Nous pouvons donc passer à l'étape suivante, installer Middleman et démarrer le projet.

Ci après un screenshot des pages qui seront créées au fur et à mesure: