Git pour le développement web : Apprenez à connaître le flux de travail typique d’un projet

Le développement web est intrinsèquement lié à la collaboration. La plupart du temps, vous travaillerez avec d’autres développeurs, et même si ce n’est pas le cas, Git peut vous aider de nombreuses autres façons.

Git est le logiciel qui contrôle la version des applications que nous créons. Il est utilisé par les développeurs solos, les grandes entreprises et même Linux, le plus grand projet open source au monde.

En tant que développeur web, il est extrêmement important de savoir comment utiliser correctement Git pour le développement web. Nous ne parlons pas seulement de « git add », « git commit » et « git push ». Vous devez connaître le flux de travail complet de la création d’un projet web avec Git.

Pas encore convaincu ? Commençons !

Pourquoi utiliser Git ?

Ce ne sont là que quelques-unes des raisons de commencer à utiliser Git :

• Organisation : Au lieu de gérer votre projet dans des dossiers tels que v1, v2, v3, etc., vous avez un seul projet avec une base de données spéciale qui stocke toutes les versions des fichiers
• Collaboration : Git vous permet, ainsi qu’à d’autres personnes, de travailler sur le même projet en même temps sans créer de conflits.
• Open source : Git est open-source, mais c’est aussi l’outil que nous utilisons pour collaborer et créer d’excellents logiciels open source. Tout le monde peut faire des « pull request » pour les projets open source sur des plateformes comme GitHub ou Bitbucket.
• Flexibilité de la plateforme : De nos jours, vous avez le choix entre de nombreux services d’hébergement Git, tels que Gitlab, GitHub, Bitbucket et SourceForge. Vous pouvez même utiliser une solution auto-hébergée pour tous vos projets.
• Sauvegardes faciles : Annulez vos erreurs en toute simplicité, et ne perdez jamais la base de code de votre projet.

Nous avons mentionné le terme GitHub une ou deux fois maintenant, alors quelle est la différence entre Git et GitHub ?

Cette question peut vous dérouter si vous êtes totalement novice en matière de Git. Pour le dire en termes simples, Git et GitHub sont des outils apparentés mais différents.

Git est le système de contrôle de version (Version Control System ou VCS) que nous utilisons pour garder le contrôle des modifications de nos fichiers, tandis que GitHub est un service que nous utilisons pour stocker les fichiers de notre projet et leur historique Git en ligne (situé dans le dossier .git/ de votre projet).

Git est installé localement, sur votre machine, et sans services d’hébergement comme GitHub ou GitLab, il serait très difficile de collaborer avec d’autres développeurs.

GitHub surcharge Git en ajoutant d’autres fonctionnalités qui améliorent la collaboration, comme le clonage, le fork et la fusion. Ensemble, ces deux outils se combinent pour vous apporter un écosystème relativement convivial pour développer, gérer et montrer votre projet à d’autres personnes.

Flux de travail basique de Git pour le développement web

Dans les sections suivantes, vous en apprendrez davantage sur le flux de travail Git pour le développement web par le biais de la pratique.

Prérequis d’installation

Si vous n’avez pas encore installé Git, c’est le moment idéal. Il est facile à installer et disponible sur la plupart des systèmes d’exploitation.

Téléchargez-le depuis la page de téléchargement officielle, ou installez-le avec un gestionnaire de paquets si vous utilisez Linux ou macOS :

Pour vérifier que tout s’est bien passé lors de l’installation, lancez un terminal sous Linux ou macOS en recherchant « Terminal » dans votre menu d’applications, ou en ouvrant Git bash sous Windows (qui est installé avec Git par défaut).

Puis saisissez :

git --version

Si vous obtenez une version Git en guise de réponse, vous êtes prêt.

Nous aurons également besoin d’un compte GitHub, alors assurez-vous de vous inscrire ou de vous connecter à GitHub :

Une fois que vous avez installé Git et que vous vous êtes connecté à votre compte GitHub, vous pouvez passer à la section suivante.

Flux de travail Git basique pour les projets collaboratifs

Comme mentionné précédemment, la plupart du temps, vous ne développerez pas de projets en solo. La collaboration est une compétence clé, et Git et GitHub nous aident à en faire un processus simple mais efficace.

Le flux de travail typique d’un projet Git ressemble à ceci :

