Un site créé avec l'aide d'une IA tient souvent dans un simple dossier sur votre ordinateur. Ses pages s'affichent très bien quand vous les ouvrez vous-même, mais personne d'autre ne peut les voir. Pour que le site soit visible de tous, ses fichiers doivent être copiés sur un hébergement : un ordinateur relié en permanence à Internet, qui garde les fichiers de votre site et les envoie à chaque personne qui tape l'adresse de votre site.
GitHub Pages fournit cet hébergement gratuitement, mais ses écrans sont en anglais et pensés pour des développeurs. Comment passer de votre dossier à une vraie adresse en ligne, sans rien installer et sans tomber sur une page d'erreur ?
Le chemin le plus simple a été vérifié étape par étape dans la documentation officielle de GitHub. Tout se fait depuis votre navigateur, et les erreurs qui bloquent le plus souvent les débutants sont expliquées avec leur solution.
GitHub Pages met gratuitement en ligne un site fait de fichiers HTML, CSS et JavaScript, à une adresse du type votre-nom.github.io. Vous créez un dépôt public qui porte ce nom, vous y envoyez vos fichiers depuis le navigateur avec un fichier index.html au premier niveau, puis vous activez la publication dans les réglages. Comptez jusqu'à 10 minutes avant que le site apparaisse.
Comment GitHub Pages met votre site en ligne
GitHub est un site sur lequel on range en ligne les fichiers de ses projets. Chaque projet y vit dans un « dépôt » (repository en anglais), c'est-à-dire un dossier en ligne qui garde vos fichiers et l'historique de toutes leurs modifications. Mais qu'est-ce que GitHub Pages alors ? C'est un service de GitHub qui prend les fichiers d'un dépôt et les publie sous forme de site web.
Votre site reçoit alors une adresse construite à partir de votre nom d'utilisateur GitHub, du type https://votre-nom.github.io. Selon la présentation officielle de GitHub Pages, chaque compte a droit à un seul site à cette adresse principale, et les sites suivants prennent la forme votre-nom.github.io/nom-du-depot.
Ce service publie uniquement des sites dits statiques, dont les pages sont des fichiers déjà prêts, identiques pour chaque visiteur. Ces fichiers sont de trois sortes : le HTML décrit le texte et la structure d'une page, le CSS gère sa mise en forme (couleurs, polices, disposition), et le JavaScript ajoute des animations ou des interactions qui se déroulent dans le navigateur du visiteur.
À l'inverse, GitHub Pages ne fait tourner aucun programme de son côté. La page de GitHub sur la création d'un site précise qu'il ne prend pas en charge les langages comme PHP, Ruby ou Python. Un site WordPress, qui fonctionne en PHP, ne peut donc pas y être publié, pas plus qu'un site qui a besoin d'une base de données, c'est-à-dire d'un espace où il enregistre des informations comme des comptes clients ou des commandes.
Pour savoir si votre site convient, ouvrez son dossier et regardez ce qu'il contient. Si vous y voyez un fichier index.html, d'autres fichiers en .html, .css ou .js et vos images, il peut être publié tel quel. Si vous voyez plutôt un fichier package.json et un dossier src, ce sont les fichiers de travail d'un outil de développement, et non le site lui-même. Demandez alors à l'IA qui a créé le site de produire sa version prête à publier : c'est le contenu de ce dossier-là que vous enverrez.
Ce qu'il vous faut avant de commencer
La première chose à préparer est un compte GitHub. L'offre gratuite de GitHub, appelée Free, coûte 0 dollar et inclut GitHub Pages pour les dépôts publics. Choisissez votre nom d'utilisateur avec soin, puisqu'il apparaîtra dans l'adresse de votre site.
Votre dossier doit ensuite contenir une page d'accueil nommée exactement index.html, en minuscules. C'est ce fichier que GitHub affiche quand quelqu'un tape l'adresse de votre site sans préciser de page. Si votre page d'accueil s'appelle accueil.html ou home.html, renommez-la index.html et corrigez les liens de vos autres pages qui pointaient vers l'ancien nom.
Vérifiez enfin la taille de vos fichiers, car l'envoi depuis le navigateur a ses propres règles. La documentation sur l'ajout de fichiers limite chaque fichier à 25 Mo et chaque envoi à 100 fichiers. Un site de quelques pages reste très en dessous, mais une vidéo lourde ou une galerie de centaines de photos peut bloquer l'envoi.
Publier votre site en trois étapes depuis le navigateur
Toute la mise en ligne se fait sur le site de GitHub, en trois étapes : créer le dépôt, y déposer vos fichiers, puis activer la publication. Vous n'avez besoin ni d'installer Git, le logiciel qui envoie des fichiers vers GitHub depuis votre ordinateur, ni de taper la moindre commande.
Créer le dépôt qui portera votre site
Le dépôt doit porter un nom précis, car c'est lui qui détermine l'adresse de votre site. Une fois connecté à GitHub, suivez ces étapes dans l'ordre :
- Cliquez sur le signe + en haut à droite de n'importe quelle page, puis sur New repository.
- Dans le champ Repository name, tapez votre nom d'utilisateur suivi de .github.io, tout en minuscules, par exemple marie-dupont.github.io.
- Choisissez Public comme visibilité.
- Activez l'option Add README, qui ajoute un petit fichier de présentation pour que le dépôt ne soit pas vide.
- Cliquez sur Create repository.
Le nom compte à la lettre près. Si votre nom d'utilisateur contient des majuscules, GitHub demande de les écrire en minuscules dans le nom du dépôt, et un nom qui ne correspond pas exactement à votre compte ne donnera pas l'adresse attendue.
Le choix de la visibilité, lui, n'en est pas vraiment un. Avec l'offre gratuite, le dépôt doit être public pour que GitHub Pages fonctionne, ce qui veut dire que n'importe qui pourra lire tous vos fichiers sur GitHub. Retirez donc de votre dossier tout mot de passe, toute clé d'accès à un service et toute information personnelle avant de l'envoyer.
Envoyer les fichiers de votre site dans le dépôt
Une fois le dépôt créé, vous arrivez sur sa page principale, qui affiche la liste de ses fichiers. Au-dessus de cette liste, ouvrez le menu Add file et choisissez Upload files.
Ouvrez ensuite le dossier de votre site sur votre ordinateur, sélectionnez tout ce qu'il contient, sous-dossiers compris, et faites glisser cette sélection dans la page. Le point décisif est là : vous envoyez le contenu du dossier, pas le dossier lui-même. Si vous faites glisser le dossier entier, votre fichier index.html se retrouve rangé à l'intérieur, et GitHub ne le trouve plus.
GitHub vous demande alors un court message pour décrire cet envoi. Cet enregistrement d'un lot de modifications s'appelle un « commit » ; écrivez par exemple « Première version du site », puis cliquez sur le bouton vert placé sous le message. Revenez ensuite à la page du dépôt : index.html doit apparaître directement dans la liste, à côté de README.md, et non à l'intérieur d'un dossier.
Activer la publication dans les réglages
Vos fichiers sont maintenant sur GitHub, mais ils ne forment pas encore un site. Il reste à indiquer à GitHub Pages où les prendre, comme le décrit la page officielle sur la source de publication :
- Dans votre dépôt, cliquez sur l'onglet Settings, marqué d'une roue dentée.
- Dans la colonne de gauche, cliquez sur Pages.
- Sous Build and deployment, à la rubrique Source, choisissez Deploy from a branch.
- Dans le menu des branches, choisissez main, laissez le dossier sur / (root), puis cliquez sur Save.
Une branche est une version des fichiers de votre dépôt, et main est la version principale, la seule que vous ayez pour l'instant. Le réglage / (root) désigne la racine, c'est-à-dire le premier niveau du dépôt, là où se trouve votre index.html.
La publication n'est pas immédiate. D'après le guide de démarrage de GitHub Pages, il peut falloir jusqu'à 10 minutes pour qu'un changement apparaisse en ligne. Passé ce délai, ouvrez https://votre-nom.github.io dans votre navigateur : l'adresse commence par https, ce qui signifie que la connexion est chiffrée, et vous n'avez rien à régler pour cela, puisque les sites en github.io sont servis en HTTPS automatiquement.
Pourquoi votre site affiche une erreur 404 ou une page sans images
Si le résultat n'est pas celui attendu, la cause se trouve presque toujours dans le rangement ou le nom de vos fichiers. Les deux situations les plus fréquentes ne se règlent pas de la même façon.
Le site affiche une erreur 404
Une erreur 404 signifie que GitHub n'a trouvé aucun fichier à envoyer pour cette adresse. Avant de chercher plus loin, assurez-vous que les 10 minutes de publication sont bien écoulées, car un site tout juste activé peut afficher cette erreur en attendant.
Si l'erreur persiste, regardez d'abord le nom de votre page d'accueil. La page d'aide de GitHub sur les erreurs 404 rappelle que ce nom tient compte des majuscules : Index.html ne fonctionne pas, seul index.html est reconnu.
Vérifiez ensuite l'emplacement de ce fichier, qui doit se trouver au premier niveau du dépôt. Les personnes qui demandent de l'aide sur le forum de GitHub ont très souvent envoyé leur dossier entier, si bien que l'adresse du dépôt affiche un dossier mon-site au lieu de leurs fichiers. Dans ce cas, renvoyez le contenu de ce dossier au premier niveau, puis supprimez l'ancienne copie.
La page s'affiche sans images ou sans mise en forme
Une page qui s'affiche avec son texte mais sans images, ou sans ses couleurs, a trouvé votre index.html mais pas les fichiers qu'il appelle. Le plus souvent, c'est une question de majuscules : GitHub Pages fait la différence entre Photo.JPG et photo.jpg, alors que Windows et macOS ne la font pas. C'est pourquoi beaucoup de personnes constatent qu'un site parfait sur leur ordinateur perd ses images une fois en ligne. Le nom écrit dans votre code doit donc correspondre lettre pour lettre au nom du fichier, extension comprise.
Si au contraire c'est une modification récente qui ne s'affiche pas, votre navigateur montre peut-être une copie qu'il avait gardée en mémoire. Rechargez la page en forçant la mise à jour avec Ctrl+Maj+R sur Windows ou Cmd+Maj+R sur Mac, ou ouvrez-la dans une fenêtre de navigation privée.
Modifier votre site après sa mise en ligne
Une fois le site en ligne, chaque changement suit le même chemin que le premier envoi. Pour remplacer une page ou une image, envoyez avec Upload files un fichier qui porte exactement le même nom : il prend la place de l'ancien, et GitHub republie le site.
Pour corriger simplement une phrase, vous pouvez aussi modifier le fichier directement sur GitHub. Ouvrez-le depuis la liste des fichiers, cliquez sur l'icône en forme de crayon, faites votre correction, puis cliquez sur Commit changes.
Après chaque modification, le délai de publication s'applique de nouveau. Beaucoup de débutants corrigent une faute, rechargent la page dans la seconde et concluent que rien n'a marché, alors qu'il suffisait d'attendre quelques minutes.
Les limites de GitHub Pages à connaître avant de vous y installer
GitHub Pages convient très bien à un portfolio, une page de présentation, un CV en ligne ou le site d'une association. Il a toutefois des règles, fixées par la page officielle des limites de GitHub Pages, qui en écartent certains projets :
- le site publié ne peut pas dépasser 1 Go ;
- la bande passante, c'est-à-dire la quantité de données envoyées à vos visiteurs, a une limite dite souple de 100 Go par mois ;
- le service n'est pas autorisé pour faire tourner une boutique en ligne ou une activité principalement commerciale ;
- le site ne doit pas servir à recevoir des informations sensibles comme des mots de passe ou des numéros de carte bancaire.
Pour un site vitrine de quelques pages, ces plafonds sont rarement un problème. En revanche, si votre projet consiste à vendre en ligne, GitHub Pages n'est pas le bon choix, quelle que soit la taille du site. Ces valeurs peuvent évoluer, et la page des limites citée plus haut donne toujours les chiffres en vigueur.
Utiliser votre propre nom de domaine
L'adresse en github.io suffit pour commencer, mais vous pouvez la remplacer par une adresse à votre nom, comme mon-site.fr. Ce nom de domaine ne s'achète pas chez GitHub : vous le louez auprès d'un registraire, une société qui vend les noms de domaine, puis vous le reliez à votre site.
Cette liaison se fait à deux endroits. Dans la page Pages des réglages de votre dépôt, vous indiquez votre domaine, et chez votre registraire, vous ajoutez des enregistrements DNS, ces lignes de réglage qui indiquent vers quel ordinateur diriger les visiteurs de votre adresse. La page de GitHub sur les domaines personnalisés détaille les valeurs à saisir et recommande de faire vérifier votre domaine par GitHub avant de l'ajouter, pour éviter qu'une autre personne ne s'en serve.
Une fois le domaine relié, cochez l'option Enforce HTTPS dans cette même page Pages. Elle oblige les visiteurs à passer par la connexion chiffrée, comme c'est déjà le cas sur l'adresse en github.io.
Ce qui fait réussir une première mise en ligne
Publier un site avec GitHub Pages ne demande ni logiciel ni connaissance en programmation, seulement un compte et quelques réglages faits une fois pour toutes. Ce qui décide du résultat, c'est la manière dont votre dossier est rangé et nommé avant l'envoi. Un site dont les fichiers sont bien placés et exactement nommés s'affiche du premier coup, et chaque modification suivante devient une simple routine.