GitHub est très bien pour stocker du code dans ses versions successives. J’ai découvert récemment qu’il est aussi très bien pour mettre à disposition le rendu de ce code dans un navigateur, par l’intermédiaire des « pages » GitHub.
Rendons à César…
J’ai fait cette découverte en regardant de près cette publication sur LinkedIn de Lionel Miszka . Il y exposait comment le modèle o3-mini-high de chatGPT lui avait permis de créer un outil pédagogique intéractif sans coder. L’article est très intéressant lorsqu’on s’intéresse à l’IA. Mais il est également intéressant lorsqu’on aime un peu coder et qu’on a envie d’utiliser mieux GitHub. En effet Lionel Miszka a choisi d’héberger son outil pédagogique sur github, ici.
Et pour créer une page j’ai tout simplement demandé à Mistral AI de me dire comment Lionel avait pu faire ça…
Question n°1 : Peux-tu regarder et commenter le dépôt https://github.com/lionelmyszka2/ ?
Question n°2 : Je vois que Lionel Myszka a également des url où ces projets en html sont visibles. Par exemple le projet ‘lentille » est visible sur https://lionelmyszka2.github.io/lentille/. Comment puis-je faire quelque chose de semblable à partir de mon propre compte github ?
Mistral m’a expliqué l’essentiel de ce qui suit !
Si vous n’avez pas de compte GitHub
- Créer un dépôt sur GitHub :
- Connectez-vous à votre compte GitHub.
- Créez un nouveau dépôt (repository) pour votre projet. Vous pouvez le nommer comme vous le souhaitez, par exemple
mon-projet.
- Ajouter vos fichiers HTML :
- Clonez le dépôt sur votre machine locale ou téléchargez-le.
- Ajoutez vos fichiers HTML, CSS, JavaScript, et autres ressources nécessaires à votre projet dans le répertoire du dépôt.
Dans mon cas j’avais déjà un compte GitHub, j’ai simplement créé un « fork » du dépôt de Lionel. Il est visible ici : https://github.com/aldelpech/lentille. J’y ai apporté deux modifications mineures :
- ajout d’un lien en MarkDown dans le README pour aller plus facilement vers la démo
- Ajout du lien vers la démo originelle de Lionel Myszka, pour ne pas le plagier, dans le fichier html.
Comment créer des pages GitHub ?
- Configurer GitHub Pages :
- Allez dans les paramètres (Settings) de votre dépôt sur GitHub.
- Dans la section « Pages » (ou « GitHub Pages »), sélectionnez la branche que vous souhaitez utiliser pour le site (souvent
mainoumaster). - Choisissez le dossier racine (
/) ou un dossier spécifique (comme/docs) où se trouvent vos fichiers HTML. - Cliquez sur « Save » pour enregistrer vos modifications.
Dans le curseur « deploy from a branch » j’ai choisi « main ». Puis cliqué sur le bouton Save qui apparaît alors :
et maintenant si je vais visiter https://aldelpech.github.io/lentille/, le « fork » du projet de Lionel est visible, et interactif.
Est-il possible d’intégrer ces pages ailleurs ?
Mistral me dit que oui, en intégrant le code suivant dans cette page WordPress :
<iframe src= »URL_DE_VOTRE_PAGE_GITHUB » width= »100% » height= »600px » style= »border:none; »></iframe>
Pour ce faire, avec l’éditeur WordPress classique, je choisis un bloc « HTML personnalisé et j’y colle le code ci-dessus :
Qu’est-ce que je peux faire de ça ?
C’est un avantage énorme puisque je peux venir placer ici des démos « vivantes », sans avoir besoin de passer par l’éditeur p5.js. Et l’intégration dans un site wordPress fonctionne. C’est aussi probablement le cas dans une newsletter Substack.
