Le tutoriel touche à sa fin, il ne reste plus qu'à ajouter deux trois petites choses et configurer le build final avant de déployer le site sur Github Pages. On verra ici comment ajouter très facilement une favicon, un code pour google analytics, une redirection vers un nom de domaine… Et comment optimiser le build en minifiant, compressant nos fichiers sources."

Ajouter une favicon

L'ajout de favicon peut vite nous faire perdre du temps si la création n'est pas automatisée. Une chance pour nous, il y a une gem qui va le faire à notre place, tout ce qu'on à faire c'est de l'installer et de l'activer dans config.rb.

Middleman Favicon Maker nécessite que ImageMagick soit installé, si ce n'est pas le cas faites l’installation sur votre système.

Ensuite ajouter la gem dans votre Gemfile puis bundle install.

gem "middleman-favicon-maker", "~> 3.7"

On ajoute ensuite une seule image de 152 pixels de large (_favicon_template.png) dans le dossier source.

Les autres formats seront générés au moment du build, il faut donc l'indiquer à Middleman dans config.rb dans le bloc configure :build do:

# config.rb
configure :build do
  ...
  activate :favicon_maker do |f|
    f.template_dir  = File.join(root, 'source')
    f.output_dir    = File.join(root, 'build')
    f.icons = {
      "_favicon_template.png" => [
        { icon: "apple-touch-icon-152x152-precomposed.png" },
        { icon: "apple-touch-icon-144x144-precomposed.png" },
        { icon: "apple-touch-icon-120x120-precomposed.png" },
        { icon: "apple-touch-icon-114x114-precomposed.png" },
        { icon: "apple-touch-icon-76x76-precomposed.png" },
        { icon: "apple-touch-icon-72x72-precomposed.png" },
        { icon: "apple-touch-icon-60x60-precomposed.png" },
        { icon: "apple-touch-icon-57x57-precomposed.png" },
        { icon: "apple-touch-icon-precomposed.png", size: "57x57" },
        { icon: "apple-touch-icon.png", size: "57x57" },
        { icon: "favicon-196x196.png" },
        { icon: "favicon-160x160.png" },
        { icon: "favicon-96x96.png" },
        { icon: "favicon-32x32.png" },
        { icon: "favicon-16x16.png" },
        { icon: "favicon.png", size: "16x16" },
        { icon: "favicon.ico", size: "64x64,32x32,24x24,16x16" },
        { icon: "mstile-144x144", format: "png" },
      ]
    }
  end
  ...
end

Les images vont donc être créées automatiquement mais il faut encore les ajouter dans notre layout. Pour cela on va créer un partial _favicon.html.slim dans lequel on va placer tous les liens vers les images:

/ _favicon.html.slim
link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon.png"
link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57-precomposed.png"
link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60-precomposed.png"
link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png"
link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76-precomposed.png"
link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"
link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120-precomposed.png"
link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"
link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152-precomposed.png"

link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196"
link rel="icon" type="image/png" href="/favicon-160x160.png" sizes="160x160"
link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96"
link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32"
link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16"

meta name="msapplication-TileColor" content="#f5f5f5"
meta name="msapplication-TileImage" content="/mstile-144x144.png"

Puis on appelle ce partial dans notre layout, juste après les balises <meta>:

/ layout.slim
= partial 'partials/favicon'

La génération des images ne se faisant qu'au build, on ne voit pas de favicon en local. La vérification se fera une fois le site en ligne.

Ajouter Google Analytics

Si on revient au début du tutoriel, lors de la création des fichiers datas, on se souvient qu'on avait ajouté quelque part notre code de tracking Google Analytics, voyons maintenant comment le rendre actif.

Pour ne pas changer, on va ajouter une gem :

# Gemfile
gem 'middleman-google-analytics'

Puis dans config.rb on ajoute ce bloc, juste avant les helpers:

# config.rb

###
# Google Analytics
###
activate :google_analytics do |ga|
    ga.tracking_id = data.settings.google_analytics.tracking_code
    ga.anonymize_ip = true
    ga.debug = false
    ga.development = false
    ga.minify = true
end

Le code est activé, reste à faire le nécessaire dans Google Webmaster Tools

Protéger les emails

Dans le footer, on a l'adresse email qui est sans aucune protection ce qui risque d'engendrer pas mal de spams. On va donc utiliser la gem middleman-protect-emails pour crypter le lien:

# Gemfile
gem 'middleman-protect-emails'

Puis on l'active dans config.rb:

# config.rb
activate :protect_emails

C'est tout, il n'y a rien à faire de plus!

Automatiser la création de sitemap

Là encore, on installe une gem pour faire le boulot:

# Gemfile
gem 'middleman-sitemap'

Puis on l'active dans config.rb dans le bloc configure :build do, après le bloc favicon:

# config.rb
# Site map
activate :sitemap, hostname: data.settings.site.url

Au build, Middleman va générer un sitemap complet qu'on pourra envoyer au moteurs de recherche.

Ajouter un nom de domaine

