Como Integrar o WordPress ao GitHub e Usá-lo para Projetos de Desenvolvimento Web

O GitHub é uma ferramenta essencial para desenvolvedores web. Ao armazenar bancos de dados dos projetos em seu servidor em nuvem, diferentes usuários podem monitorar, gerenciar e modificar esses dados e projetos a qualquer momento.

Integrar o WordPress com o GitHub pode melhorar muito seu processo de desenvolvimento de sites, além de tornar mais eficiente o fluxo de trabalho da sua equipe.

Este artigo vai apresentar todos os detalhes sobre a integração do WordPress com o GitHub. Também vamos explicar por que você deveria utilizar a plataforma do GitHub e oferecer instruções de como integrá-lo com o WordPress. Por fim, ainda vamos dar recomendações de plugins do GitHub para WordPress que vão te ajudar nas suas tarefas de desenvolvimento web.

Por que Você Deve Usar o GitHub para seus Projetos de Desenvolvimento do WordPress

Antes de discutirmos o GitHub, vamos explicar primeiro o que é Git e controle de versões. Esses são conceitos essenciais para entender o GitHub e como ele pode melhorar seu fluxo de trabalho de desenvolvimento de sites.

O Que É Git e Controle de Versões 

O controle de versões, ou version control, é um sistema para monitoramento de alterações em um conjunto de arquivos, como códigos de desenvolvimento de softwares. Ele armazena todas as versões dos arquivos do seu projeto em um repositório, geralmente chamado de repo

Há dois principais tipos de sistemas de controle de versões: centralizado e distribuído

Sistemas de controle de versões centralizados exigem que os usuários se conectem ao repositório principal para fazer alterações. Quando o repositório encontra um problema, os usuários não podem acessá-lo nem modificá-lo.

Por outro lado, os sistemas de controle de versões distribuídos  permitem que os usuários façam modificações sem precisar acessar o repositório central. Assim, os usuários podem clonar o repositório e modificar os arquivos em suas máquinas locais.

Git (Global information tracker) é o mais popular sistema de controle distribuído de versões. Já que o Git é hospedado em um servidor remoto, múltiplas pessoas podem acessar e trabalhar no mesmo projeto de forma simultânea.

Há diversas plataformas de hospedagem Git, mas o GitHub é a mais popular. Ela também oferece recursos adicionais para além das funcionalidades essenciais para o Git.

Quando você estiver desenvolvendo um site WordPress, provavelmente será necessário editar plugins, temas ou arquivos centrais (conhecidos como core files do WordPress). Apesar de poder editá-los com simples editores de textos, esse é um processo tedioso e bastante propenso a erros.

O GitHub cria um controle de versões que garante o backup dos seus arquivos WordPress. Assim, se algo der errado, você não perderá todo o trabalho. Além disso, a plataforma encurta o processo de desenvolvimento web, permitindo que você aplique imediatamente mudanças no servidor.

Importante! O WordPress não recomenda modificar arquivos centrais, exceto pelo arquivo wp-config.php. Você só deve fazer alterações em um arquivo core quando ele estiver com problemas ou corrompido, e nunca sem antes gerar um backup.

Quais São os Benefícios do GitHub

O GitHub oferece muitos benefícios para desenvolvedores de sites e apps, incluindo:

  • Controle de versões. A plataforma do GitHub armazena diferentes versões do seu projeto e monitora todas as mudanças feitas nos arquivos. Quando necessário, você pode identificar essas alterações e reverter os arquivos para a versão anterior.
  • Hospedagem web gratuita. O GitHub também oferece serviços de hospedagem para sites WordPress. Desse modo, você pode aplicar mudanças no site diretamente através do GitHub, aumentando a eficiência do seu projeto de desenvolvimento web.
  • Integração com o WordPress. O WordPress possui vários plugins específicos para o GitHub, e esses recursos podem te ajudar nos processos de desenvolvimento de sites. 
  • Repositórios de plugins e temas do WordPress. Muitos desenvolvedores utilizam repositórios do GitHub para armazenar seus temas e plugins. Se um plugin ou tema não estiver disponível na biblioteca oficial do WordPress, você pode facilmente instalar esse recurso pelo repositório do GitHub. 
  • Intuitivo e amigável para o usuário. A aplicação de desktop do GitHub possui uma interface visual muito simples, o que facilita muito seu uso quando comparado a outros sistemas típicos de linhas de comando Git. Além disso, por possuir uma extensa documentação de apoio, o GitHub é uma excelente opção para iniciantes no mundo do Git.

