Publier avec GitHub Pages

Quand on débute, le meilleur moyen de publier son site gratuitement est d’utiliser GitHub Pages. Il suffit de déposer ses fichiers HTML et CSS pour que le site soit publié en quelques secondes. Simple et efficace !

GitHub Pages est un service inclus à GitHub, la plateforme la plus populaire pour héberger du code informatique. C’est à la fois le Google Drive et le réseau social des développeurs : chacun peut stocker des projets, les partager et collaborer à ceux des autres.

Le cœur de GitHub fonctionne avec Git, un logiciel de gestion de version (version control system). Git stocke un historique des modifications apportées au code, ce qui permet de revenir à des versions antérieures et de collaborer avec d’autres personnes sans jamais perdre son travail. Normalement, Git s’utilise en tapant des commandes dans le terminal, mais il existe aussi des interfaces plus simples pour ceux qui n’ont pas envie d’apprendre les commandes. Pour l’heure, nous utiliserons l’interface web de GitHub pour transmettre les fichiers.

Créer un compte GitHub

Rends-toi sur github.com et crée un compte en cliquant sur Sign up. Utilise un email auquel tu as accès facilement et configure correctement les options de sécurité, car ton compte GitHub contiendra des données sensibles, notamment un accès direct à tes sites web.

Créer un repo

De retour sur l’accueil de GitHub, clique sur le + en haut puis sur New repository.

Un repository (dépôt en français), que l’on raccourcit souvent en repo, est un lieu de stockage pour un projet informatique. Nous allons donc créer le repo du site web.

Laisse les options par défaut, à l’exception du nom du repo qui a son importance : il détermine l’adresse finale de ton site. Partons du principe que ton pseudo GitHub est alice. Deux choix s’offrent à toi :

• Nomme le repo alice.github.io (autrement dit <pseudo>.github.io) et le site sera accessible à l’adresse https://alice.github.io

• Donne un autre nom au repo, par exemple portfolio, et le site sera accessible à l’adresse https://alice.github.io/portfolio

La première méthode est préférable s’il s’agit de ton premier site ou si tu comptes rediriger le site vers un autre nom de domaine.

Par défaut, GitHub propose gratuitement une adresse qui se termine en .github.io. Tu pourras également rediriger le site vers ton propre nom de domaine, en .com ou .fr par exemple, si tu en achètes un chez un revendeur spécialisé. En général, cela coûte une dizaine d’euros par an.

Ajouter des fichiers au repo

Sur la page GitHub de ton repo vide, trouve le bouton Add files ou Upload files, qui te mènera à une page dédiée à l’envoi de fichiers.

Attention, ne dépose pas directement le dossier principal de ton projet, car cela créerait un sous-dossier dans le repo. Sélectionne les fichiers à l’intérieur de ton dossier principal, puis dépose-les, de manière à avoir un index.html à la racine de ton repo.

Pour ajouter ou modifier des fichiers à l’avenir, tu pourras retrouver ce bouton Add files et déposer uniquement les fichiers à modifier.

Activer GitHub Pages

GitHub Pages est le service qui construit ton site et le publie. Depuis la page GitHub de ton repo, rends-toi dans l’onglet Settings puis dans GitHub Pages. Dans la section Source, sélectionne la branche (généralement nommée main) ainsi que le dossier racine, root en anglais (/).

Enregistre les changements et patiente quelques secondes. Si rien ne se passe, actualise la page. Un bandeau devrait te donner l’adresse publique du site. Félicitations ! Tu peux sortir le champagne.

Désormais, à chaque fois que tu mettras à jour le repo sur GitHub, le site sera redéployé automatiquement en quelques secondes.

Pourquoi est-ce gratuit ?

Il existe tant de services payants très connus pour créer son site (Wordpress.com, Squarespace, Webflow, etc.) qu’il est légitime de se demander pourquoi GitHub Pages est gratuit. Est-ce un piège ? Des pubs vont-elles apparaître sur le site ? Va-t-il être hors ligne prochainement ? Pas d’inquiétude, rien de tout cela !

Ton site actuel coûte peu cher à héberger car c’est un site statique, c’est-à-dire qu’il est fait de fichiers HTML, CSS et éventuellement JavaScript, qui sont simplement stockés sur le serveur et envoyés tels quels aux visiteurs.

Sur Internet, ce qui coûte le plus cher est le contenu dynamique, qui demande de maintenir en activité un serveur effectuant des tâches, avec parfois une base de données. Par exemple, la page d’accueil de YouTube est dynamique, car lorsque tu souhaites la visiter, le serveur doit calculer quelles sont les vidéos récentes qui pourraient te plaire, puis construire à la volée une page web qui les contient.

Dans le cas d’un site statique, les pages ne changent jamais et peuvent être mises en cache sur de multiples serveurs à travers le monde. Lorsqu’un visiteur demande une page, le serveur le plus proche géographiquement lui envoie le fichier, ce qui garantit un accès rapide et à bas coût.

Plusieurs plateformes offrent gratuitement l’hébergement de sites statiques. Les concurrents directs de GitHub Pages sont Netlify et Vercel, que tu essaieras peut-être prochainement, car ils facilitent l’utilisation d’un générateur de site. Leur intérêt commercial est d’améliorer leur popularité et d’attirer les jeunes développeurs avec des services gratuits et peu coûteux, afin qu’ils continuent d’utiliser la plateforme lorsque leurs besoins évoluent vers des serveurs payants.