Como Implantar Automaticamente Alterações de Tema do WordPress Usando GitHub e Deploy

A maioria dos desenvolvedores web profissionais usa um sistema de controle de versão como GitHub ou Bitbucket e implanta automaticamente suas alterações em sites de staging ou ao vivo.

Tentamos várias ferramentas para implantar alterações automaticamente. Com base nessa experiência do mundo real, descobrimos que você pode usar o DeployHQ para enviar o desenvolvimento de temas para o seu site. O DeployHQ atua como um intermediário entre seu repositório Git e seu servidor.

Neste artigo, mostraremos como implantar automaticamente alterações de temas do WordPress usando GitHub e Deploy.

Por que usar um sistema de controle de versão para o desenvolvimento de temas do WordPress?

Um sistema de controle de versão permite que você registre alterações em um arquivo ou conjunto de arquivos ao longo do tempo para que possa recuperar versões específicas mais tarde. Em outras palavras, toda vez que alteramos um template, imagem ou arquivo CSS de um tema do WordPress, um sistema de controle de versão acompanha essas alterações.

Por exemplo, digamos que você decida executar um lote de alterações. Se essas alterações causarem um problema, você poderá reverter (ou desfazer) para uma 'versão' existente do nosso Tema do WordPress.

O Git é um sistema de controle de versão comum e permite que vários usuários trabalhem na mesma base de código, como um Tema do WordPress. Se dois desenvolvedores editarem o mesmo arquivo, o Git possui controles integrados para lidar com esses problemas (conhecidos como conflitos de mesclagem).

Para mais informações, confira nosso guia para iniciantes sobre como usar Git com WordPress.

Por que usar um sistema de implantação?

Um sistema de implantação que se integra a serviços como o GitHub permite que você carregue automaticamente ou manualmente as alterações feitas no seu tema do WordPress.

Você pode vê-lo como um sistema de sincronização unidirecional. Por exemplo, se você excluir um arquivo do seu tema do WordPress, também precisará excluí-lo via FTP. Com um sistema de implantação, isso é feito automaticamente para você quando você confirma as alterações do seu código no GitHub.

Neste artigo, trabalharemos com um sistema de implantação chamado DeployHQ, ou simplesmente Deploy. O Deploy funciona com outros provedores de repositório Git como o Bitbucket, mas vamos nos ater ao GitHub para este tutorial.

Configurando um Repositório GitHub para o Seu Tema do WordPress

Primeiro, você precisará configurar uma conta no GitHub e, em seguida, usar o cliente GitHub para Windows ou Mac para armazenar alterações no seu Tema do WordPress.

Para começar, você pode visitar o site do GitHub e inserir seu endereço de e-mail para criar uma nova conta.

Em seguida, você precisará inserir um nome de usuário e senha.

O GitHub também pedirá que você escolha as preferências de e-mail.

Depois disso, você pode rolar para baixo e verificar sua conta resolvendo um quebra-cabeça.

É como o reCAPTCHA no seu site WordPress.

Assim que sua conta for verificada, você verá o painel do GitHub.

A partir daqui, você pode clicar no ícone de ‘+’ na parte superior e selecionar a opção ‘Novo repositório’.

Em seguida, você pode começar definindo o nome do repositório, como o nome da pasta do seu tema do WordPress.  

Em seguida, você precisará escolher se este é um repositório Público ou Privado. Repositórios públicos permitem que todos vejam seu código, mas não façam alterações nele. Repositórios privados estão disponíveis apenas para você ver.

Por fim, você pode marcar a caixa de seleção se quiser adicionar um arquivo README.

Assim que isso for feito, basta clicar no botão ‘Criar repositório’.

Seu repositório do GitHub estará pronto para uso.

Instale o GitHub para Windows ou Mac

Em seguida, você precisa colocar o código do nosso Tema WordPress em nosso repositório. Uma maneira simples de fazer isso é usando o cliente GitHub, que é instalado em seu computador.

Simplesmente visite o site GitHub Desktop e baixe o cliente Desktop disponível para Windows ou Mac.

Assim que o download for concluído, inicie o cliente GitHub.

Em seguida, você precisará fazer login usando sua conta GitHub. Você pode clicar no botão ‘Sign in to GitHub.com’.

Isso abrirá o GitHub no seu navegador da web.

Simplesmente clique no botão ‘Authorize desktop’ para permitir que o GitHub Desktop acesse sua conta.

Depois disso, você pode abrir o cliente GitHub Desktop.

Em seguida, você precisará configurar o Git. Simplesmente selecione a opção ‘Use my GitHub account name and email address’ e clique no botão ‘Finish’.

Em seguida, vamos adicionar o repositório GitHub que você criou anteriormente.

Para fazer isso, clique na opção ‘Clone a repository from the internet’.

Você verá uma lista dos seus repositórios GitHub, incluindo aquele que você criou anteriormente.

Simplesmente selecione o repositório e escolha onde você deseja armazená-lo em seu computador no campo ‘Local Path’. Assim que isso for feito, você pode clicar no botão ‘Clone’.

Agora você clonou (copiou) seu repositório hospedado no GitHub para o nosso computador.

Em seguida, você precisa adicionar nosso código de tema WordPress à pasta do repositório e, em seguida, fazer commit e sincronizar este código com o GitHub.

Você pode começar encontrando a pasta que selecionou na etapa anterior em seu computador. Ela deve ter um arquivo README.md na pasta. Dependendo das configurações do seu computador, você também pode ver a pasta oculta .git.