Como o GitHub Beneficia Equipes Remotas

A principal vantagem em utilizar o GitHub é a facilidade que ele oferece para colaboração em projetos. Isso graças a alguns recursos que são especialmente úteis para equipes com integrantes que trabalham em locais diferentes, como:

  • Repositório baseado em nuvem. O GitHub permite que os usuários copiem o repositório principal em suas máquinas locais. Desse modo, os desenvolvedores podem fazer alterações em modo offline e, depois de concluído o processo, integrá-las com a versão hospedada na nuvem.
  • Ramificações. Git branches simplificam a distribuição de tarefas. Esses recursos permitem que os membros de uma equipe trabalhem em linhas de desenvolvimento independentes de forma simultânea e sem que um interfira com o outro.
  • Pull request. Solicitações pull permitem designar até 10 pessoas para trabalharem em uma tarefa específica. Desse modo, o gerente do projeto pode saber no que outros membros da equipe estão trabalhando e revisar as edições feitas por eles antes de aplicá-las no repositório principal.

Como Criar um Ambiente WordPress Local para Git

Antes de começar a utilizar o GitHub, você deve criar uma versão local do seu site WordPress. Esse site de desenvolvimento serve para você testar alterações, incluindo novos temas, plugins e designs.

As modificações que você fizer no seu site WordPress local não vão afetar o site que está publicado na internet — pelo menos até que você implemente as mudanças e faça o deploy.

Ferramentas do WordPress Local

Use uma ferramenta de desenvolvimento web local para criar um ambiente WordPress no seu computador. Baseado nas funções, há dois tipos principais de ferramentas: de uso geral e de desenvolvimento WordPress. 

Ferramentas de uso geral, ou general-purpose, permitem que você crie qualquer ambiente de desenvolvimento web. Elas suportam todos os sistemas de gerenciamento de conteúdo (CMS), mas você deve instalar manualmente aquele que desejar. 

Ainda que você possa utilizar ferramentas de uso geral para desenvolver projetos do WordPress, recomendamos utilizar ferramentas de desenvolvimento específicas para esse CMS. Elas já vêm com o WordPress pré-instalado, tornando-as mais convenientes para realização dos seus projetos.

Neste tutorial, vamos utilizar a Local WP para nossos exemplos. Essa ferramenta de desenvolvimento específica para WordPress possui uma GUI (Interface Gráfica do Usuário), tornando seu uso mais simples e ideal para desenvolvedores web iniciantes. Siga o passo-a-passo indicado abaixo para configurar o Local WP

  1. Navegue até a página de lançamentos de versões do Local WP
  2. Faça o download da última versão do Local WP que corresponda ao seu sistema operacional. 
Opções de download do LocalWP com destaque para a opção mais recente do Windows
  1. Rode o sistema de instalação, o Local installer. Depois, siga os passos do guia de instalação correspondente ao seu sistema operacional.

Depois que concluir o processo de instalação do Local WordPress, crie um site de desenvolvimento em seu computador:

  1. Abra o Local WP. Neste momento, você pode pular o passo de criação de conta – basta clicar no botão com o X.
Página inicial do LocalWP com destaque para o botão de pular etapa de criação de conta
  1. Na janela de termos de serviço (Terms of Service) marque a caixa de seleção indicada e clique em I agree (Eu Concordo) para dar continuidade.
  2. No painel do Local WP, clique em Crate a new site para criar um novo site.
Criando novo site no LocalWP
  1. Selecione novamente a opção Create a new site e então clique em Continue para prosseguir.
Seleção da opção de criar novo site do zero
  1. Insira o nome do seu site no campo website name e clique novamente em Continue.
Campo para inserir nome do site no LocalWP
  1. Determine as configurações do seu ambiente local. Caso esteja incerto com o que escolher nesse passo, clique em Preferred (Preferido). Depois, selecione a opção Continue.
