Hur man automatiskt driftsätter ändringar i WordPress-teman med hjälp av GitHub och Deploy

De flesta professionella webbutvecklare använder ett versionshanteringssystem som GitHub eller Bitbucket och driftsätter automatiskt sina ändringar till staging- eller live-webbplatser.

Vi har provat flera verktyg för att automatiskt driftsätta ändringar. Baserat på denna verkliga erfarenhet fann vi att du kan använda DeployHQ för att skicka temautveckling till din webbplats. DeployHQ fungerar som en mellanhand mellan ditt Git-förråd och din server.

I den här artikeln visar vi hur du automatiskt driftsätter ändringar i WordPress-teman med hjälp av GitHub och Deploy.

Varför använda ett versionshanteringssystem för utveckling av WordPress-teman?

Ett versionshanteringssystem låter dig registrera ändringar i en fil eller en uppsättning filer över tid så att du kan återkalla specifika versioner senare. Med andra ord, varje gång vi ändrar en WordPress-temamall, bild eller CSS-fil, håller ett versionshanteringssystem reda på dessa ändringar.

Låt oss till exempel säga att du bestämmer dig för att köra en serie ändringar. Om dessa ändringar orsakar ett problem, kan du återställa (eller rulla tillbaka) till en befintlig 'version' av ditt WordPress-tema.

Git är ett vanligt versionshanteringssystem och tillåter flera användare att arbeta med samma kodbas, som ett WordPress-tema. Om två utvecklare redigerar samma fil, har Git inbyggda kontroller för att hantera dessa problem (kända som sammanslagningskonflikter).

För mer information, se vår nybörjarguide till att använda Git med WordPress.

Varför använda ett distributionssystem?

Ett driftsättningssystem som integreras med tjänster som GitHub låter dig automatiskt eller manuellt ladda upp ändringar du har gjort i ditt WordPress-tema.

Du kan se det som ett envägssynkroniseringssystem. Om du till exempel tar bort en fil från ditt WordPress-tema, måste du också ta bort den via FTP. Med ett distributionssystem görs detta automatiskt åt dig när du checkar in dina kodändringar till GitHub.

I den här artikeln kommer vi att arbeta med ett utplaceringssystem som kallas DeployHQ, eller helt enkelt Deploy. Deploy fungerar med andra Git-förvaringsleverantörer som Bitbucket, men vi kommer att hålla oss till GitHub för den här handledningen.

Konfigurera ett GitHub-arkiv för ditt WordPress-tema

Först måste du skapa ett konto på GitHub och sedan använda GitHub-klienten för Windows eller Mac för att lagra ändringar i ditt WordPress-tema.

För att börja kan du besöka GitHub-webbplatsen och ange din e-postadress för att skapa ett nytt konto.

Därefter behöver du ange ett användarnamn och lösenord.

GitHub kommer också att be dig att välja e-postinställningar.

Därefter kan du skrolla ner och verifiera ditt konto genom att lösa ett pussel.

Det är precis som reCAPTCHA på din WordPress-webbplats.

När ditt konto är verifierat ser du GitHub-instrumentpanelen.

Härifrån kan du klicka på ikonen ‘+’ högst upp och välja alternativet ‘Nytt arkiv’.

Därefter kan du börja med att ange namn på förrådet, som namnet på din WordPress-temamapp.  

Sedan måste du välja om detta är ett offentligt eller privat arkiv. Offentliga arkiv tillåter alla att se din kod men inte göra ändringar i den. Privata arkiv är endast tillgängliga för dig att se.

Slutligen kan du kryssa i rutan om du vill lägga till en README-fil.

När det är gjort, klickar du bara på knappen ‘Skapa arkiv’.

Ditt GitHub-arkiv kommer nu att vara redo att användas.

Installera GitHub för Windows eller Mac

Därefter behöver du lägga in koden för vårt WordPress-tema i vårt arkiv. Ett enkelt sätt att göra detta är att använda GitHub-klienten, som installeras på din dator.

Besök helt enkelt webbplatsen GitHub Desktop och ladda ner skrivbordsklienten som finns tillgänglig för Windows eller Mac.

När nedladdningen är klar, starta GitHub-klienten.

Därefter måste du logga in med ditt GitHub-konto. Du kan klicka på knappen ‘Logga in på GitHub.com’.

Detta startar GitHub i din webbläsare.

Klicka bara på knappen 'Auktorisera skrivbord' för att tillåta GitHub Desktop att komma åt ditt konto.

Därefter kan du öppna GitHub Desktop-klienten.

Därefter behöver du konfigurera Git. Välj helt enkelt alternativet 'Använd mitt GitHub-kontonamn och e-postadress' och klicka på knappen 'Slutför'.

Därefter lägger vi till GitHub-arkivet som du skapade tidigare.

För att göra detta, klicka på alternativet 'Klona ett arkiv från internet'.

Du kommer att se en lista över dina GitHub-arkiv, inklusive det du skapade tidigare.

Välj helt enkelt arkivet och välj var du vill lagra det på din dator under fältet ‘Local Path’. När det är gjort kan du klicka på knappen ‘Clone’.

Du har nu klonat (kopierat) ditt arkiv som finns på GitHub till vår dator.

Därefter behöver du lägga till vår WordPress-temakod i arkivets mapp och sedan committa och synkronisera denna kod till GitHub.

Du kan börja med att leta upp mappen du valde i föregående steg på din dator. Den bör ha en README.md-fil i mappen. Beroende på din dators inställningar kan du också se den dolda .git-mappen.

När du har gjort ändringar i din WordPress-temakod, kopiera och klistra bara in dem i den här mappen.

Därefter kan du öppna GitHub Mac- eller Windows-appen och se filerna du precis har lagt till dyka upp i fönstret:

