Skip to content

Instantly share code, notes, and snippets.

@Steellgold
Last active February 12, 2025 10:48
Show Gist options
  • Save Steellgold/1ee4398fc73c69d2e42af8df2d865f9f to your computer and use it in GitHub Desktop.
Save Steellgold/1ee4398fc73c69d2e42af8df2d865f9f to your computer and use it in GitHub Desktop.

Comment utiliser GitHub

Alors, partager du code c'est bien, mais le faire correctement c'est encore mieux. [...]

Premiers pas

Une fois que vous aurez créé un compte, vous aurez une interface de ce type :

Home of GitHub after creating an account

Eh bien, c'est votre accueil, un fil d'actualités un peu comme Twitter mais pas avec des posts, plutôt de l'activité par rapport à la communauté (si quelqu'un vous a suivi, mis une étoile "like" sur une de vos répos).

J'ai dit "répo", qu'est-ce que c'est ? Eh bien, c'est dans son nom exact repository (répertoire). C'est là où votre code sera stocké.

Premier répertoire

Pour créer un répertoire et commencer à y mettre des fichiers de code, rien de plus simple : il faudra cliquer sur le petit Plus qui se trouve en haut de votre écran à droite.

Petit plus

Vous y trouverez plusieurs actions possibles :

  • Nouveau répertoire (New repository)
  • Importer un répertoire (Import repository)
  • Nouvel espace de code (New codespace)
  • Nouveau document (New gist)
  • Nouvelle organisation (New organization)
  • Nouveau projet (New project)

Ce qui va nous intéresser en premier, c'est New repository. Cliquez sur cette option et nous reviendrons aux autres plus tard.

Nouveau répertoire

Une fois arrivé sur cette page, plusieurs champs s'afficheront :

  • L'auteur du répertoire : Si c'est sur votre compte ou une organisation dans laquelle vous êtes.
  • Le nom du répertoire : C'est un nom unique qui ne pourra pas être réutilisé (sur le compte/organisation choisie).
  • Une description (optionnelle) : C'est une courte information qui décrit votre répertoire.
  • La visibilité : Publique ou privée. Si vous choisissez privée, alors seulement vous ou les membres que vous aurez autorisés pourront accéder au répertoire. Si Jean essaie d'accéder à votre répertoire qui est en privé, alors une erreur (404) lui sera affichée, ne donnant aucune info sur l'existence ou non du répertoire.
  • Initialiser le projet avec un fichier "Lisez-moi" : Comme son nom d'option l'indique, c'est un fichier au format Markdown qui sera créé Qu'est-ce que le Markdown ?
  • Ajouter un .gitignore : Alors, ceci est un fichier dans lequel vous ajouterez des chemins d'accès, et tous les fichiers ou dossiers que vous y ajouterez. Une fois que vous allez publier du code depuis votre ordinateur, les fichiers (ou fichiers dans les dossiers) ajoutés dans le .gitignore, comme son nom l'indique, seront ignorés et non publiés. Nous y reviendrons plus tard.
  • Choisir une licence : Tout est dit dans le nom, je n'ai rien à y ajouter.

Pour l'instant on va faire un répertoire publique, avec un fichier de départ (readme) sans liscence et sans fichier gitignore

Une fois créee vous vous retrouverez devant une interface comme celle ci

Premier répertoire

Les différents onglets

Dans cette interface nous y trouvons beacoup d'élements, tout d'abord en haut vous y trouverez une navigation horizontale avec comme liens:

  • Code: L'onglet principal de toute repository GitHub. Il affiche le contenu de votre dépôt, y compris les fichiers et les dossiers. Vous pouvez naviguer dans les différents répertoires, visualiser le code source, et accéder à l'historique des commits.