Seleção da opção "preferred" para configuração do site no LocalWP
  1. Preencha os detalhes da sua conta WordPress. Caso tenha um multisite WordPress, selecione a opção Yes, localizada na seção de Advanced options (Opções Avançadas). Depois, clique em Add Site (Adicionar Site) para confirmar, e então seu novo site será exibido no painel do Local WP. 
Campos para preenchimento de credenciais do WordPress

Uma vez que seu ambiente local estiver pronto, instale um editor de texto para modificar os dados do seu site. Com o Local WP, você pode instalar o VSCode diretamente a partir do painel:

  1. Navegue até o painel de controle do Local WP e acesse o menu de add-ons para visualizar os elementos adicionais (esse botão é representado por um ícone de peça de quebra-cabeça na barra lateral esquerda da sua tela).
Painel de controle do LocalWP
  1. Então, clique em Xdebug + VS Code.
Painel de controle do LocalWP com destaque para a opção Xdebug + VS Code
  1. A janela de instalação será exibida. Basta clicar em Install Add-on para adicionar o recurso.
Painel do LocalWP com destaque para o botão de instalação do add-on
  1. Aguarde até que o Local WP conclua a instalação e reinicie o sistema. 

Como Instalar o Git Localmente

Primeiramente você deve instalar o Git de maneira local antes de usar o repositório remoto do GitHub. Seu repositório Git local é onde você vai realizar as alterações antes de aplicá-las no GitHub. 

Um computador rodando a versão mais recente do Linux ou macOS pode já possuir o Git pré-instalado. Você pode conferir essa informação sobre sua máquina digitando git –version em seu Terminal.

Para o sistema operacional Windows, digite git version no seu Prompt de Comando.

Se o Git já estiver instalado, sua aplicação de linha de comando irá exibir o número da versão Git. Caso contrário, a mensagem exibida vai informar que Git é um comando desconhecido, e poderá perguntar se você deseja instalar ele.

Você pode fazer o download manual do instalador Git e rodá-lo no macOS, Linux, ou Windows. Alternativamente, você pode baixar um dos clientes Git GUI, caso prefira trabalhar com uma interface amigável ao invés de trabalhar com linhas de comando. 

Os passos de instalação do Git podem ser diferentes, dependendo do seu sistema operacional. Esse tutorial vai indicar o passo-a-passo para instalar o Git na interface de linha de comando do Windows:

  1. Faça o download do sistema de instalação do Git para Windows.
  2. Rode o instalador. Clique em Next (Próximo) para avançar e depois em Finish (Encerrar) para completar o processo de instalação utilizando a opção padrão do sistema.
  3. Abra o menu Iniciar do Windows e busque por Git Bash. Pressione a tecla Enter para abrir.
  4. Verifique se o Git já está instalado ao executar o comando git version.
Rodando comando git version no Windows

Agora, crie um repositório local utilizando o Git Bash. Caso você não esteja familiarizado com o funcionamento do sistema Git, leia nosso artigo de comandos Git básicos para aprender suas funcionalidades primordiais.

Por exemplo, abaixo indicamos como criar um repositório para o tema padrão do WordPress, o Twenty Twenty:

  1. Navegue até o diretório wp-content e abra a pasta do tema twentytwenty.
  2. Clique com o botão direito em qualquer local da pasta e selecione a opção Git Bash Here.
Pasta do tema selecionado com destaque para a opção Git Bash Here
  1. Uma janela do Git Bash será exibida. Digite git init e pressione a tecla Enter.
Rodando o comando git init
  1. Depois, digite git add . e novamente pressione o Enter.
Rodando o comando git add.
  1. Por fim, insira o comando git commit -m “message” e tecle Enter. Você deve substituir a palavra “message” por qualquer frase que desejar, mas lembre-se de que ela deve ser clara e descritiva.
rodando o comando git commit -m “the first commiit”

Se o processo foi realizado com sucesso, uma pasta oculta .git deverá ser exibida. 

destaque para a pasta oculta nomeada .git na pasta do tema

Como Criar e Utilizar seu Primeiro Repositório GitHub

Agora você vai aprender a criar um repositório no GitHub e carregar a versão local nele. O repositório GitHub é onde todos os membros de uma equipe vão trabalhar e aplicar suas respectivas alterações no projeto. 

Como Registrar uma Conta no GitHub

