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

Voulez-vous déployer automatiquement les modifications de thème WordPress sur votre site Web? La plupart des développeurs Web professionnels utilisent un système de contrôle de version tel que GitHub ou BitBucket et déploient automatiquement leurs modifications sur un site intermédiaire ou réel. Dans cet article, nous allons vous montrer comment déployer automatiquement les modifications de thème WordPress à l'aide de GitHub et de Deploy..

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

Premièrement, nous devons comprendre quoi contrôle de version veux dire:

… Un système qui enregistre les modifications apportées à un fichier ou à un ensemble de fichiers au fil du temps afin que vous puissiez rappeler des versions spécifiques ultérieurement http://git-scm.com/book/fr/v2/Getting-Started-About-Version-Control

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 assure le suivi de ces modifications. À des moments particuliers, nous pouvons étiqueter (valider) un lot de modifications. Si ces modifications posent problème, nous pouvons revenir (ou revenir en arrière) à une "version" existante de notre thème WordPress..

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

Les systèmes tiers de contrôle de version Git hébergés, tels que GitHub et BitBucket, permettent aux utilisateurs de laisser des problèmes (ou des tickets) s’ils détectent un problème avec votre code. Vos modifications de code peuvent être validées (étiquetées) par rapport à un problème particulier, afin d'afficher les modifications de code exactes apportées pour résoudre un problème. Ceci est vraiment utile lorsque vous regardez le code dans 6 ou 12 mois et que vous voulez savoir pourquoi vous avez fait quelque chose d'une manière particulière..

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écharger automatiquement ou manuellement les modifications que vous avez apportées à votre thème WordPress..

Vous pouvez le voir comme un système de synchronisation à sens unique - par exemple, si vous supprimez un fichier de votre thème WordPress, vous devez vous rappeler de le supprimer également via FTP. Avec un système de déploiement, ceci est automatiquement effectué pour vous lorsque vous validez vos modifications de code dans GitHub..

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

Nous allons d’abord créer un compte sur GitHub, puis utiliser le client GitHub pour Windows ou Mac pour stocker notre thème WordPress dans GitHub..

Rendez-vous sur https://github.com et créez un compte gratuit.

Une fois que vous avez enregistré et confirmé votre adresse e-mail, cliquez sur l'icône Plus dans le coin supérieur droit de l'écran, puis choisissez Nouveau référentiel (un référentiel est un conteneur pour votre code - dans ce cas, notre thème WordPress).

Commencez par régler le nom du référentiel - Le nom du dossier de votre thème WordPress est une bonne idée. Ensuite, choisissez s'il s'agit d'un Publique ou Privé dépôt. Les référentiels publics sont disponibles pour que tout le monde puisse voir votre code, mais ils ne peuvent pas le modifier. Les dépôts privés sont disponibles juste pour vous de voir.

Enfin, cochez la case ci-dessous Initialiser ce référentiel avec un fichier README, puis cliquez sur le Créer un référentiel bouton.

Si tout a fonctionné, vous devriez voir votre nouveau référentiel à l'écran:

Installer GitHub pour Windows / Mac

Ensuite, nous devons mettre le code de notre thème WordPress dans notre référentiel. Nous pouvons le faire en utilisant le client GitHub, qui s’installe sur votre ordinateur..

Il suffit de visiter le site Web de GitHub Desktop et de télécharger le client GitHub Desktop disponible pour Windows et Mac.

Une fois téléchargé, démarrez le processus d'installation en cliquant sur Continuer

Sur l'écran suivant, entrez votre identifiant GitHub (nom d'utilisateur) et votre mot de passe, que vous avez créés lors de votre inscription sur GitHub. Clique le Se connecter bouton lorsque vous avez terminé.

Si les informations de connexion sont correctes, votre compte sera affiché. Clique le Continuer bouton pour continuer:

Nous pouvons laisser le Git Config section comme paramètres par défaut. Assurez-vous de cliquer sur le Installer les outils de ligne de commande option, avant de cliquer sur le Continuer bouton:

Enfin, cliquez sur Terminé. L’écran GitHub s’affiche..

Ajoutons notre référentiel GitHub que nous avons créé précédemment. Pour ce faire, cliquez sur l'icône plus dans le coin supérieur droit, puis sur le bouton Cloner option. Vous verrez une liste de vos référentiels GitHub, y compris celui que nous avons créé précédemment:

Cliquez sur le référentiel que vous avez créé précédemment, puis cliquez sur le Cloner bouton.

Choisissez l'emplacement de stockage de ce référentiel sur votre ordinateur, puis cliquez sur le bouton Cloner bouton une fois que vous avez choisi cette.

Nous avons maintenant cloné (copié) notre référentiel hébergé sur GitHub sur notre ordinateur.  

Ensuite, nous devons ajouter notre code de thème WordPress dans le dossier du référentiel, puis valider et synchroniser ce code avec GitHub..

Commencez par rechercher le dossier que vous avez sélectionné à l'étape ci-dessus sur votre ordinateur. Il devrait avoir un LISEZMOI.md fichier dans le dossier. Selon les paramètres de votre ordinateur, vous pouvez également voir le message caché. .git dossier:

Copiez et collez le code de votre thème WordPress dans ce dossier:

Ouvrez l'application Mac ou Windows GitHub et vous verrez maintenant les fichiers que vous venez d'ajouter s'afficher dans la fenêtre:

Vous verrez les modifications surlignées en vert. Ce sont les modifications que vous avez enregistrées dans le référentiel local mais que vous n'avez pas encore validées..

Ensuite, nous devons valider (télécharger) ces fichiers sur GitHub. Pour ce faire, entrez du texte dans le champ Résumé encadré pour expliquer les modifications apportées (par exemple. Mon premier commit) et cliquez sur le bouton S'engager à maîtriser bouton.

