GitHub pour les nuls : Déploie ton site web gratuitement 🚀

Tu as passé des heures à créer ton site web, à peaufiner le code, à choisir les couleurs parfaites et à trouver la typographie idéale. Et maintenant, il est temps de le montrer au monde ! Mais l'idée d'acheter un nom de domaine et de payer un hébergement te semble compliquée, voire hors de prix ? Pas de panique ! Dans cet article, je vais te guider, étape par étape, pour déployer ton site web statique gratuitement en utilisant GitHub. C'est super simple, et tu seras surpris de voir à quel point c'est rapide.

Étape 1 : La Préparation de tes Fichiers 📁

Avant de te lancer dans l'aventure GitHub, il faut que tes fichiers soient prêts. Imagine que tu prépares un gâteau : tu ne vas pas mettre les ingrédients n'importe comment dans le four, n'est-ce pas ? Tes fichiers de site web, c'est la même chose.

Crée un dossier pour ton projet

Tout d'abord, rassemble tous les fichiers de ton site web (HTML, CSS, JavaScript, images, etc.) dans un seul et même dossier. Nomme ce dossier de manière simple et claire, par exemple mon-premier-site-web.

Assure-toi que ton fichier principal s'appelle index.html

C'est l'étape la plus cruciale. Pour que GitHub Pages (le service de déploiement de GitHub) sache quel fichier afficher en premier, ton fichier HTML principal doit impérativement s'appeler index.html. Si le tien a un autre nom (comme home.html ou accueil.html), renomme-le sans attendre. C'est la porte d'entrée de ton site !

Étape 2 : Crée ton compte GitHub et ton premier dépôt 💻

GitHub, c'est un peu comme un réseau social pour les développeurs. Il te permet de stocker ton code, de collaborer et, surtout, de le rendre accessible. C'est là que la magie opère.

Crée ton compte

1. Rends-toi sur le site GitHub.com.

2. Clique sur "Sign up" (S'inscrire) et suis les instructions. C'est comme créer n'importe quel autre compte en ligne. Choisis un nom d'utilisateur mémorable, car c'est lui qui apparaîtra dans l'URL de ton site !

Crée un nouveau dépôt (Repository)

Une fois connecté, tu vas créer un dépôt, ou "repository". Pense à un dépôt comme à une boîte virtuelle où tu vas ranger tous les fichiers de ton projet.

1. Sur ta page d'accueil GitHub, clique sur le bouton "New" (Nouveau) en haut à gauche.

1. Donne un nom à ton dépôt. Pour ce premier projet, tu peux lui donner le même nom que ton dossier local (par exemple, mon-premier-site-web).

1. …

2. Laisse la description vide si tu le souhaites.

3. Assure-toi que le dépôt est "Public". C'est indispensable pour que ton site web soit visible par tout le monde.

4. Clique sur "Create repository" (Créer le dépôt).

Et voilà, ton espace de stockage est prêt !

Étape 3 : Uploade tes Fichiers sur GitHub ⬆️

Maintenant, il est temps de mettre les fichiers de ton site web de ton ordinateur vers ton dépôt GitHub. Il y a plusieurs façons de le faire, mais la plus simple pour les débutants est de le faire directement via l'interface web.

1. Va sur la page de ton nouveau dépôt.

2. Clique sur "Add file" (Ajouter un fichier), puis sur "Upload files" (Télécharger des fichiers).

3. Tu peux maintenant ouvrir le dossier de ton site web, sélectionner tout ce qu’il contient, faire un glisser-déposer des fichiers et dossiers à l’interieur du dossier de ton projet directement dans la fenêtre du navigateur, ou cliquer sur "choose your files" pour les sélectionner manuellement un par un.

4. Attends que tous les fichiers soient téléchargés.

5. En bas de la page, tu verras une section "Commit changes" (Valider les changements). Laisse le message par défaut ou écris quelque chose de simple comme "Ajout des fichiers initiaux".

6. Clique sur le bouton vert "Commit changes".

   

Tes fichiers sont maintenant en ligne sur GitHub ! 🥳

Étape 4 : Déploie ton site avec GitHub Pages ✨

C'est la dernière ligne droite ! C'est ici que tu vas dire à GitHub de transformer ton code en un site web fonctionnel.

1. Sur la page de ton dépôt, clique sur l'onglet "Settings" (Paramètres).

   

2. Dans le menu de gauche, clique sur "Pages".

   

3. Tu verras une section "Branch" (Branche). Clique sur le menu déroulant et sélectionne main (ou master si c'est le nom par défaut de ta branche).

   

4. Laisse le dossier sur /root.

5. Clique sur "Save" (Enregistrer).

GitHub va maintenant se mettre au travail. C'est automatique et ça ne prend que quelques minutes.

Entre temps rafraîchit ton navigateur plusieurs fois et si le déploiement termine, un message vert apparaîtra en haut de la page, te donnant l'URL de ton site ! Elle aura la forme suivante : https://ton-nom-d-utilisateur.github.io/ton-nom-de-depot/.

Félicitations ! Ton site est en ligne et accessible à tout le monde. Tu peux maintenant partager ce lien avec tes amis, ta famille ou tes futurs employeurs.

En résumé

• Prépare tes fichiers dans un dossier et assure-toi que ton fichier principal est index.html.

• Crée un compte et un dépôt public sur GitHub.

• Uploade tes fichiers dans ce dépôt.

• Active GitHub Pages dans les paramètres de ton dépôt en sélectionnant la branche main. et clique sur save et tu patiente jusqu’à ce que le site web soit déployé et que t’ai accès au lien public

Voilà, c'est tout ! Tu as maintenant un site web en ligne, hébergé gratuitement et sans aucune ligne de code supplémentaire. C'est une méthode parfaite pour les projets personnels, les portfolios ou les sites vitrines.

Alors, qu'est-ce que tu vas créer maintenant que tu sais comment déployer un site ? 🤔 Dis-moi tout en commentaire !