Se você já possui uma conta no GitHub, pule esta seção e entre em sua conta. Caso contrário, siga o passo-a-passo indicado abaixo:

  1. Em seu navegador, acesse o site do GitHub e clique no botão de Sign up (Cadastro) localizado no canto superior direito da página para se cadastrar. 
Página inicial do site GitHub com destaque para o botão de Sign Up
  1. Insira seu endereço de email e clique Continue para prosseguir.
  2. Em seguida, crie um nome de usuário e uma senha nos campos username e password. Determine se você deseja receber novidades e atualizações selecionando a caixa correspondente. Clique em Continue e siga para o próximo passo.
Cadastrando uma conta no GitHub
  1. Verifique sua conta ao clicar no botão Start Puzzle (Começar Quebra-Cabeças) e resolver o quebra-cabeças. Em seguida, clique no botão Create Account (Criar Conta).
  2. Acesse sua caixa de emails e localize o código enviado pelo GitHub. Insira esse código na caixa Enter code (Inserir Código) da sua conta do GitHub e clique em Enter.
  3. Responda algumas questões para configurar automaticamente sua nova conta GitHub com base nas suas preferências. Caso prefira pular essa etapa, clique em Skip personalization (Pular personalização).
Configurando conta GitHuib - destaque para a opção de pular etapa de personalização
  1. Escolha entre as opções de conta gratuita ou conta de time: Free Account ou Team Account.
  2. Aguarde até que o GitHub te redirecione para a página da sua conta.

Como Criar seu Primeiro Repositório GitHub

Para criar um novo repositório, entre em sua conta GitHub. Depois, realize o processo indicado a seguir em qualquer uma das páginas:

  1. Clique no ícone + localizado no canto direito superior da tela. A partir do menu suspenso, selecione a opção New repository.
Painel do GitHub com destaque para a opção de novo repositório
  1. Já na página específica para criar um novo repositório, selecione um responsável pelo projeto no campo Owner e insira o nome do seu repositório no campo Repository name. Você também tem a possibilidade de adicionar uma descrição para o seu repositório no campo Description.
  2. Selecione as configurações de visualização do seu projeto na opção de repository’s visibility. Se precisar de mais informações, verifique o guia de repositórios do GitHub.
Criando novo repositório no GitHub
  1. Já que vamos enviar o repositório local no GitHub, você pode pular a etapa de “Initialize this repository with:” e clicar diretamente em Create repository. Assim que seu repositório for criado, o GitHub exibirá seu novo repositório vazio. 
Definindo configurações do novo repositório GitHub com destaque para o botão de Criar Repositório

Como Criar seu Primeiro GitHub Commit

Depois de criar um repositório GitHub, você deve criar seu primeiro GitHub commit – fazendo o envio dos dados do seu repositório local:

  1. Acesse seu repositório GitHub.
  2. Na seção de configuração rápida (quick setup), localize e copie a URL do repositório.
Informações do novo repositório GitHub
  1. Abra o Git Bash. Digite git remote add origin URL e pressione Enter. Não se esqueça de substituir a palavra URL pelo link do seu repositório, copiado no passo anterior. 
Rodando o comando git remote add origin URL como exemplo - origin URL ocultada
  1. Depois, digite o comando git push -u origin master e clique em Enter.
Rodando o comando git push -u origin master
  1. A janela para conectar com o GitHub será exibida. Selecione a opção de entrar com o navegador: Sign in with your browser (Fazer login com seu navegador).
Janela de login do GitHub com destaque para a opção de entrar pelo navegador
  1. Entre na sua conta inserindo seu usuário e senha Github nos campos username e password. Clique em Sign in (Fazer login). 
  2. Na tela de autenticação, selecione a opção Authorize GitCredentialManager.
Autorizando o gerenciador de credenciais do Git
  1. Abra seu repositório GitHub e o arquivo do seu repositório local deve aparecer na tela. 

Depois de fazer alterações no seu repositório local, carregue-as no GitHub pelas opções de git push. O push vai atualizar seu repositório GitHub com as novas modificações a partir da versão local.

Como Enviar as Atualizações do GitHub para seu Computador Local

Depois de fazer o push dos arquivos do seu repositório local para o GitHub, outros usuários poderão fazer alterações neles. Para aplicar essas modificações no seu repositório local, você deve fazer o processo conhecido como fetch das atualizações a partir do GitHub.