Du kommer att se ändringarna markerade i grönt. Detta är ändringar som du har sparat i det lokala arkivet, men du har ännu inte committat dessa ändringar.

Därefter behöver du committa (ladda upp) dessa filer till GitHub. För att göra detta, ange helt enkelt lite text i rutan Sammanfattning för att förklara de ändringar vi har gjort och klicka på knappen ‘Commit to master’.

Detta committar ändringarna du har gjort till arkivet.

För att ladda upp dessa ändringar till GitHub kan du klicka på knappen ‘Push origin’.

För att kontrollera att din commit har laddats upp till GitHub, besök ditt arkiv på GitHubs webbplats. Om allt fungerar ser du dina kodändringar.

Konfigurera utplacering

Det sista steget är att se till att alla ändringar i ditt GitHub-arkiv pushas till din WordPress-webbplats.

DeployHQ, eller Deploy, är en webbaserad tjänst som övervakar ändringar i ditt GitHub-arkiv och automatiskt eller manuellt laddar upp endast dessa ändringar till din WordPress-webbplats.

Föreställ dig det som en koppling mellan din kod och webbservern.

Först måste du besöka Deploy webbplats och registrera dig för ett nytt konto. Deploy är en betaltjänst, men den erbjuder ett gratis konto för ett projekt och 5 driftsättningar per dag.

Efter att du har registrerat dig kan du logga in på din Deploy-instrumentpanel.

Härifrån kan du klicka på knappen 'Skapa ett projekt' för att komma igång.

Därefter behöver du ange ett namn för ditt projekt.

Därefter kan du välja GitHub som din kodvärdplattform.

Om du skrollar ner hittar du fler alternativ, som att välja en zon för ditt projekt och avancerade alternativ.

När det är klart, klicka på knappen 'Skapa projekt' för att fortsätta.

Deploy kommer nu att omdirigera dig till GitHub.

Om du inte redan är inloggad kommer du att bli ombedd att logga in. Därefter kommer du att bli ombedd att tillåta Deploy att komma åt ditt GitHub-konto.

Klicka bara på knappen ‘Godkänn krystal’ för att fortsätta.

Deploy hämtar listan över dina arkiv från GitHub och ber dig att välja ett arkiv för det här projektet.

Klicka bara på ditt WordPress-temas arkiv, så importerar Deploy det åt dig.

I nästa steg kommer Deploy att be dig att ange serverinformation. Det är här du talar om för Deploy hur du laddar upp filer till din WordPress-server.

Du kan börja med att ange ett namn och välja ‘FTP’ som protokollalternativ.

Därefter måste du rulla ner och ange dina FTP-uppgifter.

• Värdnamn: Din webbplats SFTP/FTP-värd
• Port: Din webbhotells SFTP/FTP-port (vanligtvis SFTP = 22, FTP = 21)
• Användarnamn och lösenord: FTP-användarnamn och lösenord
• Driftsättningssökväg: Sökvägen du skulle navigera till innan du laddar upp dina WordPress-temafiler. Till exempel, public_html/example.com/wp-content/themes/MyTheme, där MyTheme är WordPress-temat du har committat till GitHub.

Efter att ha angett dessa uppgifter, klicka på knappen ‘spara ‘Skapa server’.

Deploy kommer nu att testa din serveranslutning och om allt fungerar korrekt, kommer det att visa ett framgångsmeddelande.

Du kan nu klicka på knappen 'Deploy' för att ladda upp dina GitHub-filer till din webbplats.

Du kommer nu att se utplaceringens framsteg.

När Deploy har slutförts ser du ett framgångsmeddelande.

Du har framgångsrikt distribuerat ändringar från GitHub till din webbplats med Deploy. Nu, när du gör ändringar i ditt WordPress-tema på din dator, måste du committa dem till GitHub. Därefter måste du besöka Deploy-webbplatsen för att starta distributionen manuellt.

Låt oss se hur man ställer in automatisk distribution så att alla ändringar du checkar in till GitHub automatiskt distribueras till din webbplats.

Konfigurera automatisk distribution

Först måste du besöka din Deploy-instrumentpanel och gå till sidan 'Projekt'. Härifrån klickar du helt enkelt på namnet på ditt projekt.

Därefter kan du gå till fliken 'Automatiska distributioner' från menyn till vänster.

Här måste du aktivera alternativet bredvid din server för automatiska driftsättningar.

Därefter måste du kopiera Webhook URL och lägga till den i ditt GitHub-konto.

Logga helt enkelt in på ditt GitHub-konto i en ny webbläsarflik. Klicka sedan på ditt arkiv och gå till fliken 'Inställningar'. Härifrån kan du gå till avsnittet Webhooks från menyn till vänster och klicka på knappen 'Lägg till webhook'.

Klistra nu in webhook-URL:en du kopierade från sidan med distributionsinställningar på servern i fältet Payload URL.

Välj därefter 'application/x-www-form-urlencoded' som 'Innehållstyp' från rullgardinsmenyn:

Därefter kan du scrolla ner och välja vilka händelser som ska utlösa webhooken. Du kan använda standardinställningen.

När det är klart klickar du helt enkelt på knappen 'Lägg till webhook'.

Det var allt. Ditt GitHub-repository kommer nu att meddela Deploy när det finns nya ändringar i ditt repository. Deploy kommer sedan automatiskt att implementera dessa ändringar på din webbplats.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du automatiskt distribuerar ändringar i WordPress-teman med GitHub och Deploy. Du kanske också vill se vår guide om hur du uppgraderar jQuery till den senaste versionen i WordPress och hur du kontrollerar och uppdaterar till den senaste WordPress-versionen.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.