Jekyll - Personnalisation

Peaufiner l'apparence du Portfolio avec les thèmes de Jekyll

Notions théoriques

Un thème Jekyll est un ensemble préconfiguré de modèles, de styles et d'éléments de mise en page qui déterminent l'apparence de votre site.

astuce

Choisir le bon thème est crucial car il reflète votre identité numérique. Un thème doit correspondre à votre message et à votre contenu. Jekyll offre une grande variété de thèmes gratuits et payants adaptés à différents types de sites, y compris des portfolios.

Les thèmes Jekyll sont faciles à installer et à personnaliser, ce qui en fait un excellent choix pour ceux qui souhaitent créer un site élégant sans se plonger dans les complexités du développement Web.

Lorsque vous sélectionnez un thème, pensez à la simplicité, à la lisibilité et à la réactivité (adaptabilité aux appareils mobiles).

Exemple de sélection et de personnalisation d'un thème

Imaginons que vous ayez choisi le thème architect pour votre portfolio.

Voici les étapes pour l'appliquer à votre site Jekyll :

1. Visitez la page du thème architect et familiarisez-vous avec son apparence et ses fonctionnalités.
2. Ouvrez le fichier _config.yml de votre projet Jekyll.
3. Modifiez la ligne theme: pour y mettre architect.
4. Relancez votre serveur Jekyll pour voir les changements.

Pour personnaliser le thème, vous pouvez modifier les fichiers de style ou surcharger les fichiers de mise en page par défaut en les copiant dans votre répertoire _layouts avec les modifications souhaitées.

Test de mémorisation/compréhension

Qu'est-ce qu'un thème Jekyll ?

Un plugin qui ajoute des fonctionnalités au site

Un ensemble de fichiers de configuration pour le SEO

Un ensemble de modèles et de styles définissant l'apparence d'un site

Quel fichier faut-il modifier pour changer le thème d'un site Jekyll ?

_config.yml

index.md

_layouts/default.html

Pourquoi est-il important de choisir un thème réactif ?

Pour que le site charge plus rapidement

Pour qu'il soit bien affiché sur les appareils mobiles

Pour augmenter la sécurité du site

Où pouvez-vous trouver des thèmes pour Jekyll ?

Sur le site officiel de Jekyll uniquement

Dans un répertoire de thèmes sur GitHub

Dans les deux endroits mentionnés

Que devez-vous faire après avoir modifié le thème dans le fichier `_config.yml` ?

Rien, les changements sont automatiques

Redémarrer le serveur Jekyll

Recompiler tout le site manuellement

---

TP pour réfléchir et résoudre des problèmes

Objectif du TP : Personnaliser le thème architect pour l'adapter à votre portfolio.

1. Clonez ou téléchargez votre dépôt GitHub contenant votre site Jekyll.
2. Ouvrez le fichier _config.yml et changez le thème pour architect.
3. Personnalisez le thème en modifiant les couleurs et les polices dans les fichiers de style. Vous pouvez trouver ces fichiers dans le répertoire _sass ou assets/css.
4. Ajoutez votre propre contenu dans les fichiers markdown de votre site. Assurez-vous que le contenu s'affiche correctement avec le nouveau thème.
5. Après avoir effectué vos changements, poussez les modifications sur votre dépôt GitHub et vérifiez que votre site GitHub Pages se met à jour avec le nouveau thème.

Une solution

Vous devez être connecté pour voir le contenu.

Email : Mot de passe :

Pour aller plus loin

• Consulter les thèmes disponibles : https://pages.github.com/themes/

• Pour tester par exemple le thème architect : architect

• Pour installer le thème choisi, il suffit de :

  1. Ajouter le ligne suivante à la fin du fichier Gemfile (à la racine de votre projet Jekyll) :

  gem "jekyll-theme-architect"
  2. Exécuter la commande bundle install pour installer les dépendances spécifiées dans votre Gemfile :

  gbundle install
  3. Modifier l'entrée `` du fichier _config.yml :

  # Build settings
  theme: jekyll-theme-architect
  
  
  4. Exécuter la commande `bundle exec jekyll serve` pour démarrer le serveur Web : 
  ```sh
  bundle exec jekyll serve

• Pour modifier le thème choisi : https://jekyllrb.com/docs/themes/#overriding-theme-defaults