1. Obtenez une copie locale du projet en clonant un dépôt, ou repo. Si vous collaborez, vous devez d’abord « forker » le repo.
2. Créez une branche avec un nom représentatif de la fonctionnalité sur laquelle vous allez travailler.
3. Modifiez le projet.
4. Validez les modifications sur votre machine locale.
5. Poussez les modifications vers le repo distant.
6. Créez une pull request vers le repo d’origine.
7. Fusionnez et résolvez les conflits dans la branche principale du repo d’origine.

Tutoriel

Il est maintenant temps de se salir les mains !

Dans ce guide, vous allez créer un site HTML simple. Pour des raisons pratiques, vous allez forker le projet de base du dépôt du site HTML vers votre compte GitHub. Ceci peut être fait pour tous les dépôts publics disponibles.

Pour forker le site HTML, allez sur ce dépôt GitHub et cliquez sur le bouton Fork situé en haut à droite de la page :

Vous avez maintenant un fork du repo original qui n’est disponible que sur votre compte GitHub. C’est exactement le même repo – jusqu’à ce que vous commenciez à apporter des modifications.

Comme vous pouvez le constater, le fork d’un repo public ne prend que quelques secondes. C’est idéal pour les projets open source, mais n’oubliez pas que si votre organisation possède un repo privé, vous devrez être inclus en tant que contributeur avant d’essayer de le forker.

Il est temps d’amener votre fork sur votre machine locale. Pour cela, vous devez le cloner avec la commande git clone, qui récupère le dépôt Git sur le serveur distant :

git clone remote_url

Vous devez remplacer remote_url par l’URL de votre fork. Pour obtenir l’URL exacte d’un repo GitHub, allez sur sa page et cliquez sur Code. Choisissez ensuite SSH, et copiez le lien qu’il vous donne :

La commande que vous exécuteriez pour cloner le repo forké est la suivante :

git clone [email protected]:yourusername/HTML-site.git

Lorsque vous clonez un repo, vous obtenez un dossier portant son nom. Ce dossier contient le code source du projet (dans ce cas, le site HTML) et le dépôt Git, qui se trouve dans un dossier nommé .git.

Vous pouvez voir la liste des fichiers à l’intérieur du nouveau répertoire en ouvrant le nouveau dossier dans un gestionnaire de fichiers graphique, ou en les listant directement depuis le terminal avec les commandes ls ou dir:

# Linux/macOS
ls HTML-site/
# Windows
dir HTML-site
.git images .gitignore index.html LICENSE README.md styles.css

Ce site HTML est très simple. Il utilise Bootstrap à des fins pratiques et quelques images provenant d’Unsplash, où vous pouvez télécharger des images gratuites pour votre site.

Si vous ouvrez le fichier index.html dans votre navigateur, vous verrez une page simple avec quelques images :

Il est temps de jouer avec ce projet. Il semble très vide, et peut-être qu’un en-tête avec le nom du site pourrait améliorer l’expérience utilisateur.

Pour ce faire, entrez dans le répertoire HTML-site et créez une branche nommée header. Dans cette nouvelle branche, nous pouvons modifier tous les fichiers et implémenter autant de code que nous le souhaitons car cela n’affectera pas la branche principale (originale).

Exécutez la commande suivante :

git checkout -b header

Ceci créera une branche nommée « header » et vous y basculera juste après. C’est équivalent à :

git branch header
git checkout header

Pour confirmer que tout s’est bien passé, exécutez :

git status
# On branch header
# nothing to commit, working tree clean

Vous verrez que vous avez été déplacé de la branche « main » vers la branche « header », mais l’arbre de travail est toujours propre puisque nous n’avons modifié aucun fichier.

Dans votre éditeur de code préféré, ouvrez le fichier index.html de votre projet branché. Ce fichier comprend quelques liens vers Bootstrap 5, afin que nous puissions profiter des composants prêts à l’emploi du framework.

Ajoutez le code suivant au fichier index.html à l’intérieur de la balise <body> et au-dessus du conteneur d’image :

<header>
  <nav class="navbar navbar-light bg-light">
    <div class="container-fluid">
      <span class="navbar-brand mb-0 h1">HTML site</span>
    </div>
  </nav>
</header>

Beaucoup plus esthétique ! N’hésitez pas à faire d’autres branches et changements que vous souhaitez.

