Je ne peux pas simplement (en tous cas pas sans prendre des risques en matière de sécurité) mettre mes scripts de p5.js sur ce site. Alors quand je suis tombée par hasard sur cette vidéo de Daniel Shiffman expliquant comment créer une page gitHub pour héberger ses sketch p5.js j’ai regardé et j’ai mis en oeuvre immédiatement ! Ce que je décris ci-dessous n’est pas exactement ce qu’il propose car je n’ai pas réussi à faire fonctionner ça hors de la branche master.

Ce que l’on va faire

On aura un dépôt GitHub public où chacun pourra aller lire le contenu des fichiers que j’y aurai mis et une page pour chaque sketch qui en permettra l’exécution.

Les url seront sous la forme :

  • Pour l’accès aux fichiers : https://github.com/aldelpech/p5js-sketch/tree/master/NOM_DU_REPERTOIRE, par exemple https://github.com/aldelpech/p5js-sketch/tree/master/Ajustement_canevas_2020_05_09_13_46_20
  • Pour l’exécution directe : https://aldelpech.github.io/p5js-sketch/NOM_DU_REPERTOIRE, par exemple https://aldelpech.github.io/p5js-sketch/Ajustement_canevas_2020_05_09_13_46_20/
  • Pour l’accès au code raw (sans se connecter à GitHub) : https://raw.githubusercontent.com/aldelpech/p5js-sketch/master/NOM_DU_REPERTOIRE/sketch.js, par exemple https://raw.githubusercontent.com/aldelpech/p5js-sketch/master/Ajustement_canevas_2020_05_09_13_46_20/sketch.js

Créer un compte gitHub

Aller sur https://github.com/ et créer un compte si ce n’est pas encore fait.

Créer un depôt (repository en anglais)

Une fois qu’on est sur son compte, on peut créer un « repository » en cliquant sur le symbole + en haut à droite. Ici je crée le dépôt “p5js-sketch, en mode public, avec un fichier README.

Création d’un dépôt github public pour des sketches p5.js

Une fois que j’ai cliqué sur le bouton vert “Create repository”, je dispose d’un nouveau depôt dont l’url est sous la forme https://github.com/USER/Nom-DEPOT (https://github.com/aldelpech/p5.js-sketches pour moi)

Transférer des fichiers au repository

Je voudrais transférer les fichiers qui m’ont permis de constituer la démonstration pour l’ article p5.js Brique 1 : un canevas “responsive”. Ces fichiers étaient dans un fichier compressé zio tel que téléchargé de l’éditeur de p5.js (https://editor.p5js.org/Anne-Laure/sketches/isSlIPoVn). Je les extrait avec mon ordinateur (windows). Et maintenant j’ai un répertoire contenant les 5 fichiers nécessaires à la démonstration :

Un répertoire de fichiers nécessaire à une animation p5.js

Il me suffit de prendre le répertoire et de le glisser dans mon repository gitHub.

Fichiers en cours de chargement par glisser-déposer

dans commit changes on précise sur quoi porte la modification (en fait le commit se fait vers master et pas maBranche) :

mieux vaut être clair et précis dans le commit

Lorsqu’on cliquer sur “commit changes”, Github traite les fichiers et ça y est, j’ai un répertoire dans mon dépôt

Ce dépôt est accessible à une adresse sous la forme https://github.com/USER/Nom-DEPOT (https://github.com/aldelpech/p5.js-sketches pour moi). Les fichiers sont accessibles à l’adresse https://github.com/aldelpech/p5js-sketch/tree/master/Ajustement_canevas_2020_05_09_13_46_20

Exécuter ce script directement sur github

Dans le dépôt, choisir l’onglet Settings en haut à droite. Descendre jusqu’à la partie GitHub Pages. Rien n’est réglé pour l’instant, il n’y aura pas d’affichage :

Les réglages de GitHub Pages ne sont pas encore faits

Je clique d’abord sur le bouton “Choose a theme”. Je choisis le thème Architect puis je clique sur le bouton vert “Select a theme”. Celà modifie le fichier readme.md. Je le commit :

Commit les modifications du Readme.md

Et maintenant je retourne dans l’onglet Settings et je descends jusqu’à GitHub Pages. Des réglages se sont faits !

Maintenant GitHub Pages est réglé et il a une adresse !

https://aldelpech.github.io/p5js-sketch/ ouvre sur index.md nouvellement créé. Et si j’ajoute le répertoire de fichier à l’adresse, le lien (https://aldelpech.github.io/p5js-sketch/Ajustement_canevas_2020_05_09_13_46_20/ ) ouvre sur la réalisation du sketch !!!

Le sketch se joue directement sur GitHub !

Proposer le téléchargement des fichiers

Si je communique le lien vers un fichier (par exemple ce lien pour le fichier sketch.js), le fichier devient visible dans GitHub si et seulement si on y est connecté.

Pour communiquer un lien accessible à une personne ne disposant pas d’un compte GitHub, il faut prendre le lien “RAW” et communiquer ce lien :

Ainsi ce lien vers la version Raw de sketch.js peut être affiché même sans se connecter à GitHub. On a alors accès à l’ensemble du code.

Pour en savoir plus sur gitHub

  • cours en ligne d’open ClassRoom que j’ai suivi voici quelques années et que j’avais trouvé plutôt bien fait.
  • D’autres vidéos de Daniel Shiffman traitent plus en profondeur de l’utilisation de gitHub.
0 0 voter
Évaluation de l'article
0
Would love your thoughts, please comment.x
()
x