Comment déployer automatiquement les modifications de thème WordPress à l'aide de GitHub et Deploy

La plupart des développeurs web professionnels utilisent un système de contrôle de version comme GitHub ou Bitbucket et déploient automatiquement leurs modifications sur des sites de staging ou en direct.

Nous avons essayé plusieurs outils pour déployer automatiquement les modifications. Sur la base de cette expérience concrète, nous avons constaté que vous pouvez utiliser DeployHQ pour pousser le développement de thèmes sur votre site. DeployHQ agit comme un intermédiaire entre votre dépôt Git et votre serveur.

Dans cet article, nous vous montrerons comment déployer automatiquement les modifications de thèmes WordPress en utilisant GitHub et Deploy.

Pourquoi utiliser un système de contrôle de version pour le développement de thèmes WordPress ?

Un système de contrôle de version vous permet d'enregistrer les modifications apportées à un fichier ou à un ensemble de fichiers au fil du temps afin de pouvoir rappeler des versions spécifiques ultérieurement. En d'autres termes, chaque fois que nous modifions un modèle de thème WordPress, une image ou un fichier CSS, un système de contrôle de version garde une trace de ces modifications.

Par exemple, disons que vous décidez d'appliquer un lot de modifications. Si ces modifications causent un problème, vous pouvez alors revenir (ou annuler) à une 'version' existante de notre thème WordPress.

Git est un système de contrôle de version courant, et permet à plusieurs utilisateurs de travailler sur la même base de code, comme un thème WordPress. Si deux développeurs modifient le même fichier, Git dispose de contrôles intégrés pour gérer ces problèmes (connus sous le nom de conflits de fusion).

Pour plus d'informations, consultez notre guide pour débutants sur l'utilisation de Git avec WordPress.

Pourquoi utiliser un système de déploiement ?

Un système de déploiement qui s'intègre à des services tels que GitHub vous permet de téléverser automatiquement ou manuellement les modifications que vous avez apportées à votre thème WordPress.

Vous pouvez le considérer comme un système de synchronisation unidirectionnel. Par exemple, si vous supprimez un fichier de votre thème WordPress, vous devrez également le supprimer via FTP. Avec un système de déploiement, cela est fait automatiquement pour vous lorsque vous validez vos modifications de code sur GitHub.

Dans cet article, nous allons travailler avec un système de déploiement appelé DeployHQ, ou simplement Deploy. Deploy fonctionne avec d'autres fournisseurs de dépôts Git comme Bitbucket, mais nous allons nous en tenir à GitHub pour ce tutoriel.

Configuration d'un dépôt GitHub pour votre thème WordPress

Tout d'abord, vous devrez créer un compte sur GitHub, puis utiliser le client GitHub pour Windows ou Mac pour stocker les modifications de votre thème WordPress.

Pour commencer, vous pouvez visiter le site web GitHub et entrer votre adresse e-mail pour créer un nouveau compte.

Ensuite, vous devrez entrer un nom d'utilisateur et un mot de passe.

GitHub vous demandera également de choisir vos préférences d'e-mail.

Après cela, vous pouvez faire défiler vers le bas et vérifier votre compte en résolvant un puzzle.

C'est comme reCAPTCHA sur votre site WordPress.

Une fois votre compte vérifié, vous verrez le tableau de bord GitHub.

À partir d'ici, vous pouvez cliquer sur l'icône '+' en haut et sélectionner l'option 'Nouveau dépôt'.

Ensuite, vous pouvez commencer par définir le nom du dépôt, comme le nom du dossier de votre thème WordPress.  

Ensuite, vous devrez choisir si ce dépôt est public ou privé. Les dépôts publics permettent à tout le monde de voir votre code, mais ne peuvent pas y apporter de modifications. Les dépôts privés ne sont visibles que par vous.

Enfin, vous pouvez cocher la case si vous souhaitez ajouter un fichier README.

Une fois cela fait, cliquez simplement sur le bouton « Créer un dépôt ».

Votre dépôt GitHub sera maintenant prêt à l'emploi.

Installez GitHub pour Windows ou Mac