Une fois que vous avez fini de modifier le projet, il est temps de transmettre tous les changements à votre repo local. Dans le répertoire du projet, saisissez ce qui suit dans votre terminal :

git add --all
git commit -m "Added simple header in index.html file"

Lorsque vous commencez un projet, il est courant d’avoir des messages de commit descriptifs, mais avec le temps et un changement d’orientation, la qualité des messages a tendance à baisser. Veillez à respecter les bonnes pratiques de nommage.

Maintenant que vous avez effectué un commit dans votre dépôt local (qui n’est toujours disponible que sur votre ordinateur), il est temps de le pousser vers le dépôt distant.

Si vous essayez de pousser le commit normalement, cela ne fonctionnera pas car vous travaillez actuellement sur la branche header. Vous devez définir la branche en amont pour header:

git push --set-upstream origin header

À partir du 13 août 2021, GitHub requiert l’utilisation de l’authentification SSH, assurez-vous donc que vos clés sont correctement configurées.

Après cela, vous devriez être en mesure de voir une nouvelle branche nommée header dans votre dépôt forké (par exemple https://github.com/yourusername/HTML-site/branches) :

Pour créer une pull request vers le repo d’origine, cliquez sur Comparer, en bas dans la section Branches actives.

Cela vous guidera vers une pull request, où vous devrez choisir avec quelle branche (l’originale ou votre fork) vous souhaitez fusionner. Par défaut, l’option de fusion avec le dépôt de base est affichée :

Une fois que vous aurez cliqué sur l’option de pull request, vous devrez rédiger une courte description des modifications apportées, tout comme pour vos commits précédents. Une fois de plus, essayez d’être concis mais descriptif :

Cliquez sur le bouton Créer une pull request et attendez que le propriétaire du dépôt de base accepte ou vous donne son avis sur vos modifications.

Félicitations – vous venez d’accomplir toutes les étapes d’un flux de travail Git commun pour le développement web !

Il s’agissait d’un exemple vraiment basique, mais la logique s’étend à des projets de toutes tailles. Veillez également à mettre en œuvre ce flux de travail de manière rigoureuse dans les projets de collaboration plus importants .

Comment utiliser Git chez Kinsta

Git est fondamental pour le déploiement sur la plateforme d’hébergement d’applications de Kinsta. Les utilisateurs du service connectent leurs comptes à GitHub, Bitbucket ou GitLab, et gèrent les déploiements à travers leurs tableaux de bord MyKinsta :

Si vous êtes un client de l’hébergement WordPress infogéré de Kinsta, vous pouvez incorporer Git dans un flux de travail de déploiement en vous connectant à votre serveur en utilisant SSH à partir d’un terminal et en tirant à partir d’un dépot sur n’importe quel fournisseur d’hébergement Git.

Nous avons documenté l’utilisation de Git chez Kinsta pour les clients WordPress. Après avoir suivi ces instructions pour préparer une connexion SSH à un serveur WordPress, vous pouvez extraire un dépôt Git avec une commande comme celle-ci :

ssh [email protected] -p PORT "cd /www/my_site/public && git pull https://github.com/user/repo.git"

L’utilisation de Git et de Kinsta peut être une combinaison puissante.

Résumé

De nos jours, Git est un outil à apprendre absolument pour le développement web, puisque la plupart du temps, vous serez amené à collaborer avec d’autres personnes pour créer le meilleur projet possible.

Dans cet article, nous avons abordé quelques raisons importantes d’utiliser Git dans vos projets, et nous vous avons montré le flux de travail de base de la collaboration dans un repo Git.

Et Git est un outil puissant qui est essentiel à la plateforme d’hébergement d’applications de Kinsta et souvent utile pour les clients du service d’hébergement WordPress infogéré de Kinsta.

Cela vaut la peine d’apprendre Git et de l’intégrer à votre arsenal de compétences en matière de développement web.

Vous avez d’autres suggestions pour améliorer ce flux de travail Git de base pour le développement web ? Faites-nous en part dans la section des commentaires !

Daniel Diaz

Daniel is a self-taught Python Developer, Technical Writer, and long-life learner. He enjoys creating software from scratch and explaining this process through stunning articles. Follow him on Twitter: @DaniDiazTech

• Site Web
• LinkedIn
• Twitter