Fazer fetch de um repositório no GitHub quer dizer baixar e aplicar as atualizações no seu repositório local. Apesar do comando pull também fazer o download do repositório atualizado, ele não une automaticamente os dados com os arquivos em que você está trabalhando.

Os passos para rodar o comando fetch e obter as atualizações a partir do GitHub são:

  1. Abra a pasta do seu projeto. No exemplo do nosso artigo, vamos acessar a pasta do tema Twenty Twenty do WordPress.
  2. Clique com o botão direito do mouse em qualquer local da página e selecione a opção Git Bash Here.
Pasta do tema selecionado com destaque para a opção Git Bash Here
  1. Digite o comando git fetch URL e pressione Enter. Lembre-se de substituir a palavra URL pela URL do seu projeto GitHub. Seu repositório local deverá ser atualizado neste momento.
Rodando o comando git fetch URL - URL oculta

Como Usar o GitHub para Desenvolvimento WordPress 

Depois de preparar todas as ferramentas, você pode começar a utilizar o GitHub para trabalhar em seus projetos de desenvolvimento de sites WordPress. Abaixo indicamos um exemplo de fluxo de trabalho para alterar o tema do seu site. 

  1. Busque e acesse (fetch) o repositório GitHub do tema do seu site.
  2. Faça as alterações desejadas no tema e teste-o no servidor local. 
  3. Localize e entre na pasta do temaclique com o botão direito em qualquer local da página → selecione a opção Git Bash Here.
  4. Insira o comando git add e pressione Enter. Isso vai informar ao Git que você deseja incluir as alterações para o próximo commit.
  5. Aplique as mudanças no repositório local através da execução do comando git commit.
  6. Faça o push do seu repositório local atualizado no GitHub através do comando git push -u origin master. Lembre-se de substituir a palavra master com o nome do branch quando estiver fazendo o push das alterações para outro branch.
  7. Uma vez que o processo push for concluído, aplique as modificações no site publicado através do deploy do seu repositório remoto. 

Há muitas maneiras de fazer o deploy repositórios remotos no servidor de produção publicado. A forma mais conveniente é utilizando um plugin GitHub do WordPress, como o WP Pusher.

Abaixo indicamos os passos necessários para utilizar o WP Pusher e fazer o deploy do seu repositório GitHub no site publicado:

  1. Baixe e instale o plugin do WordPress WP Pusher. 
  2. No menu lateral do seu painel WordPress, navegue até a seção do WP Pusher.
Painel do WordPRess com destaque para o menu do WP Pusher
  1. Localize a aba do GitHub e clique na opção Obtain a GitHub Token.
Painel do WP Pusher com destaque para o botão de obter token GitHub
  1. Uma janela pop-up de autenticação será exibida. Autorize o WP Pusher para que o plugin tenha acesso à sua conta GitHub. 
  2. Copie o token da janela de autenticação e cole-o no WordPress. 
  3. Clique no botão Save GitHub token para salvar e confirmar.
Painel do WP Pusher com destaque para o botão de salvar token GitHub
  1. Navegue pelo menu lateral do WordPress → WP Pusher Install theme ou Install plugin. No exemplo do nosso guia, vamos optar pela primeira opção, a instalação de um tema. 
  2. Preencha o campo Theme repository com o nome do seu repositório GitHub.
  3. No campo Repository branch, insira a opção main.
  4. Por fim, clique no botão Install theme para instalar o tema.
Instalando tema pelo WP Pusher
  1. Depois da instalação, navegue para Aparência → Temas, e então Ative seu novo tema instalado.

Sempre que você atualizar seus repositórios com modificações, acesse o seu painel do WordPress e vá até WP Pusher Plugins ou ThemesUpdate para atualizar. Caso você não realize esse processo, as alterações não serão exibidas no site que está publicado.

Recursos Extras para Integrações do GitHub com o WordPress 

Além de melhorar o workflow dos seus projetos de desenvolvimento web, integrar o WordPress com o GitHub ainda  pode oferecer outros benefícios. Por exemplo, você pode instalar plugins ou temas a partir do próprio GitHub e hospedar seu site nesta plataforma. 

Como Instalar Plugins e Temas WordPress pelo GitHub