Cela valide les modifications que vous avez apportées au référentiel. Pour télécharger ces modifications dans GitHub, cliquez sur le bouton Synchroniser dans le coin supérieur droit de la fenêtre de l'application GitHub..

Pour vérifier que votre commit a été chargé sur GitHub, visitez votre référentiel sur le site Web de GitHub. Si tout a fonctionné, vous verrez votre code:

Mise en place du déploiement

Jusqu'à présent, nous avons configuré GitHub et enregistré le code de notre thème WordPress dans votre référentiel GitHub. La dernière étape consiste à télécharger toutes les modifications de votre référentiel GitHub sur votre site Web WordPress..

DeployHQ ou simplement Deploy, est un service Web qui surveillera les modifications apportées à votre référentiel GitHub et téléchargera automatiquement ou manuellement ces modifications uniquement sur votre site Web WordPress..

Imaginez-le comme une connexion au milieu de votre code et de votre serveur Web:

Vous devez d’abord visiter le site Web Deploy et vous inscrire. Le déploiement est un service payant, mais il offre un compte gratuit pour un projet et 10 déploiements par jour..

Une fois l'inscription terminée, vous pouvez vous connecter à votre tableau de bord Deploy. Cliquez sur créer un nouveau projet pour commencer.

Ensuite, vous devez donner un nom à votre projet et sélectionner votre plateforme d’hébergement de code, GitHub. Cliquez sur le bouton créer un projet pour continuer.

Déployer va maintenant vous rediriger vers GitHub. Si vous n'êtes pas encore connecté, il vous sera demandé de vous connecter. Après cela, il vous sera demandé d'autoriser Deploy à accéder à votre compte GitHub..

Cliquez sur le bouton 'Autoriser l'application' pour continuer.

Deploy récupérera la liste de vos référentiels auprès de GitHub et vous demandera de sélectionner un référentiel pour ce projet..

Cliquez simplement sur votre référentiel de thèmes WordPress et Deploy l'importera pour vous..

Dans l'étape suivante, Deploy vous demandera de fournir des informations sur le serveur. C’est ici que vous expliquez à Deploy comment télécharger des fichiers sur votre serveur WordPress..

Vous aurez besoin de vos identifiants FTP pour cela.

• Prénom: Donnez un nom à cette connexion
• Protocole: FTP ou si vous avez SFTP ou SSH, vous pouvez aussi les utiliser
• Nom d'hôte: Hôte SFTP / FTP de votre site Web.
• Port: Port SFTP / FTP de votre hôte de 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 utiliseriez avant de télécharger vos fichiers de thème WordPress. Par exemple, public_html / example.com / wp-content / themes / MyTheme, où Mon thème est le thème WordPress que vous avez dédié à GitHub.

Cliquez sur le bouton Enregistrer pour continuer.

Déployer va maintenant tester votre connexion au serveur et si tout fonctionne correctement, alors il vous montrera un message de réussite.

Vous pouvez maintenant cliquer sur le bouton Déployer maintenant pour télécharger vos fichiers GitHub sur votre site Web..

Deploy vous montrera les détails de ce déploiement. Cliquez simplement sur le bouton Déployer en bas.

Vous allez maintenant voir la progression du déploiement. Une fois le déploiement terminé, vous verrez un message de réussite..

Vous avez déployé avec succès les modifications de GitHub sur votre site Web à l'aide de Deploy. Désormais, lorsque vous apportez des modifications à votre thème WordPress sur votre ordinateur, vous devez les enregistrer dans GitHub. Après cela, vous devez visiter le site Web de déploiement pour démarrer le déploiement manuellement..

Voyons comment configurer le déploiement automatique de sorte que toutes les modifications que vous avez validées pour 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. Cliquez sur le nom de votre projet.

Depuis la page de votre projet, allez au menu Paramètres, puis sélectionnez Serveurs et groupes..

Cliquez sur l'icône d'édition à côté de votre serveur.

Cela vous amènera à modifier l'écran du serveur. Dans la colonne de droite, vous trouverez les paramètres de déploiement automatique..

Assurez-vous qu'il est allumé. Ci-dessous, vous verrez une URL. Copiez cette URL car vous en aurez besoin à l'étape suivante..

Connectez-vous à votre compte GitHub dans un nouvel onglet de navigateur. Cliquez sur votre référentiel, puis sur Paramètres. Cliquez sur le lien Webhooks and Services.

Cliquez sur le bouton Add Webhook.

Collez l'URL que vous avez copiée à partir de la page de déploiement des paramètres du serveur dans le champ URL de charge. Sélectionner application / x-www-form-urlencoded en tant que type de contenu et cliquez sur Ajouter un Webhook.

C'est tout, votre référentiel GitHub notifiera maintenant Deploy lorsque de nouvelles modifications sont apportées à votre référentiel. Deploy déploiera alors automatiquement ces modifications sur votre site Web..

Tester le déploiement automatique

Pour tester le déploiement automatique, apportez quelques modifications à votre référentiel de thèmes WordPress sur votre ordinateur..

Ouvrez l'application de bureau GitHub, puis validez ces modifications..

N'oubliez pas de cliquer sur le bouton de synchronisation.

Visitez maintenant votre projet sur le tableau de bord de déploiement. Cliquez sur les déploiements et vous y trouverez votre déploiement automatique..

C’est tout, nous espérons que cet article vous a appris à déployer automatiquement les modifications apportées au thème WordPress avec GitHub et Deploy. Vous pouvez également consulter notre guide sur la création d'un environnement de transfert pour un site WordPress..

.