Le site est hébergé sur Github Pages et on y accède via http://nowifisummercamp.github.io. Si on veut utiliser son propre nom de domaine c'est très simple, il suffit de créer un fichier CNAME avec l'url du site dans le dossier source/ et de faire le nécessaire du côté du service auquel on a acheté le nom de domaine. Dans le cas d'ovh, vous pouvez suivre cet article du Wagon, tout y est clairement expliqué!

Configurer le build

On se rapproche de plus en plus de la mise en production du site, il ne reste plus qu'à configurer la sortie finale.

Les urls des fichiers

Pour le moment, on accède aux pages via des urls se terminant en nom-du-fichier.html, on peut rendre les urls plus sympas en activant directory_indexes dans config.rb.
Ainsi au lieu d'avoir http://www.nowifisummercamp.fr/camp.html on aura http://www.nowifisummercamp.fr/camp/

# config.rb
# Directory indexes
activate :directory_indexes 

La compression des images

Comme vous pouvez vous en douter, il existe une gem pour automatiser la compression des images au moment du build (middleman-imageoptim). Je ne l'ai pas utilisée ici car je suis assez fidèle aux outils "graphiques" comme ImageOptim, ImageAlpha et JpegMini Le travail effectué est le même, c'est juste que je trouve pratique le drag n drop de tout un dossier pour le compresser.

Minification des fichiers

Nos fichiers sources ne sont pas du tout minifiés et dans le cas du fichier application.css, il contient tous les commentaires ce qui le rend bien plus lourd que nécessaire. Par défaut Middleman minifie déjà les fichiers CSS et Javascript, on va lui ajouter une gem pour les fichiers HTML :

# Gemfile
gem 'middleman-minify-html'

Puis on active le tout dans config.rb dans le bloc build

# config.rb
# Minification
activate :minify_css
activate :minify_javascript
activate :minify_html, remove_input_attributes: false 

Compresser les fichiers

Niveau optimisation ça commence à être pas mal mais ce serait oublier que Middleman peut compresser directement tous les fichiers au format gzip pour en réduire drastiquement le poids et donc diminuer les temps de chargement.

# config.rb
# Gzip compression
 activate :gzip

Deployer le site

Le site est donc maintenant prêt à être déployé, on peut donc passer à la commande finale :

$ middleman deploy

Ca peut prendre un peu de temps, puisque l'ensemble des fichiers doit être envoyé. Une fois terminé, on n'a plus qu'à se rendre sur le site : No Wifi Summercamp.

Le bilan

Voilà, le site est en ligne et fonctionnel. Pour le mettre à jour, il suffit de rédiger un nouvel article et de refaire un middleman deploy.

On a donc vu, au fil de ces quelques pages, qu'il était relativement simple de concevoir un site web statique avec Middleman et que celui-ci offrait quasi nativement un grand nombre d'outils très pratique pour le développement.

On a vu également qu'il était tout à fait possible de se passer de base de données et de tirer partie de Ruby pour aller chercher le contenu dans les fichiers YAML.

Et la suite ?

Et maintenant ? Que faire de plus ? Plein de choses bien sur! Dans le préambule du tutoriel, je disais qu'on m'avait questionné sur la possibilité de simuler quelques plugins connus. On verra dans de prochains articles comment réaliser un slideshow pilotable depuis un fichier YAML ou comment gérer les articles connexes.

On peut aussi reprendre le code et le refactorer, il y a quelques répétitions ici et là, comme l'inclusion des partials header et footer ou les menus qui pourraient être créés de manière plus élégante.

L'hébergement sur Github Pages c'est très bien mais il y a une limite au niveau du cache des fichiers. On peut difficilement jouer avec les durées d'expiration des fichiers mis en cache. C'est dommageable pour les images qui se retrouvent rechargées par le navigateur à chaque visite.

Pour faire simple, dans le cadre du tutoriel, on a mis les images sur Github Pages. On pourrait, pour améliorer les choses, les déplacer vers Amazon Web Services, CloudFlare, Dropbox?.

Pour aller plus loin.

Plus on se penche sur Middleman, plus on voit l'étendue des possibilités qui nous sont offertes. On se rend compte qu'il est utilisable avec nombre de technos qu'on utilise pour du développement "moderne" de sites web.

Puisqu'on parle d'améliorations, on pourrait se pencher sur une solution permettant aux rédacteurs d'articles d'avoir une interface user friendly pour rédiger les articles (Puisque c'est limite inconcevable de leur faire dégainer un éditeur de texte et un terminal). On pourrait alors se tourner vers une solution comme Prose.io pour les laisser ajouter ou modifier des fichiers.

De ce fait, il faudrait ajouter une solution d'intégration continue pour un build automatique du site qui pourrait être pris en charge par CodeShip ou Travis CI.

Puisqu'on en arrive là, il deviendrait judicieux d'ajouter une suite de tests pour s'assurer que rien ne casse. On peut sans soucis ajouter les gems Rspec et Capybara.

Le sujet du tutoriel ne s'y prête pas, mais on peut dynamiser aussi le front-end en utilisant un framework Javascript. Ember.js semble très bien se marier avec Middleman.

Voilà de quoi alimenter pas mal d'articles sur ce blog :)

Article précédent : Tutoriel Middleman, ajouter un peu de CSS
Article suivant : Meetup WordPress, 24 juin 2015

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