Desenvolvedores WordPress geralmente possuem repositórios no GitHub para seus plugins e temas. Se esses temas ou plugins estiverem indisponíveis no diretório oficial do WordPress, você pode instalá-los através do GitHub.  

Os passos para instalar um tema e um plugin são bastante similares. Abaixo indicamos os passos necessários para baixar e instalar um plugin WordPress pelo GitHub:

  1. Abra o GitHub e localize o plugin que você deseja instalar.
  2. Na página do repositório do plugin no GitHub, clique em Code Download ZIP.
Fazendo download de arquivo ZIP no repositório GitHub do plugin
  1. Selecione o diretório que deseja e clique em Save para salvar.
  2. Depois que o download for concluído, instale o plugin do WordPress manualmente. 

GitHub Pages para Hospedagem WordPress Estática

O GitHub oferece um serviço de hospedagem gratuito chamado GitHub Pages. Ele permite que você crie um site diretamente a partir do seu repositório GitHub remoto.

Contudo, o serviço converte seu site WordPress em um site estático, omitindo funcionalidades dinâmicas que ele possa ter. Um site estático é ideal para casos de portfólios simples, blogs ou páginas de demonstração de projetos. 

Além disso, sites hospedados no GitHub Pages utilizam um domínio github.io por padrão. Para alterar essa configuração, você deve comprar um domínio com uma registradora, como a Hostinger. 

Para hospedar seu site WordPress de forma estática no GitHub Pages, siga o guia rápido indicado a seguir. 

1. Crie um Novo Repositório GitHub Pages

Um repositório GitHub Pages é onde você vai armazenar os dados do seu site estático. Criar um deles exige os mesmos passos e configurações da criação de um repositório GitHub normal. Entretanto, nesse caso, o nome do repositório será acompanhado do domínio que comentamos anteriormente: username.github.io.

Depois de criar um repositório remoto no GitHub Pages, faça um clone dele na sua máquina local:

  1. Acesse o GitHub e navegue até a página do repositório.
  2. Clique em Code e copie a URL do repositório.
Copiando a URL do repositório GitHub
  1. Navegue até a pasta onde você deseja salvar o repositório.
  2. Clique com o botão direito em qualquer local da página e selecione a opção Git Bash Here.
  3. Digite o comando git clone URL e pressione Enter – lembrando de substituir a palavra URL pela URL copiada no passo 2. Em seguida, uma nova pasta com o nome do seu repositório GitHub Page deverá ser exibida.
Rodando o comando git clone URL - URL oculta

2. Crie um Site WordPress 

O site WordPress será seu ambiente de desenvolvimento. É onde você fará as alterações nos conteúdos e design do site publicado e hospedado no GitHub Pages.

Utilizando ferramentas como o Local, você pode hospedar seus sites WordPress GitHub Pages em um servidor local. De outro modo, você pode utilizar um serviço para hospedar sites e permitir que outros usuários WordPress acessem os sites de forma remota. 

Quando estiver hospedando seu site de desenvolvimento de maneira remota, configure-o como privado para evitar que usuários o visitem enquanto ele ainda está sendo construído.

Confira nosso tutorial WordPress para aprender mais sobre a instalação e utilização desse CMS. Uma vez que o site for criado, configure seu conteúdo e design de acordo com as suas preferências. 

3. Converta o Site WordPress em HTML Estático

O GitHub Pages suporta apenas sites estáticos, e já que o WordPress é dinâmico, você deve converter suas páginas em páginas estáticas antes de fazer o lançamento do site. 

Há diferentes métodos para converter seu site WordPress, mas utilizar um plugin é o mais comum deles. Neste tutorial, vamos utilizar o plugin freemium Simply Static.

Para converter um site WordPress através do plugin Simply Static, você primeiramente deve configurá-lo:

  1. Baixe e instale o plugin Simply Static.
  2. Navegue até seu painel WordPress e no menu lateral selecione → Simply Static Settings General.
Configurações gerais do plugin Simply Static
  1. Na seção Destination URLs, selecione a opção Use absolute URLs (Usar URLs Absolutas).
  2. Insira a URL do seu site hospedado do GitHub Pages. Para sites que utilizam o domínio gratuito github.io domain, a URL será username.github.io (sendo “username” seu nome de usuário).
  3. Na seção Delivery Method, selecione Local Directory (Diretório Local).
  4. Insira o caminho local para o clone do seu repositório do GitHub Pages. É aí onde o Simple Static irá salvar os arquivos HTML do seu site. 
  5. Por fim, clique em Save Changes para salvar as configurações. 
