Pourquoi vouloir un site web sur GitHub ?
Parce que c’est simple et gratuit. Avant de commencer, examinons quelques avantages et inconvénients, et voyons si cela convient à vos besoins.
Avantages
Il s’occupe du nom de domaine à votre place, et vous n’avez pas à vous soucier d’être facturé pour le stockage ou un trafic élevé. Tout ce dont vous avez besoin est un compte GitHub gratuit.
Inconvénients
Vous ne pouvez pas héberger un site dynamique sur GitHub Pages, seulement un site statique. Cela signifie que vous ne pouvez pas héberger un serveur qui écoute le trafic entrant, comme avec express.js ou flask ; vous ne pouvez héberger qu’un site statique. Toutefois, il peut s’agir d’un site statique dynamique : vous pouvez toujours y exécuter des scripts, à condition que ces scripts soient préchargés.
Un autre inconvénient est que, si vous utilisez GitHub Pages avec un compte gratuit, votre dépôt GitHub (les fichiers et répertoires de votre site web) sera public. Cela signifie que tout le monde peut voir et consulter vos fichiers. Il vaut donc mieux ne rien inclure de confidentiel dans le dossier de votre site web.
Cela dit, cela reste adapté à l’hébergement d’un site web simple dont vous ne voyez pas d’inconvénient à partager le code. Par exemple, votre CV personnel, un site d’entreprise simple ou un blog simple. Ou si vous voulez simplement tester votre propre application web statique dynamique.
Prérequis
- Un ordinateur connecté à Internet.
- Des connaissances informatiques de base.
- Un compte GitHub gratuit.
Guide étape par étape pour créer une page GitHub gratuite
- Créez un compte GitHub.
Une fois connecté, créez un nouveau dépôt. Veillez à sélectionner « Public ».
Une fois que vous avez créé un dépôt vide, cliquez sur « create new file ».
- Copiez et collez le code d’exemple ci-dessous, et nommez-le index.html pour créer ce fichier.
Cela devrait ressembler à ceci. Cliquez sur commit changes.
Allez dans l’onglet Settings > Pages dans la barre latérale > Branches - sélectionnez main et cliquez sur save.
Revenez maintenant à votre dépôt et attendez quelques minutes.
Actualisez la page, et vous verrez qu’une page GitHub a été publiée avec succès.
Bravo ! Votre page GitHub est maintenant prête via ce lien !
Code d’exemple :
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>My Website</title> <link rel="stylesheet" href="./style.css"> <link rel="icon" href="./favicon.ico" type="image/x-icon"> </head> <body> <main> <h1>Welcome to My Website</h1> </main> <script src="index.js"></script>2 collapsed lines
</body></html>Et ensuite ?
Eh bien, si vous êtes débutant, je vous conseille vraiment de suivre les cours gratuits sur freeCodeCamp.org ; ils couvriront presque tout ce que vous devez savoir sur le développement web pour bien démarrer.
Bien qu’une page GitHub soit facile à configurer, elle comporte certaines limites et pourrait restreindre ce que vous pouvez faire à mesure que vous progressez en développement web. Découvrir différentes technologies de développement comme React, Next, Flask, Express.js, etc. est crucial si vous voulez devenir sérieux dans ce domaine. À cet égard, GitHub Pages ne suffira tout simplement pas. Vous devrez trouver autre chose comme Netlify, Digital Ocean, et finalement un VPS auto-hébergé avec des instances Docker pour héberger vous-même chaque partie d’un site web.
Cloudflare vs GitHub Pages
Bien que GitHub Pages soit facile à configurer et adapté aux débutants, ces jours-ci j’ai tendance à utiliser Cloudflare Pages : non seulement c’est gratuit avec un trafic illimité, mais cela s’occupe aussi de configurer un domaine personnalisé si vous avez acheté le domaine via Cloudflare. En plus de cela, votre dépôt peut aussi être privé. C’est donc en grande partie une meilleure version de GitHub Pages. Vous voudrez peut-être y jeter un œil aussi.
Si le guide n’est pas clair pour vous, vous pouvez suivre le guide officiel de GitHub ici.