Logo Jamstatic
Jamstatic
Sites statiques et architectures découplées
Frank Taillandier

Créer un thème pour Jekyll

· Lecture 10 min · Jekyll

Prérequis

Nous allons supposer que vous connaissez déjà Jekyll, que vous savez créer des modèles de pages, si ce n'est pas le cas, commencez par lire la documentation officielle, vous verrez c'est très accessible, c'est du HTML auquel on va ajouter un peu de Liquid, le langage de templating conçu pour les concepteurs de thèmes Shopify, pour accéder à nos données.

Nous ne nous étendrons donc pas sur cette partie, qui consiste à préparer vos différents modèles de pages, ce sont les conventions par défaut de Jekyll qui s'appliquent : les feuilles de styles sont stockées dans le dossier _sass, les modèles de pages dans le dossier _layouts, les composants réutilisables dans _includes. Enfin tous les assets (CSS, JS, images, fonts) sont regroupés dans un dossier assets (et non _assets pour éviter les conflits avec le plugin jekyll-assets).

On notera que pour le moment par défaut, seuls ces dossiers seront fournis par le thème, nous verrons comment y ajouter des contenus et des exemples un peu plus bas.

Les thèmes seront téléchargés sous forme de gem, vous devez donc avoir installé bundler avec la commande gem install bundler, ce qui est généralement le cas puisque Jekyll encourage son utilisation pour la gestion des dépendances. Enfin, il vous faut créer un compte sur Rubygems pour publier votre thème, ça ne vous prendra que quelques secondes si vous avez déjà un compte GitHub.

Préparer son thème

Vous avez donc un site statique sous Jekyll et vous souhaitez le partager avec la communauté sous forme de thème. Il y a deux façons de faire, selon vos préférences. L'une d’elle consiste à utiliser la commande new-theme pour générer une structure de base dans laquelle vous allez pouvoir ajouter vos fichiers : 

bundle exec jekyll new-theme mon-super-theme

Cette commande va créer un dossier dans le répertoire courant, qui portera le même nom que celui que vous avez fourni en argument, étonnant non ?

Ce dossier comprend tous les dossiers évoqués plus haut : _includes, _layouts, _sass et assets ainsi qu'un fichier Gemfile et un fichier mon-super-theme.gempsec qui contient les informations sur votre thème.

Vous pouvez maintenant recopier les fichiers de votre thème dans cette structure d’exemple.

L'autre manière de faire, c'est de partir de votre site fonctionnel et d’adapter sa structure de manière à vous retrouver avec quelque chose qui ressemble à ça : 

├── .gitignore
├── Gemfile
├── LICENSE.md
├── README.md
├── _includes
│   └── head.html
│   └── …
├── _layouts
│   ├── default.html
│   ├── home.html
│   ├── page.html
│   └── post.html
│   └── …
├── _sass
│   ├── _base.scss
│   ├── _variables.scss
│   ├── …
├── assets
│   ├── favicons
│   ├── fonts
│   └── images
│   └── js
│   └── css
├── demo
│   ├── 404.html
│   ├── Gemfile
│   ├── _config.yml
│   ├── _posts
│   │   ├── 2016-10-20-presentation-de-jekyll.md
│   │   ├── 2016-01-02-exemple-de-contenu.md
│   │   └── 2016-01-03-introduction.md
│   │   └── …
├── mon-super-theme.gemspec
└── screenshot.png