Configurando o plugin Simply Stratic - destaque para o botão de salvar alterações

Depois que o processo de configuração do plugin for concluído, é hora de converter seu site WordPress:

  1. Navegue até o menu lateral do seu painel WordPressSimply Static Generate.
  2. Clique no botão Generate Static Files para gerar os arquivos estáticos. Aguarde até que o processo de exportação seja concluído.
Painel do plugin Simply Static com destaque para o botão de gerar arquivos estáticos
  1. Abra seu repositório local do GitHub Pages. Se a exportação foi feita com sucesso, os arquivos HTML deverão ser exibidos. 

4. Faça o Deploy do Site no GitHub Pages

O próximo passo é fazer o deploy do seu site WordPress estático no GitHub Pages para poder colocá-lo no ar. Diferentemente de outros serviços de hospedagem, ele irá automaticamente lançar as atualizações no site publicado assim que você fizer o push do seu repositório gitHub Pages.  

Para publicar seu site, será necessário rodar o comando push nos arquivos HTML para o seu repositório GitHub. 

  1. Copie a URL do seu repositório GitHub Pages.
  2. Abra a pasta do seu repositório local
  3. Clique com o botão direito em qualquer local da página e selecione a opção Git Bash Here.
  4. Insira o comando git remote add origin URL e pressione Enter. Se a mensagem de erro: remote origin already exists for exibida, significa que você já adicionou o repositório remoto. Nesse caso, basta seguir para o próximo passo. 
  5. Envie todos os arquivos para o repositório GitHub ao digitar o comando git push origin -u master e pressionar Enter.
  6. Se o GitHub solicitar que você entre na conta, selecione a opção Sign in with your browser e insira seu nome de usuário e senha no navegador (campos username e password).

Depois de concluir o processo e enviar todos os arquivos HTML para o seu repositório GitHub Pages, seu site estará no ar e você poderá acessá-lo como publicado.

Sempre que você fizer modificações no site, crie novos arquivos HTML e faça o push deles no repositório GitHub Pages. Caso esteja utilizando o cliente GitHub para desktop, clique na opção Push Origin.

Se você prefere fazer o deploy automático dos arquivos HTML do seu site no GitHub Pages, considere contratar a versão premium do plugin Simply Static – seus valores começam a partir de US$ 99,99.

Plugins Populares WordPress para GitHub 

Usar plugins pode otimizar ainda mais seu fluxo de trabalho, tornando seus projetos de desenvolvimento WordPress mais eficientes. Abaixo indicamos nossas principais escolhas quanto aos melhores plugins GitHub do WordPress, cada um com diferentes propósitos:

1. WP Pusher

Página inicial do plugin WP Pusher

O WP Pusher ajuda a fazer o deploy de um novo tema ou plugin no seu site WordPress publicado, utilizando a URL do repositório. Ele permite que você instale temas e plugins diretamente do painel do WordPress. 

O WP Pusher garante um fluxo de trabalho mais eficiente para usuários que atualizam seus plugins e temas com frequência. Além disso, o plugin em questão também é muito útil para instalar temas e outros plugins disponíveis na biblioteca do WordPress.

Para instalar um tema WordPress utilizando o WP Pusher, simplesmente insira o link do repositório e clique no botão Install. O WP Pusher também possui seções específicas de temas e plugins (Themes e Plugins) que listam todos os plugins e temas instalados no site. 

Este popular plugin está disponível numa versão gratuita e em versões pagas. O plano premium oferece mais recursos e custa a partir de US$ 99/ano. Ele também conta com uma garantia de reembolso de 30 dias. 

Principais Recursos:

  • Integração multi-plataforma. O WP Pusher pode ser integrado com diversos serviços de repositórios baseados em Git, incluindo o GitHub, GitLab, e Bitbucket.
  • Push-to-deploy. Recurso que automaticamente atualiza plugins ou temas toda vez que os usuários fizerem o push
  • Suporte ao WordPress Multisite. Esse plugin irá funcionar em todos os sites numa rede WordPress multisite.

2. Git Updater

