Créer un blog statique avec MiddleMan

Les générateurs de sites statiques ont le vent en poupe ces derniers mois. Ils permettent de générer localement un site HTML en vous appuyant sur la puissance d'un langage comme Ruby ou Python, et approchent les fonctionnalités d'une plateforme comme Wordpress, avec plus de légèreté. Le site généré étant un simple ensemble de fichiers html statiques, vous gagnez en sécurité, et votre site est beaucoup plus facile à héberger : pas besoin de base de données pour votre blog, n'importe quel hébergement de base suffira. Vous pouvez même héberger ça sur votre Dropbox avec Site44 ou kissr.com, ou sur Github avec Github pages. Il est en revanche préférable d'avoir quelques connaissances en développement pour utiliser ce genre d'outils, puisque vous allez obligatoirement devoir mettre les mains dans le cambouis.

MiddleMan

MiddleMan est une gem Ruby qui permet de générer des sites statiques. D'autres outils existent dans le monde Ruby, tels que Jekyll ou Octopress, mais MiddleMan a pour lui l'avantage de prendre en charge nativement plusieurs outils que j'utilise couramment, et de faciliter l'utilisation de ceux qui ne sont pas prévus nativement. MiddleMan possède aussi de nombreuses extensions comme middleman-blog, destinée comme son nom l'indique à faciliter l'utilisation de MiddleMan pour la création d'un blog.

Let's get started !

Créons notre projet Middleman

Commençons tout d'abord par installer MiddleMan et créer un nouveau projet. Je suppose ici que vous avez déjà une installation Ruby fonctionnelle sur votre machine.

1
2
$ gem install middleman
$ middleman init mon-projet

Voyons ce qui a été créé :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$ cd mon-projet && tree .
.
├── Gemfile
├── Gemfile.lock
├── config.rb
└── source
    ├── images
    │   ├── background.png
    │   └── middleman.png
    ├── index.html.erb
    ├── javascripts
    │   └── all.js
    ├── layouts
    │   └── layout.erb
    └── stylesheets
        ├── all.css
        └── normalize.css

5 directories, 10 files

• Le répertoire source contient tous les fichiers qui servent à générer le site statique final : les pages, les scripts, les feuilles de style, les images, etc. Vous remarquez en passant que les templates sont au format erb par défaut.
• Le fichier config.rb permet de configurer votre MiddleMan, et d'activer ou désactiver certains modules.

Et testons-le !

1
2
3
4
$ middleman server
== The Middleman is loading
== The Middleman is standing watch at http://0.0.0.0:4567
== Inspect your site configuration at http://0.0.0.0:4567/__middleman/

Cette commande lance un serveur de test pour naviguer sur votre site, sur votre machine de développement. Vous pouvez alors vous rendre sur http://localhost:4567 et voir le site MiddleMan par défaut. Bravo, vous avez un premier projet MiddleMan fonctionnel !

Bloggons avec middleman-blog

Mais comme vous avez pu remarquer, le site créé jusque-là n'a rien à voir, de près ou de loin, avec un blog. C'est la raison d'être de la gem middleman-blog.

Installation

On ajoute donc la ligne gem middleman-blog à notre Gemfile. On peut alors demander à MiddleMan de réinitialiser le projet avec la structure d'un blog, au moyen de la commande suivante :

1
2
3
4
5
6
7
8
9
10
11
12
13
$ middleman init . --template=blog
   identical  .gitignore
   update  config.rb
    exist  source
   create  source/2012-01-01-example-article.html.markdown
   create  source/calendar.html.erb
   create  source/feed.xml.builder
   update  source/index.html.erb
   create  source/layout.erb
   create  source/tag.html.erb
    exist  source/stylesheets
    exist  source/javascripts
    exist  source/images

Cette commande fait beaucoup de choses, et active notamment l'extension blog en ajoutant la section activate :blog dans le fichier config.rb. C'est dans cette section que vous trouverez toutes les options de configuration de ce module, n'hésitez pas à aller y jeter un oeil ! Cette commande crée aussi un premier article, une page calendar.html.erb, tag.html.erb, et un fichier feed.xml.builder charger de générer pour vous le flux RSS/ATOM de votre site. Elle est pas belle la vie ?

Mais comment j'écris des articles ?

Comme vous êtes attentifs, vous aurez remarqué que notre commande a également créé un fichier 2012-01-01-example-article.html.markdown. Et comme vous êtes aussi perspicace, vous vous dites que ça ressemble franchement à un article d'exemple. Bingo !

1
2
3
4
5
6
---
title: Example Article
date: 2012-01-01
tags: example
---
This is an example article. You probably want to delete it and write your own articles!

Les articles du blog sont au format MarkDown. La section délimitée par trois tirets --- est appelée le front matter, et c'est là que vous pouvez indiquer les métadonnées liées à votre article. Vous pouvez ensuite réutiliser ces métadonnées dans vos templates.

Par défaut, les articles sont placés à la racine du répertoire source, et leur nom est au format {année}-{mois}-{jour}-titre. Vous pouvez modifier cela dans le fichier config.rb, au moyen de la directive blog.sources.

La suite, la suite !!

Vous pouvez d'ores et déjà éditer ce premier article, ses métadonnées, le renommer… Sauvegardez le, puis lancez votre serveur de test. Si vous arrivez à lire l'article, alors c'est gagné ! Vous pouvez également créer d'autres articles et commencer à rédiger un peu de contenu.

Si vous le souhaitez, vous pouvez même construire votre site avec middleman build et le déployer sur le serveur de votre choix…mais c'est peut-être encore un peu tôt, il y a encore beaucoup de travail avant d'avoir quelque chose de présentable !

» À venir : Un blog statique avec MiddleMan partie 2 : design avec Slim et SCSS