Ensuite, vous devez placer le code de notre thème WordPress dans notre dépôt. Une façon simple de le faire est d'utiliser le client GitHub, qui s'installe sur votre ordinateur.

Visitez simplement le site web GitHub Desktop et téléchargez le client Desktop disponible pour Windows ou Mac.

Une fois le téléchargement terminé, lancez le client GitHub.

Ensuite, vous devrez vous connecter en utilisant votre compte GitHub. Vous pouvez cliquer sur le bouton « Se connecter à GitHub.com ».

Cela lancera GitHub dans votre navigateur web.

Cliquez simplement sur le bouton « Autoriser le bureau » pour permettre à GitHub Desktop d'accéder à votre compte.

Après cela, vous pouvez ouvrir le client GitHub Desktop.

Ensuite, vous devrez configurer Git. Sélectionnez simplement l'option « Utiliser mon nom et mon adresse e-mail de compte GitHub » et cliquez sur le bouton « Terminer ».

Ensuite, ajoutons le dépôt GitHub que vous avez créé précédemment.

Pour ce faire, cliquez sur l'option « Cloner un dépôt depuis Internet ».

Vous verrez une liste de vos dépôts GitHub, y compris celui que vous avez créé précédemment.

Sélectionnez simplement le dépôt et choisissez où vous souhaitez le stocker sur votre ordinateur dans le champ « Chemin local ». Une fois cela fait, vous pouvez cliquer sur le bouton « Cloner ».

Vous avez maintenant cloné (copié) votre dépôt hébergé sur GitHub sur notre ordinateur.

Ensuite, vous devez ajouter notre code de thème WordPress au dossier du dépôt, puis valider et synchroniser ce code sur GitHub.

Vous pouvez commencer par trouver le dossier que vous avez sélectionné à l'étape précédente sur votre ordinateur. Il devrait y avoir un fichier README.md dans le dossier. Selon les paramètres de votre ordinateur, vous pourriez également voir le dossier caché .git.

Lorsque vous avez apporté des modifications au code de votre thème WordPress, copiez-les et collez-les simplement dans ce dossier.

Après cela, vous pouvez ouvrir l'application GitHub Mac ou Windows et voir les fichiers que vous venez d'ajouter apparaître dans la fenêtre :

Vous verrez les modifications mises en évidence en vert. Ce sont les modifications que vous avez enregistrées dans le dépôt local, mais vous n'avez pas encore validé ces modifications.

Ensuite, vous devrez valider (télécharger) ces fichiers sur GitHub. Pour ce faire, entrez simplement du texte dans la zone « Résumé » pour expliquer les modifications que nous avons apportées et cliquez sur le bouton « Valider sur master ».

Cela valide les modifications que vous avez apportées au dépôt.

Pour téléverser ces modifications sur GitHub, vous pouvez cliquer sur le bouton « Push origin ».

Pour vérifier que votre commit a été téléversé sur GitHub, visitez votre dépôt sur le site web de GitHub. Si tout fonctionne, vous verrez les modifications de votre code.

Configuration du déploiement

La dernière étape consiste à s'assurer que toutes les modifications apportées à votre dépôt GitHub sont poussées vers votre site web WordPress.

DeployHQ, ou Deploy, est un service basé sur le web qui surveillera les modifications de votre dépôt GitHub et téléversera automatiquement ou manuellement uniquement ces modifications sur votre site web WordPress.

Imaginez-le comme une connexion entre votre code et le serveur web.

Tout d'abord, vous devez visiter le site web de Deploy et vous inscrire pour un nouveau compte. Deploy est un service payant, mais il offre un compte gratuit pour un projet et 5 déploiements par jour.

Après avoir terminé votre inscription, vous pouvez vous connecter à votre tableau de bord Deploy.

À partir de là, vous pouvez cliquer sur le bouton « Créer un projet » pour commencer.

Ensuite, vous devez fournir un nom pour votre projet.

Après cela, vous pouvez sélectionner GitHub comme plateforme d'hébergement de votre code.

Si vous faites défiler vers le bas, vous trouverez plus d'options, comme le choix d'une zone pour votre projet et des options avancées.

Une fois cela fait, cliquez sur le bouton « Créer un projet » pour continuer.

