Tutoriel Middleman, installer Middleman

Préparer le projet avec Github

Le site étant hébergé sur Github Pages, le versionning sera donc fait sur Github et on va commencer par là car il y a quelques règles à respecter.

Le site sera accessible sur Github Pages avec ce type d'url http://nom-de-l-utilisateur.github.io (on ajoutera un nom de domaine ensuite) ce qui nécessite d'avoir un dossier de travail en local qui porte le même nom. Pour l'occasion j'ai créé un compte github nowifisummercamp. Le site pourra donc être accessible à l'adresse http://nowifisummercamp.github.io. (pensez à vérifier votre email sinon vous aurez une belle erreur 404)

La dernière étape consiste à créer un dépôt sur Github qui portera le nom du dossier de travail.

Installer la gem Middleman

Middleman est distribué sous la forme d'une gem Ruby ce qui va en faciliter l'installation, ouvrez un terminal et faites :

$ gem install middleman

Après quelques minutes, Middleman est installé et prêt à être utilisé. On peut donc créer notre projet. Toujours en ligne de commande, placez vous dans votre dossier de travail ( chez moi c'est work/projects/ ) et tapez la commande pour initialiser le projet :

$ cd ~/work/projects
$ middleman init nowifisummercamp.github.io

On utilise le nom d'utilisateur du compte Github. Si votre nom de compte c'est petitponey ça donnera middleman init petitponey.github.io

Middleman va créer un dossier au nom du projet dans lequel va se trouver l'ensemble des fichiers. A noter qu'il est possible de passer d'autres paramètres à la commande middleman init pour utiliser des templates existants. Dans le cas présent, on part de rien :)

Maintenant notre projet créé, on peut naviguer dedans pour voir ce qui s'y trouve :

$ cd nowifi_summercamp.github.io
  $ find .
  .
  ./.gitignore
  ./config.rb
  ./Gemfile
  ./Gemfile.lock
  ./source
  ./source/images
  ./source/images/background.png
  ./source/images/middleman.png
  ./source/index.html.erb
  ./source/javascripts
  ./source/javascripts/all.js
  ./source/layouts
  ./source/layouts/layout.erb
  ./source/stylesheets
  ./source/stylesheets/all.css
  ./source/stylesheets/normalize.css

On trouve donc différents fichiers et dossiers, d'autres viendront s'ajouter.

• .gitignore : permet d'ignorer certains fichiers avec git
• config.rb : fichier dans lequel tient toute la configuration du site
• Gemfile : fichier dans lequel on liste les gems utilisées
• source : dossier dans lequel on placera tous nos fichiers.

Le dossier source contient les dossiers layouts, javascripts et stylesheets. Pour les utilisateurs de Ruby on Rails, cela devrait sembler familier.

On peut maintenant tester si tout fonctionne. Ouvrez un nouvel onglet dans votre terminal, vérifiez que vous êtes bien dans votre répertoire et lancez cette commande :

$ middleman server

Middleman va lancer un serveur web à l'adresse http://localhost:4567 et si tout fonctionne on doit voir ceci:

Versionner le projet avec git

Avant d'aller plus loin, on va initialiser le dépôt Github et vérifier que l'on arrive à déployer le site comme on l'attend. Toujours en ligne de commande et dans le dossier de travail :

$ git init

Les pages "finales" du site seront sur la branche master de notre dépôt, on travaillera donc sur une branche source. La commande middleman deploy qu'on utilisera plus tard fera le travail pour nous en poussant les pages "finales" sur master. On crée donc une nouvelle branche :

$ git checkout -b source
$ git add -A
$ git commit -m "Initial commit"

On ajoute ensuite notre dépôt ( utilisez votre nom de compte dans la commande ) et on pousse nos fichiers sur la branche source

$ git remote add origin https://github.com/nowifisummercamp/nowifisummercamp.github.io.git
$ git push --set-upstream origin source

Deployer le site sur Github

On reviendra en fin de tutoriel sur les méthodes de déploiement et la configuration avant la mise en production. Les infos qui suivent pourraient donc être vues plus tard mais je préfère vérifier en amont que tout fonctionne, donc on va déployer notre embryon de site.

Le fichier Gemfile

Le fichier Gemfile contient toutes les gems ruby qui seront utilisées sur le projet. Si vous ne savez pas ce qu'est une gem et venez de WordPress, voyez ça comme un plugin. On ajoutera par la suite d'autres gems dans ce fichier. Pour le moment on va s'intéresser uniquement à l'une d'entre elle. Ouvrez donc le fichier Gemfile dans votre éditeur de texte et ajouter ceci :

gem 'middleman-deploy', '~> 1.0'

On indique donc à Middleman qu'on va utiliser la gem middleman-deploy. Dans le terminal, et toujours dans le répertoire de travail on lance cette commande ( qui sera à lancer après chaque ajout de gems) :

$ bundle install

Notre gem installée, il faut maintenant la configurer. Middleman-deploy offre plusieurs possibilités de déploiement via ftp, sftp, rsync ou git. On doit donc lui indiquer quelle méthode on choisit. On va cette fois ouvrir le fichier config.rb et ajouter ce qui suit avant le bloc configure:

activate :deploy do |deploy|
  deploy.method = :git
  deploy.branch = 'master'
  deploy.build_before = true
end

Déployer le site pour la première fois

Ces quelques lignes indiquent qu'on utilisera git, qu'il faudra déployer sur la branche master de notre dépôt et qu'il faudra faire un build du site avant de déployer. Sauvegardez le fichier, retournez au terminal et exécutez cette commande:

$ middleman deploy

Si aucune erreur n’apparait, vous pouvez vous rendre à l'adresse http://votre-nom.github.io et devriez voir exactement la même chose qu'en local. Le site est donc prêt à être développer.

Avant de continuer on peut faire un petit commit, soit en ligne de commande

$ git commit -am "Add middleman-deploy"

Ajouter plus de gems

Pour mener à bien le projet, nous allons avoir besoin de quelques gems supplémentaires, on les ajoutera au fur et à mesure en fonction des besoins du tutoriel.

Toutes les extensions spécifiques pour Middleman sont répertoriées sur ce site, on peut donc y faire notre marché et prendre qui ce qui nous intéresse. Middleman étant en Ruby, on peut également ajouter des gems Ruby.

De quoi allons nous avoir besoin pour ce site :

• Slim: pour le templating
• Bourbon: pour les CSS
• Neat: pour la grille responsive
• middleman-autoprefixer: pour ajouter les préfixes navigateurs dans la feuille de style
• middleman-minify-html: pour minifier nos fichiers html
• middleman-blog: pour ajouter la fonction blog
• middleman-google-analytics: pour ajouter facilement le site à un compte google analytics
• middleman-sitemap: pour automatiser la création de sitemaps
• middleman-favicon-maker: pour automatiser la création de favicon
• middleman-protect-emails: pour protéger les emails écrits en clair

Pour l'heure, passons à l'étape suivante, l'organisation des données.