Ajout d’un thème à votre site GitHub Pages avec Jekyll

Vous pouvez personnaliser votre site Jekyll en ajoutant et en personnalisant un thème.

Qui peut utiliser cette fonctionnalité ?

GitHub Pages est disponible dans les référentiels publics avec GitHub Free et GitHub Free pour les organisations, et dans les référentiels publics et privés avec GitHub Pro, GitHub Team, GitHub Enterprise Cloud et GitHub Enterprise Server. Pour plus d’informations, consultez « Plans de GitHub ».

GitHub Pages utilise désormais GitHub Actions pour exécuter la version de Jekyll. Lorsque vous utilisez une branche comme source de votre version, GitHub Actions doit être activé dans votre référentiel si vous souhaitez utiliser le flux de travail Jekyll prédéfini. Comme alternative, si GitHub Actions n’est pas disponible ou désactivé, l’ajout d’un fichier .nojekyll à la racine de votre branche source contournera le processus de version de Jekyll et déploiera le contenu directement. Pour plus d'informations sur l'activation des GitHub Actions, consultez « Gestion des paramètres de GitHub Actions pour un dépôt ».

Dans cet article

Les personnes disposant d’autorisations en écriture sur un dépôt peuvent ajouter un thème à un site GitHub Pages avec Jekyll.

Si vous publiez à partir d’une branche, les changements de votre site sont publiés automatiquement quand ils sont fusionnés dans la source de publication de votre site. Si vous publiez à partir d’un workflow GitHub Actions personnalisé, les changements sont publiés quand votre workflow est déclenché (généralement via une poussée vers la branche par défaut). Si vous voulez d’abord afficher un aperçu de vos changements, vous pouvez faire les changements localement au lieu de les faire sur GitHub. Ensuite, testez votre site localement. Pour plus d’informations, consultez « Test de votre site GitHub Pages localement avec Jekyll ».

Ajout d’un thème

  1. Dans GitHub, accédez au dépôt de votre site.
  2. Accédez à la source de publication pour votre site. Pour plus d’informations, consultez « Configuration d’une source de publication pour votre site GitHub Pages ».
  3. Accédez à _config.yml.
  4. En haut à droite de la vue de fichier, cliquez sur pour ouvrir l’éditeur de fichier.

Capture d’écran d’un fichier. Dans l’en-tête, un bouton avec une icône de crayon est indiqué en orange foncé.

Remarque : au lieu de modifier et de valider le fichier en utilisant l’éditeur de fichier par défaut, vous pouvez aussi utiliser l’éditeur de code github.dev en sélectionnant le menu déroulant et en cliquant sur github.dev. Vous pouvez également cloner le référentiel et modifier le fichier localement via GitHub Desktop en cliquant sur GitHub Desktop .

Capture d’écran d’un fichier. Dans l’en-tête, une icône de triangle orientée vers le bas est indiquée en orange foncé.

1. Ajoutez une nouvelle ligne au fichier pour le nom du thème. * Pour utiliser un thème pris en charge, tapez `theme: THEME-NAME`, en remplaçant _THEME-NAME_ par le nom du thème tel qu’il apparaît dans le `_config.yml` du référentiel thème (la plupart des thèmes suivent une convention d’affectation de noms `jekyll-theme-NAME`). Pour obtenir la liste des thèmes pris en charge, consultez « [Thèmes pris en charge](https://pages.github.com/themes/) » sur le site GitHub Pages. Par exemple, pour sélectionner le thème Minimal, tapez `theme: jekyll-theme-minimal`. * Pour utiliser n’importe quel autre thème Jekyll hébergé sur GitHub, tapez `remote_theme: THEME-NAME`, en remplaçant THEME-NAME par le nom du thème tel qu’il apparaît dans le README du dépôt du thème.

  1. Cliquez sur Valider les modifications...

  2. Dans le champ de message de validation, tapez un message de validation court et descriptif qui indique la modification que vous avez apportée au fichier. Vous pouvez attribuer la validation à plusieurs auteurs dans le message de validation. Pour plus d’informations, consultez « Création d’une validation avec plusieurs auteurs ».

  3. Si vous avez plusieurs adresses e-mail associées à votre compte sur GitHub, cliquez sur le menu déroulant d’adresses e-mail et sélectionnez l’adresse e-mail à utiliser comme adresse e-mail de l’auteur Git. Seules les adresses e-mail vérifiées apparaissent dans ce menu déroulant. Si vous avez activé la confidentialité de l’adresse e-mail, le mode sans réponse sera utilisé par défaut pour l’adresse e-mail de l’auteur de commit. Pour plus d’informations sur la forme exacte que l’adresse e-mail sans réponse peut prendre, consultez « Définition de votre adresse e-mail de commit ».

    Capture d’écran d’une demande de tirage GitHub montrant un menu déroulant avec des options permettant de choisir l’adresse e-mail de l’auteur du commit. octocat@github.com est sélectionné.

  4. Sous les champs de message de commit, choisissez si vous souhaitez ajouter votre commit à la branche actuelle ou à une nouvelle branche. Si votre branche actuelle est la branche par défaut, vous devez choisir de créer une branche pour votre validation, puis de créer une demande de tirage (pull request). Pour plus d’informations, consultez « Création d’une demande de tirage ».

    Capture d’écran d’une demande de tirage GitHub montrant une case d’option permettant de commiter directement dans la branche main ou de créer une branche. Une nouvelle branche est sélectionnée.

  5. Cliquez sur Valider les modifications ou Proposer des modifications.

Personnalisation du CSS de votre thème

Ces instructions fonctionnent mieux avec les thèmes officiellement pris en charge par GitHub Pages. Pour obtenir la liste complète des thèmes pris en charge, consultez « Thèmes pris en charge » sur le site GitHub Pages.

Le référentiel source de votre thème peut offrir de l’aide pour personnaliser votre thème. Par exemple, consultez le README de Minimal.

  1. Dans GitHub, accédez au dépôt de votre site.

  2. Accédez à la source de publication pour votre site. Pour plus d’informations, consultez « Configuration d’une source de publication pour votre site GitHub Pages ».

  3. Créez un fichier appelé /assets/css/style.scss.

  4. Ajoutez le contenu suivant au début du fichier :

    ---
---

@import "{{ site.theme }}";

  5. Ajoutez n’importe quel CSS ou Sass personnalisé (y compris les importations) de votre choix juste en dessous de la ligne @import.

Personnalisation de la disposition HTML de votre thème

Ces instructions fonctionnent mieux avec les thèmes officiellement pris en charge par GitHub Pages. Pour obtenir la liste complète des thèmes pris en charge, consultez « Thèmes pris en charge » sur le site GitHub Pages.

Le référentiel source de votre thème peut offrir de l’aide pour personnaliser votre thème. Par exemple, consultez le README de Minimal.

  1. Sur GitHub, accédez au dépôt source de votre thème. Par exemple, le référentiel source pour Minimal est https://github.com/pages-themes/minimal.
  2. Dans le dossier _layouts, accédez au fichier default.html de votre thème.
  3. Copiez le contenu du fichier.
  4. Dans GitHub, accédez au dépôt de votre site.
  5. Accédez à la source de publication pour votre site. Pour plus d’informations, consultez « Configuration d’une source de publication pour votre site GitHub Pages ».
  6. Créez un fichier appelé _layouts/default.html.
  7. Collez le contenu de disposition par défaut que vous avez copié précédemment.
  8. Personnalisez la disposition comme vous le souhaitez.

Pour aller plus loin