Création d’un site GitHub Pages avec Jekyll

Vous pouvez utiliser Jekyll pour créer un site GitHub Pages dans un dépôt nouveau ou existant.

Qui peut utiliser cette fonctionnalité ?

People with admin permissions for a repository can create a GitHub Pages site with Jekyll.

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 ».

Platform navigation

Dans cet article

Remarque : Les propriétaires de l’organisation peuvent restreindre la publication de sites GitHub Pages des dépôts appartenant à l’organisation. Pour plus d’informations, consultez « Gestion de la publication de sites GitHub Pages pour votre organisation ».

Prérequis

Avant de pouvoir utiliser Jekyll pour créer un site GitHub Pages, vous devez installer Jekyll et Git. Pour plus d’informations, consultez Installation dans la documentation de Jekyll et « Configurer Git ».

Nous vous recommandons d’utiliser Bundler pour installer et exécuter Jekyll. Bundler gère les dépendances de gemme Ruby, réduit les erreurs de build Jekyll et empêche les bogues liés à l’environnement. Pour installer Bundler :

  1. Installer Ruby Pour plus d’informations, consultez « Installation de Ruby » dans la documentation de Ruby.
  2. Installez Bundler. Pour plus d’informations, consultez « Bundler ».

Conseil : Si vous voyez une erreur Ruby lorsque vous essayez d’installer Jekyll à l’aide de Bundler, vous devrez peut-être utiliser un gestionnaire de package, tel que RVM ou Homebrew, pour gérer votre installation Ruby. Pour plus d’informations, consultez « Résolution des problèmes » dans la documentation de Jekyll.

Création d’un dépôt pour votre site

Vous pouvez créer un dépôt ou choisir un dépôt existant pour votre site.

Si vous souhaitez créer un site GitHub Pages pour un dépôt où les fichiers du dépôt ne sont tous pas liés au site, vous pouvez configurer une source de publication pour votre site. Par exemple, vous pouvez avoir une branche et un dossier dédiés pour conserver les fichiers sources de votre site, ou vous pouvez utiliser un workflow GitHub Actions personnalisé pour générer et déployer les fichiers sources de votre site.

Si le compte propriétaire du dépôt utilise GitHub Free ou GitHub Free pour les organisations, le dépôt doit être public.

Si vous souhaitez créer un site dans un dépôt existant, passez à la section « Création de votre site ».

  1. Dans le coin supérieur droit de n’importe quelle page, sélectionnez sur , puis cliquez sur Nouveau référentiel.

    Capture d’écran d’un menu déroulant GitHub montrant les options permettant de créer des éléments. L’élément de menu « Nouveau référentiel » est souligné en orange foncé.

  2. Utilisez le menu déroulant Propriétaire pour sélectionner le compte auquel vous voulez donner la propriété du dépôt.

    Capture d’écran du menu propriétaire d’un nouveau dépôt GitHub. Le menu montre deux options, octocat et github.

  3. Tapez un nom pour votre référentiel et une description facultative. Si vous créez un utilisateur ou un site d’organisation, votre référentiel doit être nommé <user>.github.io ou <organization>.github.io. Si votre nom d’utilisateur ou d’organisation contient des lettres majuscules, vous devez mettre les lettres en minuscules. Pour plus d’informations, consultez « À propos de GitHub Pages ».

    Capture d’écran des paramètres GitHub Pages dans un dépôt. Le champ nom du dépôt contient le texte « octocat.github.io » et est délimité en orange foncé.

  4. Choisissez une visibilité de dépôt. Pour plus d’informations, consultez « À propos des dépôts ».

Création de votre site

Pour pouvoir créer votre site, vous devez avoir un dépôt pour votre site sur GitHub. Si vous ne créez pas votre site dans un dépôt existant, consultez « Création d’un dépôt pour votre site ».

Avertissement : des sites GitHub Pages sont disponibles publiquement sur Internet, même si leur dépôt est privé (si votre plan ou organisation le permet). Si vous avez des données sensibles dans le dépôt de votre site, vous pouvez les supprimer avant publication. Pour plus d’informations, consultez « À propos des dépôts ».

  1. Ouvrez TerminalTerminalGit Bash.

  2. Si vous n’avez pas encore de copie locale de votre dépôt, accédez à l’emplacement où vous souhaitez stocker les fichiers sources de votre site, en remplaçant PARENT-FOLDER par le dossier qui contiendra le dossier pour votre dépôt.

    cd PARENT-FOLDER

  3. Si vous ne l’avez pas déjà fait, initialisez un dépôt Git local, en remplaçant REPOSITORY-NAME par le nom de votre dépôt.

    $ git init REPOSITORY-NAME
> Initialized empty Git repository in /REPOSITORY-NAME/.git/
# Creates a new folder on your computer, initialized as a Git repository

  4. Changez de répertoire dans le dépôt.

    $ cd REPOSITORY-NAME
# Changes the working directory

  5. Déterminez la source de publication que vous souhaitez utiliser. Pour plus d’informations, consultez « Configuration d’une source de publication pour votre site GitHub Pages ».

  6. 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 ». Par exemple, si vous avez choisi de publier votre site à partir du dossier docs de la branche par défaut, créez et changez de répertoire dans le dossier docs.

    $ mkdir docs