Banner do plugin Git Updater

O Git Updater é um plugin simples que automatiza atualizações para temas, plugins e pacotes de idiomas do WordPress hospedados no GitHub. 

O Git Updater deve possuir acesso autorizado aos repositórios para funcionar corretamente. Além disso, ele exige que os arquivos style.css dos temas e plugins incluam linhas de código específicas.

Este plugin é capaz de verificar periodicamente novas atualizações em seus repositórios de plugins ou temas. Caso ele detecte uma nova versão, ele fará o deploy automático da atualização no servidor live.

O Git Updater também oferece uma versão gratuita e planos pagos. As versões premium começam em US$ 30/ano e contam com recursos adicionais, como instalações remotas e troca de branches.

Principais Recursos:

  • Atualizações automáticas. Atualiza automaticamente um tema, plugin ou pacote de idioma quando uma nova versão aparecer no repositório GitHub. 
  • Instalação remota de plugins e temas. Permite que você instale temas e plugins baseados no GitHub através do seu painel de controle do WordPress.
  • Suporte a repositórios privados e públicos. Monitora atualizações de repositórios públicos e também privados. 
  • Branch switching. Os usuários podem escolher se o Git Updater deve monitorar o master branch ou outros branches de desenvolvimento. 

3. GitHub Embed

Banner do plugin GitHub Embed disponível no diretório oficial de plugins do WordPress

O GitHub Embed é um plugin de código aberto para incorporar informações do GitHub no seu site. Atualmente ele suporta:

  • Repositórios
  • Perfis de usuários
  • Resumo de etapas de projetos (milestones summary)
  • Contribuidores dos projetos

Para incorporar informações do GitHub no site, basta colar a URL do repositório no seu site. Esse plugin automaticamente busca e aplica quaisquer atualizações feitas nas informações que foram incluídas. 

O GitHub Embed é especialmente útil para sites de projetos. Com este plugin, os desenvolvedores podem manter as informações sobre seus projetos atualizadas no site. 

E o melhor de tudo é que este plugin e todas as suas funcionalidades são completamente gratuitas. 

Principais Recursos:

  • Personalização. O plugin possui classes de estilo (styling classes), permitindo que seus usuários personalizem as informações do GitHub que foram adicionadas. Assim, o design do site fica coerente. 
  • Atualizações automáticas de informações. O plugin GitHub Embed atualiza automaticamente as informações incorporadas toda vez que um usuário fizer alguma alteração nelas pelo GitHub. 
  • Incorporação de múltiplas informações. O processo de embedding das informações pode ser feito para múltiplos conjuntos de dados no site.
  • Resumo de milestones. Este plugin oferece detalhes sobre o progresso do seu projeto, incluindo erros, datas de prazos e descrição de etapas.

Conclusão

O GitHub é um serviço de hospedagem Git que permite que os desenvolvedores colaborem em projetos de forma mais eficiente. A plataforma possui controle de versões, monitoramento e recursos de branching, possibilitando que projetos de desenvolvimento sejam feitos de forma simultânea e organizada. 

Integrar o WordPress com o GitHub vai melhorar muito o workflow dos seus processos de desenvolvimento. Este artigo passou por todos os passos necessários para fazer essa integração entre WordPress e GitHub. 

A utilização do GitHub permite que os usuários instalem plugins WordPress a partir dos seus repositórios e hospedem sites WordPress no GitHub Pages. Adicionalmente, plugins como o WP Pusher, Git Updater, e GitHub Embed são capazes de automatizar alguns dos processos de integração.

Esperamos que este tutorial tenha te ajudado a entender melhor como usar o GitHub para otimizar o seus projetos de desenvolvimento WordPress. Caso você ainda tenha alguma questão, não hesite em deixar um comentário na seção abaixo.

Author
O autor

Bruna B. Barro

Bruna é formada em relações internacionais pela UFSC e atualmente faz mestrado em sociologia pela UFRJ. Determinada em tornar o conhecimento sobre tecnologia acessível a todas as pessoas, atua como tradutora e redatora freelancer na Hostinger. Tem experiência com tradução, localização, copywriting, gerenciamento de projetos, atendimento ao cliente e escrita acadêmica. No seu tempo livre gosta de assistir séries, cozinhar e jogar jogos de lógica.