Héberger votre site Web sur Github

Github est une société qui héberge des "dépôts de codes", ensemble des codes d'un projet. La plupart d'entre eux sont "open source", ce qui signifie qu'ils sont accessibles publiquement, dans le monde entier. C'est énorme, car ainsi les programmeurs peuvent apprendre les uns des autres et construire à partir des projets des autres ! Khan Academy possède quelques dépôts open source. Les dépôts de code peuvent contenir toutes sortes de codes, pas seulement du HTML et du CSS, tout code nécessaire au fonctionnement du projet.

Pourquoi je vous raconte tout cela ? Eh bien, Github propose une option appelée Github Pages, qui rend simple et gratuite la création d'un site composé de plusieurs fichiers, hébergé sur votrenomdutilisateur.github.io.

Rendez-vous sur github.com. Vous allez voir un formulaire d'inscription sur leur page d'accueil. (Si non, félicitations, vous possédez déjà un compte ! Passez directement à l'étape 2).

Lorsque vous choisirez votre identifiant, gardez à l'esprit qu'il sera public sur Internet et qu'il sera dans l'URL de votre site Web : nomdutilisateur.github.io. Certaines personnes aiment utiliser des surnoms ou des noms marrants, plutôt que leur propre nom, pour des questions de confidentialité. À vous de voir.

En étape 2, optez pour le projet gratuit (free plan). Votre dépôt de site Web sera public et vous n'aurez donc pas à payer pour des dépôts privés. (Vous pourrez toujours faire évoluer votre offre plus tard, une fois devenu un utilisateur prolifique de Github, dans le cas où vous souhaiteriez avoir des dépôts privés)

En étape 3, répondez, ou non, à l'enquête :

Après avoir complété le formulaire de création de compte, veillez à cliquer sur le lien de vérification d'adresse e-mail dans votre boite aux lettres.

Une fois vérifiée votre adresse e-mail, vous allez tomber sur la page de démarrage. Cliquez sur "Start a project".

Sur le projet de création de page, on vous demande un nom de projet. Assurez-vous de nommer exactement votre projet “NOM_D_UTILISATEUR.github.io”. Ça indique à Github que vous créez un projet spécial de page Web. Il saura alors qu'il faut transférer vos fichiers sur cette URL à chaque fois que vous les mettez à jour. Étant donné que mon nom d'utilisatrice est "PamelaFoxBot", j'ai nommé mon projet "PamelaFoxBot.github.io" :

Félicitations, vous avez votre nouveau projet ! Mais il ne contient encore aucun fichier. Pour rapidement créer votre premier fichier, cliquez sur le lien "README" :

Vous êtes maintenant sur l'interface de l'éditeur de fichier Github, pour le fichier nommé README.md. Changez le nom du fichier README.md en index.html. Les serveurs considèrent index.html comme étant le nom du fichier principal d'un répertoire de site Web. Votre index peut alors proposer des liens vers les autres pages de votre site Web.

Supprimez le contenu actuel de l'éditeur de fichier et remplacez-le par le HTML de votre page Web. Vous pouvez copier-coller le HTML à partir d'un projet de Khan Academy ou à partir d'un projet développé sur votre ordinateur.

Faites défiler la page jusqu'à trouver la zone de Commit, et cliquez sur “Commit new file”. À chaque fois qu'on crée une nouvelle version d'un fichier, on fait un "commit" pour l'enregistrer dans l'historique de versions de fichier. Chaque commit est accompagné d'un message décrivant la modification. Github suggère un message par défaut (“Create index.html”, dans ce cas), mais vous pouvez passez outre en tapant votre propre message dans la zone de texte.

Il faut 1 à 10 minutes à Github pour charger les modifications de votre projet sur l'URL de la page Web, donc soyez patient. Il se peut que vous soyez obligé de faire un "rafraîchissement forcé" (en tenant appuyé la touche "majuscule" lors du rechargement), pour effacer la mémoire cache du navigateur.

Certains d'entre vous ont déjà développé un site Web composé de plusieurs fichier, en dehors de Khan Academy, à l'aide d'un éditeur de texte de bureau. Votre site Web contient de nombreux fichiers HTML, CSS, JS et image.

Si vous souhaitez téléverser ce site Web sur Github, inutile de vous inquiéter, il n'est pas nécessaire de copier/coller chacun de ces fichiers un à un. Ça serait fastidieux. Il existe une meilleure option ...

Vous allez tomber sur l'interface de téléversement de Github. Pour sélectionner vos fichiers, glissez-déposez-les ou choisissez-les avec le sélecteur de fichiers.

En général, on souhaite téléverser les fichiers qu'on a modifiés. Si vous n'êtes plus sûr de ceux-ci, téléversez tout. Github utilisera un algorithme pour déterminer ce qui a ou n'a pas été modifié, afin d'enregistrer de nouvelles versions, seulement pour les modifiés.

Rappelez-vous que cela peut prendre jusqu'à 10 minutes. La patience est notre amie. 😊

C'est pourquoi il est plus judicieux de faire vos développements et tests sur votre environnement de bureau local, et de ne téléverser vers Github (ou n'importe quel autre hébergeur) qu'une fois satisfait de la nouvelle apparence de votre site Web.