Deploy vous redirigera maintenant vers GitHub.

Si vous n’êtes pas déjà connecté, vous serez invité à vous identifier. Ensuite, vous devrez autoriser Deploy à accéder à votre compte GitHub.

Cliquez simplement sur le bouton « Autoriser krystal » pour continuer.

Deploy récupérera la liste de vos dépôts depuis GitHub et vous demandera de sélectionner un dépôt pour ce projet.

Cliquez simplement sur le dépôt de votre thème WordPress, et Deploy l'importera pour vous.

À l'étape suivante, Deploy vous demandera de fournir les informations du serveur. C'est ici que vous indiquez à Deploy comment téléverser les fichiers sur votre serveur WordPress.

Vous pouvez commencer par entrer un nom et sélectionner « FTP » comme option de protocole.

Ensuite, vous devrez faire défiler vers le bas et entrer vos identifiants FTP.

• Hôte : L'hôte SFTP/FTP de votre site web
• Port : Le port SFTP/FTP de l'hôte de votre site web (généralement SFTP = 22, FTP = 21)
• Nom d'utilisateur et mot de passe : Nom d'utilisateur et mot de passe FTP
• Chemin de déploiement : Le chemin que vous parcourriez avant de téléverser vos fichiers de thème WordPress. Par exemple, public_html/example.com/wp-content/themes/MonTheme, où MonTheme est le thème WordPress que vous avez validé sur GitHub.

Après avoir entré ces détails, cliquez sur le bouton « Enregistrer « Créer un serveur » ».

Deploy va maintenant tester votre connexion serveur et si tout fonctionne correctement, il vous affichera un message de succès.

Vous pouvez maintenant cliquer sur le bouton « Déployer » pour téléverser vos fichiers GitHub sur votre site web.

Vous verrez maintenant la progression du déploiement.

Une fois que Deploy aura terminé, vous verrez un message de succès.

Vous avez déployé avec succès des modifications de GitHub sur votre site web en utilisant Deploy. Maintenant, lorsque vous apportez des modifications à votre thème WordPress sur votre ordinateur, vous devez les valider sur GitHub. Après cela, vous devez visiter le site web de Deploy pour lancer le déploiement manuellement.

Voyons comment configurer le déploiement automatique afin que toutes les modifications que vous commitez sur GitHub soient automatiquement déployées sur votre site web.

Configuration du déploiement automatique

Tout d'abord, vous devez visiter votre tableau de bord de déploiement et accéder à la page « Projets ». À partir de là, cliquez simplement sur le nom de votre projet.

Ensuite, vous pouvez vous rendre dans l'onglet « Déploiements automatiques » depuis le menu de gauche.

Ici, vous devrez activer l'option à côté de votre serveur pour les déploiements automatiques.

Après cela, vous devrez copier l'URL du Webhook et l'ajouter à votre compte GitHub.

Connectez-vous simplement à votre compte GitHub dans un nouvel onglet de navigateur. Cliquez ensuite sur votre dépôt et accédez à l'onglet « Paramètres ». À partir de là, vous pouvez accéder à la section Webhooks depuis le menu de gauche et cliquer sur le bouton « Ajouter un webhook ».

Collez maintenant l'URL du webhook que vous avez copiée depuis la page des paramètres du serveur de déploiement dans le champ URL du payload.

Après cela, sélectionnez « application/x-www-form-urlencoded » comme « Type de contenu » dans le menu déroulant :

Ensuite, vous pouvez faire défiler vers le bas et sélectionner les événements qui doivent déclencher le webhook. Vous pouvez utiliser le réglage par défaut.

Une fois cela fait, cliquez simplement sur le bouton « Ajouter un webhook ».

C'est tout. Votre dépôt GitHub notifiera désormais Deploy en cas de nouvelles modifications dans votre dépôt. Deploy implémentera alors automatiquement ces modifications sur votre site web.

Nous espérons que cet article vous a aidé à apprendre comment déployer automatiquement les modifications de thèmes WordPress en utilisant GitHub et Deploy. Vous pourriez également consulter notre guide sur comment mettre à jour jQuery vers la dernière version dans WordPress et comment vérifier et mettre à jour la dernière version de WordPress.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.