Il est de plus en plus facile d'héberger des sites Web, de nombreux services proposent des forfaits à partir de moins de 5 euros par mois. Mais si vous souhaitez simplement un site simple qui n'est pas destiné à recevoir une tonne de trafic, vous pouvez peut-être l'héberger gratuitement sur GitHub et cela même avec votre propre domaine !
Qu'est-ce que les pages GitHub ?
GitHub est un service d'hébergement de code qui fournit un contrôle de version via git. Bien qu'il soit généralement utilisé par les développeurs, un cas d'utilisation courant pour eux est l'exécution de simples wikis, CV ou sites de documentation qui ne voient pas des tonnes de trafic quotidien, et ont juste besoin d'un endroit pour mettre en place un site Web gratuitement.
C'est pour cela qu'a été créé GitHub Pages, qui vous permet d'héberger gratuitement des fichiers HTML et d'autres ressources. Cela n'est pas très différent de l'hébergement de fichiers normal de GitHub : vous pouvez héberger des fichiers dans vos dépôts entièrement gratuitement, et héberger un site statique revient à héberger des fichiers.
Vous pouvez avoir des pages pour votre nom d'utilisateur, ou des pages pour chaque dépôt. Par défaut, GitHub vous attribue une URL de sous-domaine comme username.github.io ou username.github.io/repository. Cette URL peut être modifiée en n'importe quelle URL personnalisée.
Que sont les sites web statiques ?
Il est important de noter que les pages GitHub ne sont destinées qu'aux sites Web statiques. Cela ne signifie pas nécessairement que votre site ne peut pas être interactif, mais simplement qu'il est hébergé directement à partir des fichiers HTML, JS et CSS.
La principale restriction des sites Web statiques est qu'ils ne peuvent pas compter sur un serveur pour modifier le contenu à chaque requête, comme c'est le cas avec un langage comme PHP. Par exemple, si vous voulez que les utilisateurs s'inscrivent et consultent un profil, ou si vous voulez héberger WordPress (qui se connecte à un serveur de base de données), vous devrez l'héberger ailleurs.
Cependant, si vous utilisez des frameworks JavaScript côté client comme React, vous pouvez en fait héberger des applications Web entières à partir des pages Github ou de tout autre fournisseur d'hébergement de sites Web statiques. En effet, tout le contenu est généré sur l'appareil du client, et la seule chose que vous servez est un fichier bundle.js contenant tout le code.
Restrictions des pages GitHub - Utilisation non commerciale
Bien sûr, cela s'accompagne de quelques restrictions. Essentiellement, vous n'êtes pas censé utiliser les pages GitHub à des fins principalement commerciales. Plus précisément, il est interdit de l'utiliser en tant que "service d'hébergement Web gratuit pour gérer votre entreprise en ligne, votre site de commerce électronique ou tout autre site Web visant principalement à faciliter les transactions commerciales".
Donc, si vous prévoyez d'exploiter votre entreprise à partir des pages GitHub, vous devrez probablement envisager d'autres solutions. Deux méthodes d'"hébergement gratuit" très similaires consistent à utiliser les buckets AWS Simple Storage Service pour héberger des sites Web statiques, ou à utiliser l'hébergement statique Firebase de Google. Ces deux méthodes fonctionnent bien pour les déploiements de sites statiques amateurs et professionnels, et proposent des niveaux gratuits qui peuvent vous éviter de payer environ 8€ par mois pour héberger votre propre serveur.
Les pages GitHub sont également soumises à des limites de taille et de bande passante, bien qu'elles soient assez raisonnables. Votre site ne peut pas dépasser 1 Go (vous aurez probablement du mal à servir un site de cette taille de toute façon) et si vous dépassez 100 Go de bande passante par mois, GitHub peut ne pas servir votre site. À titre de référence, cette quantité de données vous coûterait environ 8€ par mois sur Amazon Web Services.
Mise en place d'une page
La configuration de GitHub Pages est assez simple. Si vous êtes familier avec GitHub, cela devrait être encore plus facile.
Fondamentalement, vous avez deux options pour les dépôts : les pages utilisateur ou les pages de projet. Si vous utilisez un domaine personnalisé, cela ne devrait pas avoir beaucoup d'importance, mais si vous voulez une belle URL, vous voudrez utiliser une page utilisateur, qui vous donnera une URL au format username.github.io.
Si vous utilisez une page de projet, vous pouvez avoir plusieurs pages configurées, mais chacune sera au format username.github.io/repository.
Dans les deux cas, vous devrez créer un nouveau dépôt. Si vous créez une page utilisateur, définissez-la à votre nom d'utilisateur plus .github.io. Assurez-vous qu'il est également public.
Par exemple :
in-sys.github.io
Ensuite, vous aurez besoin d'un client Git pour vous connecter à GitHub et pousser votre site web. Vous pouvez utiliser un terminal, ou un client GUI comme GitHub Desktop. Utilisez l'URL qui vous a été donnée lors de la configuration rapide :
Ou, si vous utilisez l'application GitHub Desktop, vous pouvez simplement le rechercher par son nom :
Ensuite, vous devrez ajouter votre contenu. Si vous avez un modèle existant que vous souhaitez utiliser, copiez tous les fichiers (HTML, CSS, fichiers JS, images) dans ce répertoire, qui est essentiellement le "webroot" à partir duquel tout sera hébergé. La chose la plus importante est index.html, qui est la page principale de votre site.
Une fois que tout fonctionne localement, vous devez valider les modifications et les publier sur GitHub.
Vous verrez bientôt les nouveaux fichiers dans votre référentiel, mais vous devrez activer les pages GitHub pour qu'elles fonctionnent pleinement. Sur la page du dépôt, cliquez sur "Paramètres" et faites défiler la page jusqu'à "Pages". Sélectionnez la branche principale à partir de laquelle vous allez servir votre site Web, puis cliquez sur "Enregistrer".
La mise à jour peut prendre quelques minutes et ne s'effectuera que 10 fois par heure, alors ne faites pas de changements trop rapides.
Vous devez également activer l'option "Enforce HTTPS" dans les paramètres des pages GitHub.
Ajout d'un domaine personnalisé
L'ajout d'un domaine personnalisé est très simple. Vous devez d'abord en acheter un, ce que vous pouvez faire auprès de nombreux bureaux d'enregistrement différents.
Une fois enregistré, vous devrez faire pointer votre domaine vers votre page GitHub. Cependant, vous ne pouvez pas simplement coller l'URL ici ; vous devrez créer un enregistrement CNAME qui pointe vers username.github.io. Si vous prévoyez d'utiliser www, définissez la valeur Host sur www. Si vous souhaitez utiliser le domaine de base seul, définissez la valeur Host sur @.
Une fois l'enregistrement DNS effectué, il faut ajouter un domaine personnalisé dans la configuration GitHub Pages:
Après avoir attendu quelques minutes pour que les enregistrements DNS se synchronisent sur Internet, vous devriez pouvoir voir votre site Pages GitHub nouvellement créé à votre URL personnalisée, et le menu des paramètres devrait l'afficher comme connecté.
Et donc l'accès à votre site web est opérationnel, vous pouvez voir le résultat de l'exemple ci-dessous :
- Sans domaine personnalisé : in-sys.github.io (dans le cas présent, vous redirigera vers le domaine personnalisé)
- Avec domaine personnalisé : github.insys.fr