L'onglet Code contient différents éléments:

  • Pin (Épingler): S'affiche si vous êtes un ou le mainteneur du répertoire, si vous l'épingler il sera mis en avant sur votre profile comme exemple: "Regardez mon travail"
  • Unwatch / Watch (Ne plus voir / Voir): Ces options vous permettent de gérer les notifications concernant les activités d'un dépôt. En "watchant" un dépôt, vous recevez des notifications sur toutes les activités. En choisissant "unwatch", vous ne recevez plus ces notifications.
  • Fork (Bifurcation, même si personne n'utilise ce nom même en France): Le "fork" est une fonctionnalité qui permet de créer une copie personnelle d'un dépôt. Cela vous permet de travailler sur le projet indépendamment de l'original. Les modifications peuvent ensuite être proposées à l'original via une pull request.
  • Star (Étoile / Favoris): Le bouton "Star" permet de marquer un dépôt comme favori. C'est une manière d'exprimer votre intérêt ou votre appréciation pour un projet. Les dépôts que vous "starrez" apparaissent dans votre liste de stars sur votre profil GitHub.

  • Issues ("Problèmes"): Cet onglet permet de suivre les problèmes ou les tâches liés au projet. Les utilisateurs peuvent signaler des bugs, suggérer des améliorations, ou poser des questions. Chaque issue peut être commentée et assignée à des membres spécifiques de l'équipe.

  • Pull requests (Demandes de tirage): Les pull requests sont des demandes de fusion de modifications provenant d'une branche dans une autre, généralement de la branche de développement vers la branche principale. Elles permettent de revoir le code, de discuter des changements, et de s'assurer que les modifications sont approuvées avant d'être intégrées.

  • Actions: GitHub Actions permet d'automatiser les workflows de développement directement dans votre dépôt. Vous pouvez configurer des workflows pour compiler le code, exécuter des tests, ou déployer des applications.

  • Projects (Projets): Cet onglet permet de gérer des projets en utilisant des tableaux Kanban. Vous pouvez créer des cartes pour les tâches, les organiser en colonnes, et suivre la progression des différentes parties du projet.

  • Wiki: Le wiki est un espace où vous pouvez documenter votre projet. Il est souvent utilisé pour fournir des guides d'utilisation, des FAQ, ou des informations techniques sur le projet.

  • Security (Sécurité): Cet onglet regroupe les outils de sécurité de GitHub, tels que la détection de vulnérabilités, l'analyse de la composition des dépendances, et les alertes de sécurité.

  • Insights (Analyses): Fournit des analyses et des statistiques sur le dépôt, y compris les contributeurs, les commits, et l'activité du projet.

  • Settings (Paramètres): Cet onglet permet de configurer divers paramètres du dépôt, tels que les collaborateurs, les branches protégées, les webhooks, et les paramètres de sécurité.

Premiers commits

Pour l'exemple de cet article nous allons aller jusqu'à l'étape de déploiement d'un site statique (HTML / CSS) directement depuis GitHub.

Tout d'abord nous allons envoyer des fichiers dans notre répertoire, en envoyant des fichiers cela va automatiquement créer une commit

  • Qu'es ce qu'une commit ? Une commit, c'est un peu comme une photo instantanée de votre projet à un moment précis. Imaginez que vous travaillez sur un projet, et à un certain point, vous voulez sauvegarder l'état actuel de votre code. Eh bien, c'est là que la commit entre en jeu !

Envoi et créations de fichiers

Pour envoyer des fichiers rien de plus simple que des glicés déposées, pour cela nous allons cliquer sur Add file

Add file

Cela nous donne le choix de créer ou d'envoyer des fichiers, pour l'exemple on va envoyer des fichiers pour l'instant. On verra plus tard la création

Envoi de fichiers

Ce qui est bien avec GitHub c'est qu'il permet la possibilitée de faire du glicé déposé en permettant le dépot de dossier, ce qui veut dire que vous pouvez très bien déposé des fichiers comme des dossiers et il s'occupera de faire les chemins pour vous

Upload Files

Maintenant on va créer le commit, par défaut le titre c'est "Add files via upload" dans ce cas, vous pouvez y mettre un titre personnalisée pour mieux vous retrouvez si vous avez besoins de revenir dans 3-4 mois si besoins pour récupérer du code perdu. (Vous pouvez aussi ajouter une description à votre commit)

Ensuite la selection de branches, pour l'instant on va laisser par défaut donc main et on y reviendra plus tard sur ce sujet

Et une fois rempli cliquez simplement sur "commit changes", et le tour est joué vos fichiers sont sur GitHub

Uploaded Files

Création de fichiers

Maintenant on va voir pour créer un fichier, on reclique sur "Add file" puis sur "Create new file"

On va se retrouver avec une interface sur la quel on va avoir un bouton vert pour le commit, un explorateur de fichier sur la gauche et un champ pour écrire le nom du fichier,

New file

Ce champ il peut aussi créer des dossier, juste en écrivant / cela va créer un dossier donc par exemple: /scripts une fois qu'on enverra le commit alors un dossier sera créer, et le dernier élement du champ va être le nom du fichier, dans mon exemple ce serra index.js

Une fois qu'on à fini d'écrire notre fichier on va à nouveau se retrouver en cliquant sur le bouton pour envoyer nos modifications (commit) cette fois un formulaire qui va apparaitre mais avec les mêmes pré-requis: Un titre, une description qui est toujours optionelle ainsi qu'un choix de branches.

Le titre par défaut pour la création de fichier sera toujours "Create [filename].[file_extension]"

New commit file

Et voici notre fichier à l'interieur du dossier que nous avons créer

Files in scripts folder

Supression de fichiers

Pour supprimer un fichier, rien de plus simple qu'un bouton représentant une poubelle, pour cela cliquer sur le fichier que vous voulez supprimer pour avoir son contenu, et jeter un coup d'oeil en haut à droite

Open dropdown

Voici des options qui s'offre à vous, comme par exemple télécharger ce fichier, aller à la ligne, copier des liens d'accès et aussi des options d'accessibilitées / vues.

Et ce qui nous intéresse le plus, un bouton pour supprimer le fichier, cliquez dessus et ENCORE UNE FOIS, on va nous demander de confirmer tout en remplisssaaaaannnt un commit. Vous devriez vous y habituer ;)

Confirm delete and commit

Petite spécificité quand vous supprimez un fichier qui se trouve dans un dossier, si celui-ci une fois supprimé se retrouve vide alors il disparais lui aussi

Modifications de fichiers

Pour la modification de fichier c'est à peu prêt pareil que la suppression sauf que cette fois ce sera dans les icones simples,

Edit icon

Petite spécifité sur la quel nous reviendrons plus tard, en cliquant sur l'icone à coté cela vous proposera d'autres moyens d'éditions.

Une fois cliqué alors cela vous changera l'interface, pour une qui permet l'édition. [...] Une fois que votre fichier sera édité alors le bouton qui permet de commit les changements s'activera.

Update file and commit

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment