Customiser sa configuration Middleman

Middleman arrive avec tout ce qu’il faut pour construire un site web statique. Evidemment on peut toujours en vouloir plus.

Vous avez trois principaux leviers pour customiser cette configuration :

• les fonctionnalités incluses dans Middleman (ex: blog)
• les extensions Middleman, qui sont des gems (ex: middleman-images)
• la mise en place d’un “external pipeline”, notamment pour intégrer du javascript

Voici donc quelques recettes. Ce n’est certainement pas exhaustif.

Les modules Middleman

Livereload

https://github.com/middleman/middleman-livereload

Pour recharger une page dès qu’une modification est sauvegardée. Ainsi pas besoin de relancer middleman à chaque fois. Très pratique dans les phases de développement.

Blog

https://middlemanapp.com/basics/blogging/

Très bien expliqué dans la doc de middleman. C’est simple et efficace. Seule difficulté, si c’en est une, apprendre Markdown.

Syntax

https://github.com/middleman/middleman-syntax

Si vous avez un blog ou des pages avec du code, vous voudrez certainement le mettre en valeur. On a tous en tête les pages Github où votre code est coloré en fonction du langage. Ce plug-in vous permet exactement de faire celà. Il est d’ailleurs actif sur cette page.

HAML

HAML est une alternative à ERB pour le développement des vues ou des templates. Je l’utilise car j’apprécie sa syntaxe très concise ce qui accélère le développement. Il faut par contre faire attention à sa mise en page qui est critique dans le parsing et la transformation en html.

Plus de détail sur https://haml.info/

Pour l’activer, ajouter dans votre fichier config.rb

    # HAML as default template
    set :haml, { :format => :html5 }
    Haml::TempleEngine.disable_option_validator!

Les extensions Middleman

Retrouvez toutes les extensions de la communauté Middleman : https://directory.middlemanapp.com/#/extensions/all

Et ma sélection

images

https://github.com/zweitag/middleman-images

Pour avoir des pages chargées efficacement et rapidement quelque soit le device, les photos (qui pèsent le plus dans le total en général) doivent être optimisées. Cette extension vous permet de :

• resizer les images, pour avoir toujours des dimensions optimales
• ajuster la compression
• gérer les photos dans le pipeline middleman et donc de ne mettre à jour que les images qui ont changées entre deux build

Voire plus vu qu’elle est basée sur ImageMagick

meta-tags

https://github.com/tiste/middleman-meta-tags

Pour améliorer la visbilité de votre site, il faut qu’il soit correctement analysé par les moteurs de recherche pour arriver dans les premiers résultats. Cette extension et la suivante vous y aideront. Avec Middleman MetaTags, vous pourrez définir des Tags par page et pour le site, directement dans la page ou dans un fichier YAML.

robots

https://github.com/yuya-matsushima/middleman-robots

Cette extension facilite la création du fichier robots.txt utilisé par les moteurs de recherche pour crawler votre site.

Mettre en place un “External Pipeline”

Avec tout cela vous pouvez déjà construire des sites statiques sympa mais parfois un peu trop statique. Pour apporter des interactions, l’ajout de javascript est nécessaire. Middleman ne propose plus de pipeline intégré mais des moyens pour intégrer son pipeline préféré dans le process de génération du site. J’avais personnellement au début construit un pipeline sur la base de Webpack, parce que j’étais plus ou moins habitué à celà avec Rails. Mais les évolutions de Rails 7 ouvrent la porte aussi à une remise en cause de ce composant. Après quelques recherches, je me suis orienté vers Vite.js pour sa facilité de mise en oeuvre et sa rapidité à générer les packages. Je vous propose donc de regarder comment l’intégrer à votre configuration Middleman.

Installer Vite pour accéder à un environnement Node.js

Middleman étant construit en Ruby et basé sur Rack, l’installation de Vitejs est aussi simple que d’ajouter un gem à votre Gemfile.

  ./bin/bundle add vite_padrino
  ./bin/bundle add vite_ruby
  ./bin/bundle install
  ./bin/bundle exec install

Et voilà !!! Bon… presque en fait… il faudra tout de même faire quelques petits trucs à côté

Modifier votre config.rb pour qu’il contienne les deux blocs suivants

  # Vite Configuration
  require "vite_ruby"
  require "vite_padrino/tag_helpers"
  helpers VitePadrino::TagHelpers

  configure :development do
    ...
    use ViteRuby::DevServerProxy, ssl_verify_none: true
    ...
  end

Pour faciliter la partie développement, j’aime utiliser un (simple) script et Overmind

  # Procfile
  vite: bin/vite dev
  web: bundle exec middleman serve

Installer vos composants javascript préférés

A partir de là l’installation de vos composants JS préférés est classique, un coup de npm/yarn et mettre à jour application.js

Hotwire

Hotwire est une alternative aux frameworks modernes JS, tels que Angular, Vue, etc, plus légère, hyper rapide et qui profite de vos pages HTML, nous venant de l’équipe qui a construit Basecamp et HEY et par la même occasion à l’origine de Rails.

J’aime l’approche progressive proposée. On construit une page HTML sans interaction, puis on ajoute progressivement des interactions par quelques ajouts dans la page et un peu JS à coté. C’est hyper léger comparé aux autres framework, et donc plus rapide à charger, mais surtout vous pouvez construire des sites semblables à des SPA (Single Page Application) sans la complexité du framework à apprendre.

Tailwind

Ai-je vraiment besoin de présenter Tailwind ?

DaisyUI

daisyUI est une librairie de composants purs CSS basé sur Tailwindcss. C’est simple et joli, surtout si vous aimiez le style Bootstrap.