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.
Il est temps d'apprendre plus que « git add », « git commit » et « git push » 👩‍💻 Plongez dans tout ce que vous devez savoir sur un flux de travail Git typique avec ce guide 👇Click to Tweet

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 :

Page de téléchargement de Git.
Page de téléchargement de Git.

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
Version Git.
Version Git.

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 :

Page d'inscription à GitHub.
Page d’inscription à 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 :

Fork GitHub.
Fork GitHub.

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 :

URL SSH.
URL SSH.

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

git clone git[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 :

La page web simple que nous sommes en train de créer.
La page web simple que nous sommes en train de créer.

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>
Notre page web avec un nouvel en-tête.
Notre page web avec un nouvel en-tête.

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) :

La branche « header ».
La branche « header ».

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 :

Création de pull request sur GitHub.
Création de pull request sur GitHub.

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 :

Rédaction d'un message de pull request.
Rédaction d’un message de pull request.

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

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

Commençons par la première option. Vous pouvez facilement vous connecter en SSH et extraire un repo de n’importe quel service d’hébergement Git comme GitHub, Gitlab ou Bitbucket.

Pour cela, allez dans votre onglet Sites, sélectionnez un site, et allez dans la section détails SSH, et copiez la commande terminal SSH.

Section des détails SSH.
Section des détails SSH.

Connectez-vous via SSH à votre site en collant la commande ci-dessus dans votre terminal, et entrez dans le dossier public de votre site (situé sous /www/nom-de-votre-site/). C’est là que se trouvent tous vos fichiers WordPress, ce qui vous permet de télécharger un repo Git avec un thème ou une extension personnalisée sur laquelle vous avez travaillé.

Voici comment télécharger un repo 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 fonction de déploiement GitHub chez Kinsta, vous pouvez déployer un site WordPress complet à partir d’un dépôt GitHub.

Votre dépôt GitHub devrait inclure une copie des fichiers du cœur de WordPress, et bien sûr, le contenu de votre site à l’intérieur du dossier wp-content.

Jetons un coup d’œil rapide à cette option.

Allez sur l’un des sites de votre entreprise et créez un environnement de staging. Cela ne devrait pas prendre plus de quelques minutes.

Environnement de mise en scène.
Environnement de mise en scène.

Une fois que vous êtes dans votre site de staging, allez dans l’onglet Déploiement et cliquez sur le bouton Commencer la configuration. Vous allez voir une modale GitHub qui va permettre à Kinsta de se connecter à votre compte GitHub.

Onglet de déploiement GitHub.
Onglet de déploiement GitHub.

Maintenant, sélectionnez le repo à partir duquel vous allez récupérer votre site.

Connecter Kinsta à GitHub.
Connecter Kinsta à GitHub.

Enfin, déployez votre site et visitez-le via l’URL de votre site de staging.

Bouton Déployer maintenant.
Bouton Déployer maintenant.

Cette fonctionnalité est encore en version Beta, mais bientôt chaque utilisateur de Kinsta y aura accès.

Utiliser Git et Kinsta peut être une combinaison puissante si vous savez bien les utiliser. Alors que notre tutoriel ici ne présente qu’un exemple simple, vous pouvez en apprendre beaucoup plus dans notre article de la base de connaissances Git.

Améliorez vos connaissances de Git avec ce guide sur le flux de travail d'un projet typique ✅Click to Tweet

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.

Git est un outil tellement puissant que vous pouvez étendre son utilisation même à l’hébergement WordPress, il ne peut donc que vous être bénéfique de l’apprendre et de le mettre en œuvre dans le cadre de votre arsenal de compétences en 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 !


Économisez du temps et de l’argent et optimisez les performances de votre site avec :

  • Aide instantanée des experts en hébergement WordPress, 24/7.
  • Intégration de Cloudflare Enterprise.
  • Une audience mondiale avec 32 centres de données dans le monde entier.
  • Optimisation avec notre surveillance intégrée de performance d’applications (APM).

Tout cela et bien plus encore, dans un seul plan sans contrat à long terme, avec des migrations assistées et une garantie de remboursement de 30 jours. Pour trouver le plan qui vous convient, Découvrez nos plans ou contactez nous.