# Creates a new folder called docs
$ cd docs

    If you chose to publish your site from the gh-pages branch, create and checkout the gh-pages branch.

    $ git checkout --orphan gh-pages
# Creates a new branch, with no history or contents, called gh-pages, and switches to the gh-pages branch
$ git rm -rf .
# Removes the contents from your default branch from the working directory

  7. Pour créer un site Jekyll, utilisez la commande jekyll new dans le répertoire racine de votre référentiel :

    $ jekyll new --skip-bundle .
# Creates a Jekyll site in the current directory

  8. Ouvrez le Gemfile créé par Jekyll.

  9. Ajoutez « # » au début de la ligne qui commence par gem "jekyll" pour commenter cette ligne.

  10. Ajoutez la gemme github-pages en modifiant la ligne commençant par # gem "github-pages". Remplacez cette ligne par :

    gem "github-pages", "~> GITHUB-PAGES-VERSION", group: :jekyll_plugins

    Remplacez GITHUB-PAGES-VERSION par la dernière version prise en charge de la gemme github-pages. Vous trouverez cette version ici : « Versions de dépendances ».

    La bonne version de Jekyll est installée en tant que dépendance de la gemme github-pages.

  11. Enregistrez et fermez le Gemfile.

  12. À partir de la ligne de commande, exécutez bundle install.

  13. Ouvrez le fichier .gitignore que Jekyll a créé et ignorez le fichier gems lock en ajoutant cette ligne :

    Gemfile.lock

  14. Si vous le souhaitez, apportez toutes les modifications nécessaires au fichier _config.yml. C’est nécessaire pour les chemins relatifs lorsque le dépôt est hébergé dans un sous-répertoire. Pour plus d’informations, consultez « Fractionnement d’un sous-dossier en un nouveau dépôt ».

    domain: my-site.github.io       # if you want to force HTTPS, specify the domain without the http at the start, e.g. example.com
url: https://my-site.github.io  # the base hostname and protocol for your site, e.g. http://example.com
baseurl: /REPOSITORY-NAME/      # place folder name if the site is served in a subfolder

  15. Si vous le souhaitez, testez votre site localement. Pour plus d’informations, consultez « Test de votre site GitHub Pages localement avec Jekyll ».

  16. Ajoutez et commitez votre travail.

    git add .
git commit -m 'Initial GitHub pages site with Jekyll'

  17. Ajoutez votre dépôt dans GitHub.com en tant que dépôt distant, en remplaçant USER par le compte propriétaire du dépôt et REPOSITORY par le nom du dépôt.

    
$ git remote add origin https://github.com/USER/REPOSITORY.git

  18. Envoyez le dépôt à GitHub, en remplaçant BRANCH par le nom de la branche sur laquelle vous travaillez.

    git push -u origin BRANCH

  19. Configurez votre source de publication. Pour plus d’informations, consultez « Configuration d’une source de publication pour votre site GitHub Pages ».

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

  21. Sous le nom de votre dépôt, cliquez sur Paramètres. Si vous ne voyez pas l’onglet « Paramètres », sélectionnez le menu déroulant , puis cliquez sur Paramètres.

    Capture d’écran d’un en-tête de dépôt montrant les onglets. L’onglet « Paramètres » est mis en évidence avec un encadré orange foncé.

  22. Dans la section « Code et automatisation » de la barre latérale, cliquez sur Pages.

  23. Pour voir votre site publié, sous « GitHub Pages », cliquez sur Visiter le site.

    Capture d’écran d’un message de confirmation pour GitHub Pages répertoriant l’URL du site. À droite de l’URL, un bouton intitulé « Visiter le site » est délimité en orange foncé.

    Remarque : La publication des changements de votre site peut prendre jusqu’à 10 minutes après les avoir poussés vers GitHub. Si vous ne voyez pas vos modifications du site GitHub Pages reflétées dans votre navigateur après une heure, consultez « À propos des erreurs de build Jekyll pour les sites GitHub Pages ».

  24. Votre site GitHub Pages est construit et déployé avec un workflow GitHub Actions. Pour plus d’informations, consultez « Affichage de l’historique des exécutions de workflows ».

    Remarque : GitHub Actions est gratuit pour les référentiels publics. Les frais d’utilisation s’appliquent aux référentiels privés et internes qui dépassent l’allocation mensuelle des minutes gratuites. Pour plus d’informations, consultez « Limites d’utilisation, facturation et administration ».

Note

  • Si vous publiez à partir d’une branche et votre site n’a pas été publié automatiquement, assurez-vous qu’une personne avec des autorisations d’administrateur et une adresse e-mail vérifiée a effectué une poussée vers la source de publication.
  • Les commits envoyés par un workflow GitHub Actions qui utilise le GITHUB_TOKEN ne déclenchent pas de build GitHub Pages.

Étapes suivantes

Pour ajouter une nouvelle page ou publier sur votre site, consultez « Ajout d’un thème à votre site GitHub Pages avec Jekyll ».

Vous pouvez ajouter un thème Jekyll à votre site GitHub Pages pour personnaliser son apparence. Pour plus d’informations, consultez « Ajout d’un thème à votre site GitHub Pages avec Jekyll ».