Quando você fizer alterações no código do seu tema WordPress, simplesmente copie e cole-as nesta pasta.

Depois disso, você pode abrir o aplicativo GitHub para Mac ou Windows e ver os arquivos que você acabou de adicionar aparecerem na janela:

Você verá as alterações destacadas em verde. Essas são as alterações que você salvou no repositório local, mas ainda não fez o commit dessas alterações.

Em seguida, você precisará fazer o commit (upload) desses arquivos para o GitHub. Para fazer isso, simplesmente insira algum texto na caixa ‘Summary’ para explicar as alterações que fizemos e clique no botão ‘Commit to master’.

Isso faz o commit das alterações que você fez no repositório.

Para enviar essas alterações para o GitHub, você pode clicar no botão ‘Push origin’.

Para verificar se seu commit foi enviado para o GitHub, visite seu repositório no site do GitHub. Se tudo funcionar, você verá as alterações do seu código.

Configurando o Deploy

O passo final é garantir que quaisquer alterações em seu repositório GitHub sejam enviadas para o seu site WordPress.

DeployHQ, ou Deploy, é um serviço baseado na web que monitorará as alterações em seu repositório GitHub e enviará automática ou manualmente apenas essas alterações para o seu site WordPress.

Imagine isso como uma conexão entre seu código e o servidor web.

Primeiro, você precisa visitar o site do Deploy e se inscrever para uma nova conta. O Deploy é um serviço pago, mas oferece uma conta gratuita para um projeto e 5 deploys por dia.

Após finalizar a inscrição, você pode fazer login no seu painel do Deploy.

A partir daqui, você pode clicar no botão ‘Criar um projeto’ para começar.

Em seguida, você precisa fornecer um nome para o seu projeto.

Depois disso, você pode selecionar o GitHub como sua plataforma de hospedagem de código.

Se você rolar para baixo, encontrará mais opções, como escolher uma zona para o seu projeto e opções avançadas.

Assim que isso for feito, clique no botão ‘Criar Projeto’ para continuar.

O Deploy agora irá redirecioná-lo para o GitHub.

Se você ainda não estiver conectado, será solicitado que faça login. Depois disso, você será solicitado a permitir que o Deploy acesse sua conta do GitHub.

Simplesmente clique no botão ‘Autorizar krystal’ para continuar.

O Deploy buscará a lista de seus repositórios do GitHub e pedirá que você selecione um repositório para este projeto.

Simplesmente clique no repositório do seu tema WordPress, e o Deploy o importará para você.

Na próxima etapa, o Deploy pedirá que você forneça informações do servidor. É aqui que você informa ao Deploy como fazer upload de arquivos para o seu servidor WordPress.

Você pode começar inserindo um nome e selecionando ‘FTP’ como opção de protocolo.

Em seguida, você precisará rolar para baixo e inserir suas credenciais de FTP.

• Hostname: O host SFTP/FTP do seu site
• Porta: A porta SFTP/FTP do host do seu site (geralmente SFTP = 22, FTP = 21)
• Nome de usuário e senha: Nome de usuário e senha do FTP
• Caminho de Implantação: O caminho que você navegaria antes de fazer o upload dos arquivos do seu tema WordPress. Por exemplo, public_html/example.com/wp-content/themes/MyTheme, onde MyTheme é o tema WordPress que você enviou para o GitHub.

Após inserir esses detalhes, clique no botão ‘salvar ‘Criar Servidor’.

O Deploy agora testará a conexão do seu servidor e, se tudo funcionar corretamente, exibirá uma mensagem de sucesso.

Agora você pode clicar no botão ‘Implantar’ para fazer o upload dos seus arquivos do GitHub para o seu site.

Agora você verá o progresso da implantação.

Assim que o Deploy terminar, você verá uma mensagem de sucesso.

Você implantou com sucesso as alterações do GitHub em seu site usando o Deploy. Agora, quando você fizer alterações no seu tema WordPress no seu computador, precisará enviá-las para o GitHub. Depois disso, você precisará visitar o site do Deploy para iniciar a implantação manualmente.

Let’s see how to set up automatic deployment so that any changes you commit to GitHub are automatically deployed to your website.

Setting Up Automatic Deployment

First, you need to visit your Deploy dashboard and go to the ‘Projects’ page. From here, simply click on the name of your project.

Next, you can head to the ‘Automatic Deployments’ tab from the menu on the left.

Here, you will need to enable the option next to your server for auto-deployments.

After that, you’ll have to copy the Webhook URL and add it to your GitHub account.

Simply log into your GitHub account in a new browser tab. Then click on your repository and head to the ‘Settings’ tab. From here, you can go to the Webhooks section from the menu on the left and click the ‘Add webhook’ button.

Now paste the webhook URL you copied from the Deploy server settings page in the Payload URL field.

After that, select ‘application/x-www-form-urlencoded’ as the ‘Content type’ from the dropdown:

Next, you can scroll down and select which events should trigger the webhook. You can use the default setting.

Once that’s done, simply click the ‘Add webhook’ button.

É só isso. Seu repositório GitHub agora notificará o Deploy quando houver novas alterações em seu repositório. O Deploy implementará automaticamente essas alterações em seu site.

Esperamos que este artigo tenha ajudado você a aprender como implantar automaticamente alterações de tema do WordPress usando GitHub e Deploy. Você também pode consultar nosso guia sobre como atualizar o jQuery para a versão mais recente no WordPress e como verificar e atualizar para a versão mais recente do WordPress.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.