Parmi les différences avec un site Jekyll classique, on remarque la présence d’un fichier Gemfile un peu particulier, d’un fichier gemspec pour la spécification de la gem, d’un fichier LICENSE (MIT par défaut), d’un fichier README.md, d’une capture d’écran et d’un dossier demo (ou example, c'est selon).

Si on regarde le contenu du fichier Gemfile d’une gem, il est différent de ceux que vous avez l’habitude d’utiliser. Il fait simplement référence au fichier de spécification de la gem : 

source "https://rubygems.org"
gemspec

En effet, c'est le fichier gemspec qui va contenir toutes les infos sur notre thème : le numéro de version, sa description, ses dépendances, etc. Pour savoir tout ce que peut contenir ce type de fichier, je vous invite à consulter la documentation de référence des spécifications d’une gem.

Lorsque vous utilisez la commande new-theme de Jekyll, par défaut, le fichier de spécification de votre gem ressemble à ça : 

# frozen-string-literal: true

Gem::Specification.new do |spec|
  spec.name          = "mon-super-theme"
  spec.version       = "0.1.0"
  spec.authors       = ["Frank Taillandier"]
  spec.email         = ["frank@jekyllrb.com"]

  spec.summary       = %q{TODO : Une courte description de votre thème, requise par Rubygems.}
  spec.homepage      = "TODO : Indiquez ici l’adresse du site de votre gem ou l’URL publique de son dépôt"
  spec.license       = "MIT"

  spec.files         = `git ls-files -z`.split("\x0").select { |f| f.match(%r{^(assets|_layouts|_includes|_sass|LICENSE|README)}i) }

  spec.add_development_dependency "jekyll", "~> 3.5"
  spec.add_development_dependency "bundler", "~> 1.15"
  spec.add_development_dependency "rake", "~> 12.0"
end

Outre les méta-données à renseigner, il est intéressant de noter qu'une expression régulière basée sur une commande Git liste les fichiers à inclure dans la gem, cela implique donc que vos fichiers soient versionnés avec Git. Le minimum étant d’avoir initialisé votre dépôt, d’avoir ajouté tous les fichiers qui vont bien et d’avoir enregistré le tout : git init && git add . && git commit -m "Initial commit".

On peut voir aussi à la fin du fichier que la version 3.3 ou supérieure de Jekyll est requise, en effet avant cette version, le dossier assets n'était pas géré et le support initial des thèmes n'est arrivé qu'avec la version 3.2.

On constate aussi que bundler est déclaré en tant que dépendance pour le développement, ainsi que rake, souvent utilisé pour ajouter des tests ou des tâches automatisées.

Vous pouvez très bien vouloir ajouter d’autres dépendances lors de l’exécution, si vous souhaitez utiliser des plugins dans votre thème. Dans notre exemple, nous voulons ajouter la gestion d’un flux RSS, la génération d’un sitemap et des méta-données pour le SEO.

Nous ajoutons donc les dépendances ainsi que les versions minimales requises,
comme nous le ferions dans un fichier Gemfile à l’aide de
spec.add_runtime_dependency 
spec.add_runtime_dependency "jekyll-feed", "~> 0.8"
spec.add_runtime_dependency "jekyll-sitemap", "~> 0.12"
spec.add_runtime_dependency "jekyll-seo-tag", "~> 2.0"

Une fois que votre fichier de spécification est complété, vous allez pouvoir tester votre thème.

Tester son thème

Commencez par lancer bundle install pour installer les dépendances mentionnées dans le fichier gemspec.

Fournir des exemples de contenu

Comme nous l’avons dit plus haut, pour le moment les thèmes sont livrés sans contenu et ne contiennent que les modèles et les assets. Lors d’une mise à jour de thème, tous ces fichiers seront écrasés, c'est le principal intérêt d’utiliser une gem pour le designer ou l’utilisateur, mais à aucun moment vous ne souhaitez écraser les contenus existants.

Cependant, même si la gem ne contient pas de contenus, rien ne vous empêche d’en ajouter dans le dépôt de votre thème pour fournir un exemple de thème entièrement fonctionnel à vos utilisateurs.

Afin de ne pas mélanger les fichiers d’exemple avec ceux de votre thème, il est donc conseillé de créer un dossier demo (ou example ou ce que vous voulez) et d’y stocker des contenus destinés à présenter aux utilisateurs le rendu de votre thème.

En plus des fichiers générés par la commande new-theme, nous ajouterons dans ce dossier demo tout ce qu'il faut pour faire tourner un site sous Jekyll : un fichier _config.yml, un fichier Gemfile ainsi que des pages et des posts bien entendu. Vous pouvez également ajouter des exemples de données dans le dossier _data voire des collections, comme vous le feriez dans n'importe quel site.

Le fichier demo/Gemfile ressemble à quelques détails près à celui que vous utiliseriez pour n'importe quel site : 

source "https://rubygems.org"

gem "jekyll", "~> 3.3"
gem "mon-super-theme", path: "../"

group :jekyll_plugins do
  gem "jekyll-sitemap"
  gem "jekyll-seo-tag"
  gem "jekyll-feed"
end

Nous voyons qu'il fait référence à la gem de notre thème, mais comme pour le moment nous n'avons pas encore publié notre thème sous forme de gem, nous nous contentons de faire référence au dossier parent, qui contient les fichiers de notre thème. Cette notation est bien pratique pour tester votre thème en local. Une fois votre gem publiée, vous pourrez choisir de supprimer paramètre path de votre gem, pour que bundler aille télécharger la dernière version sur Rubygems. Nous listons également les plugins utilisés dans notre thème.

Maintenant, pour que Jekyll utilise notre thème, nous allons devoir le lui indiquer dans le fichier demo/_config.yml en ajoutant la ligne : 

theme: mon-super-theme

Là encore, le nom utilisé doit être le même que celui de votre fichier gemspec. Nous indiquons également dans ce fichier de configuration que nous utilisons les plugins suivants : 

gems:
  - jekyll-feed
  - jekyll-sitemap
  - jekyll-seo-tag

Nous pouvons maintenant tester notre thème en exécutant la commande bundle exec jekyll serve --source demo depuis le répertoire racine ou cd demo && bundle exec jekyll serve, c'est du pareil au même. N'oubliez pas d’ajouter le répertoire de destination - _site par défaut - à votre fichier .gitignore.

Vérifiez le rendu sur différents navigateurs et appareils, aidez-vous d’html-proofer si vous souhaitez vous assurer que tous les liens internes fonctionnent : 

bundle exec htmlproofer ./demo/_site --disable-external

Vous êtes satisfait de la première version de votre thème ? Parfait ! Veillez maintenant à bien renseigner le fichier README.md pour expliquer comment installer et utiliser votre thème, c'est toujours agréable d’avoir une bonne documentation à sa disposition.

Afin de permettre aux utilisateurs d’avoir un aperçu de votre thème, il est également recommandé d’ajouter une capture d’écran nommée screenshot.png à la racine de votre dépôt et de l’insérer dans votre fichier README.md.

Packager son thème

Une fois que votre thème est fonctionnel, documenté, vous êtes parés pour la publication. Cette étape est déjà documentée sur le site de Jekyll, nous nous contenterons simplement ici de rappeler qu'elle se fait en deux temps.

La première commande va créer la gem à proprement parlé à partir du fichier de spécification : 

gem build mon-super-theme.gemspec
  Successfully built RubyGem
  Name: mon-super-theme
  Version: 0.0.1
  File: mon-super-theme-0.0.1.gem

Comme il est inutile de versionner la gem générée (mais cela ne vous dispense pas d’utiliser les tags git pour vous rappeler du moment où vous l’avez générée), pensez donc à ajouter la ligne suivante dans votre fichier .gitignore : 

*.gem

Vous pouvez en profiter pour vérifier que l’installation de votre gem se déroule sans encombres : 

gem install mon-super-theme-0.0.1.gem
Successfully installed mon-super-theme-0.0.1
1 gem installed

Si tout est OK, il ne vous reste maintenant plus qu'à publier votre thème sur Rubygems : 

gem push mon-super-theme-0.0.1.gem
Pushing gem to https://rubygems.org…

Et voilà ! Votre thème peut maintenant être utilisé avec Jekyll. Il n'existe pas encore de site officiel qui répertorie tous les thèmes installables via des gems pour Jekyll, c'est donc à vous de communiquer sur la disponibilité de votre thème, par exemple sur le forum de Jekyll, sur Twitter avec le hashtag #jekyllrb ou en commentaire de ce billet 😄.

Si vous cherchez des références, vous pouvez toujours prendre exemple sur des structures de thèmes accessibles sur Github, notamment :

  • Minima, le thème par défaut de Jekyll, idéal pour se familiariser avec la structure que nous venons de voir,
  • Alembic un bon point de départ un plus complet proposé par David Darnes
  • Minimal mistakes, le thème très complet de Michael Rose, qui utilise des collections et tout un tas d’autres fonctionnalités plus avancées de Jekyll.

Voilà, maintenant c'est à vous de jouer, faites de beaux thèmes pour Jekyll !