Git pour le développement Web : découvrez 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 bien d'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 solo, 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 l'ensemble du workflow de 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 comme v1, v2, v3, etc., vous avez un projet avec une base de données spéciale qui stocke toutes les versions des fichiers
• Collaboration : Git vous permet, à vous et à 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 requests vers des projets open source sur des plateformes comme GitHub ou Bitbucket.
• Flexibilité de la plate-forme : 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 facilement les erreurs 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 ?

Cela peut vous dérouter si vous êtes totalement nouveau sur Git. Pour le dire en termes simples, Git et GitHub sont des outils liés mais différents.

Git est le système de contrôle de version (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 nos fichiers de projet et leur historique Git en ligne (situé dans le dossier .git/ de votre projet) .

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

GitHub suralimente 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 Git de base pour le développement Web

Dans les sections suivantes, vous en apprendrez plus sur le flux de travail Git pour le développement Web grâce à des exercices pratiques.

Exigences 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 packages si vous utilisez Linux ou macOS :

Pour tester que tout s'est bien passé avec l'installation, lancez un terminal sous Linux ou macOS en recherchant "Terminal" dans le menu de vos applications, ou en ouvrant Git bash sous Windows (qui est installé avec Git par défaut).

Tapez ensuite :

 git --version

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

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 de base pour les projets collaboratifs

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

Le workflow typique d'un projet Git ressemble à ceci :

1. Obtenez une copie locale du projet en clonant un référentiel ou référentiel. Si vous collaborez, vous devez d'abord bifurquer le dépôt.
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 référentiel distant.
6. Créez une demande d'extraction vers le référentiel d'origine.
7. Fusionnez et résolvez les conflits dans la branche principale du dépôt d'origine.

Didacticiel

Il est maintenant temps de se salir les mains !

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

Pour forker le site HTML, rendez-vous 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 référentiel d'origine qui n'est disponible que sur votre compte GitHub. C'est exactement le même référentiel - jusqu'à ce que vous commenciez à valider les modifications.

Comme vous pouvez le voir, créer un dépôt public ne prend que quelques secondes. C'est idéal pour les projets open source, mais gardez à l'esprit que si votre organisation a un dépôt privé, vous devrez être inclus en tant que contributeur avant d'essayer de le bifurquer.

Il est temps d'apporter votre fork à votre machine locale. Pour cela, il faut le cloner avec la commande git clone , qui récupère le dépôt Git depuis 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 dépôt GitHub, rendez-vous 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 référentiel forké est :

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

Lorsque vous clonez un dépôt, vous obtenez un dossier avec son nom. À l'intérieur de ce dossier se trouvent le code source du projet (dans ce cas, le site HTML) et le référentiel Git, qui se trouve à l'intérieur d'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 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 du site HTML et créez une branche nommée header . Dans cette nouvelle branche, nous pouvons éditer tous les fichiers et implémenter autant de code que nous le voulons car cela n'affectera pas la branche principale (d'origine).

Exécutez la commande suivante :

Enregistrez-vous pour recevoir le bulletin d'informations

Vous voulez savoir comment nous avons augmenté notre trafic de plus de 1000 % ?

Rejoignez plus de 20 000 autres personnes qui reçoivent notre newsletter hebdomadaire avec des conseils WordPress d'initiés !

Abonnez-vous maintenant

 git checkout -b header

Cela 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 "principale" vers la branche "en-tête", mais l'arborescence 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 dans votre projet ramifié. Ce fichier comprend des liens vers Bootstrap 5, afin que nous puissions tirer parti des composants prêts à l'emploi du framework.

Ajoutez le code suivant au fichier index.html à l'intérieur de la <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 beau ! N'hésitez pas à faire d'autres branches et modifications que vous souhaitez.

Une fois que vous avez terminé de modifier le projet, il est temps de valider toutes les modifications dans votre dépôt local. Dans le répertoire du projet, tapez ce qui suit dans votre terminal :

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

Lorsque vous démarrez un projet pour la première fois, il est courant d'avoir des messages de validation descriptifs, mais avec le temps et le changement d'orientation, la qualité des messages a tendance à baisser. Assurez-vous de suivre les bonnes pratiques de dénomination.

Maintenant que vous avez effectué un commit sur votre référentiel local (qui n'est toujours disponible que sur votre ordinateur), il est temps de le transférer vers le référentiel distant.

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

 git push --set-upstream origin header

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

Après cela, vous devriez pouvoir voir une nouvelle branche nommée header dans votre référentiel forké (par exemple https://github.com/yourusername/HTML-site/branches ):

Pour créer une demande d'extraction vers le référentiel d'origine, cliquez sur Comparer , en bas dans la section Branches actives .

Cela vous guidera vers une pull request, où vous devrez choisir la branche (l'originale ou votre fork) avec laquelle vous souhaitez fusionner. Par défaut, il affiche l'option de fusion avec le référentiel de base :

Une fois que vous avez cliqué sur l'option de demande d'extraction, vous devrez écrire une courte description des modifications apportées, comme pour vos commits précédents. Encore une fois, essayez d'être concis mais descriptif :

Cliquez sur le bouton Créer une demande d'extraction et attendez que le propriétaire du référentiel de base accepte ou vous fasse part de ses commentaires sur vos modifications.

Félicitations, vous venez de terminer toutes les étapes d'un flux de travail Git commun pour le développement Web !

C'était un exemple vraiment basique, mais la logique s'étend à des projets de toutes tailles. Assurez-vous également d'implémenter étroitement ce flux de travail dans des projets collaboratifs plus importants.

Comment utiliser Git chez Kinsta

Si vous êtes un utilisateur Kinsta, vous avez déjà deux façons d'utiliser Git et GitHub depuis votre portail MyKinsta.

Commençons par la première option. Vous pouvez facilement vous connecter en SSH et extraire un référentiel à partir de n'importe quel service d'hébergement Git tel que GitHub, Gitlab ou Bitbucket.

Pour ce faire, accédez à votre onglet Sites , sélectionnez un site, accédez à la section Détails SSH et copiez la commande de terminal SSH.

Connectez-vous via SSH à votre site en collant la commande ci-dessus dans votre terminal et en entrant dans le dossier public de votre site (situé sous /www/yoursitename/ ). C'est ici que se trouvent tous vos fichiers WordPress, vous pouvez donc créer un référentiel Git avec un thème ou un plugin personnalisé sur lequel vous avez travaillé.

Voici comment dérouler un référentiel Git en une simple commande :

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

Maintenant, en introduisant la nouvelle fonctionnalité de déploiement GitHub chez Kinsta, vous pouvez déployer un site WordPress complet à partir d'un référentiel GitHub.

Votre référentiel GitHub doit inclure une copie des fichiers principaux de WordPress et, bien sûr, le contenu de votre site dans le dossier wp-content .

Voyons rapidement cette option.

Accédez à l'un des sites de votre entreprise et créez un environnement de mise en scène. Cela ne prendrait pas plus de quelques minutes.

Une fois que vous êtes sur votre site intermédiaire, accédez à l'onglet Déploiement et cliquez sur le bouton Commencer la configuration . Vous allez voir un modal GitHub qui permettra à Kinsta de se connecter à votre compte GitHub.

Maintenant, sélectionnez le référentiel à partir duquel vous allez extraire votre site.

Enfin, déployez votre site et visitez-le via l'URL de votre site intermédiaire.

Cette fonctionnalité est toujours en version bêta , mais bientôt tous les utilisateurs de Kinsta y auront accès.

Utiliser Git et Kinsta peut être une combinaison puissante si vous savez bien les utiliser. Bien que notre didacticiel ne présente ici qu'un exemple simple, vous pouvez en apprendre beaucoup plus grâce à notre article de la base de connaissances Git.

Résumé

De nos jours, Git est un outil incontournable pour le développement Web, car la plupart du temps, vous collaborerez avec d'autres pour créer le meilleur projet possible.

Dans cet article, nous avons discuté de 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 référentiel Git.

Git est un outil si puissant que vous pouvez étendre son utilisation même à l'hébergement WordPress, il ne peut donc que vous être utile de l'apprendre et de l'implémenter dans le cadre de votre arsenal de compétences en développement Web.

Avez-vous d'autres suggestions pour améliorer ce flux de travail Git de base pour le développement Web ? Faites le nous savoir dans la section "Commentaires!