O GitHub é um serviço muito utilizado por profissionais de tecnologia. Ele serve para hospedar códigos-fonte de projetos escritos em diversas linguagens, como PHP, JavaScript, HTML, CSS etc.

Por ser um serviço bastante popular, muitos projetos open-source são hospedados lá. Mas o que pouca gente sabe é que também é possível hospedar sites no GitHub.

E o melhor: é grátis!

Conhecido como GitHub Pages, o serviço de hospedagem grátis do GitHub está disponível para todos os usuários do serviço, com as seguintes limitações:

  • 1 GB de espaço em disco
  • 100 GB por mês de transferência
  • Arquivos de até 50 MB (cada)
  • Domínio personalizado (seusite.com)

Empresas como IBM, Microsoft, Twitter e Facebook utilizam para hospedar os sites de seus projetos open-source.

Você pode ver mais exemplos nesta coleção publicada pelo Github.

Como hospedar um site em WordPress no Github Pages?

Para rodar o WordPress, o servidor de hospedagem precisa ter Apache/Nginx, PHP e MySQL instalados.

Mas no Github Pages, só é possível hospedar arquivos estáticos, como HTML, CSS, JavaScript e arquivos de imagem. Ou seja, não é possível executar linguagens de programação server-side, como PHP, Java e C#, muito menos bancos de dados.

Então como posso hospedar meu site em WordPress lá?

Bom, tornando seu site estático. E foi pensando nisso que decidi criar esse tutorial.

O resultado final pode ser visto aqui: https://castroalves.github.io/wp-static-tutorial/

Pré-requisitos

Para fazer esse tutorial, você vai precisar:

  • Uma conta no GitHub
  • Git e WordPress instalados em seu computador
  • Comandos básicos de Git

Importante: vou me concentrar apenas na publicação do site em WordPress no Github Pages. Se quiser seguir o passo-a-passo deste tutorial, já deverá ter os itens acimas prontos pra uso.

Vamos ao nosso tutorial!

Passo 1: Instale o plugin Simply Static

Lembra que eu falei que só é possível hospedar arquivos estáticos no GitHub Pages?

O Simply Static é um plugin que transforma um site em WordPress em um site estático. Ele varre todas as páginas do site e gera os arquivos necessários para o site funcionar sem precisar de Apache/Nginx nem MySQL.

Esse é o plugin que vai fazer nossa mágica acontecer!

Para instalar o Simply Static, siga os passos a seguir:

  1. No painel do WordPress, vá em Plugins > Adicionar Novo
  2. Digite “Simply Static” na busca
  3. Clique em Instalar
  4. Por fim, clique em Ativar.

Simply Static Settings

O próximo passo é configurar o Simply Static. No menu à sua esquerda, clique em Simply Static e depois em Settings.

Na aba General, preencha os campos da seguinte forma:

Destination URLs

  1. Selecione a opção “Use absolute URLS”
  2. Preencha o campo com a URL de sua conta no GitHub Pages. Normalmente, ela é formada por https://seulogin.github.io/nome-do-repositorio. No caso desse tutorial, a minha URL é https://castroalves.github.io/wp-static-tutorial.

Obs.: O nome do repositório será usado mais adiante, então use algo que possa se lembrar.

Simply Static Delivery Method

Delivery Method

  1. Selecione a opção Local Directory para salvar os arquivos em seu computador
  2. Coloque o caminho da pasta onde os arquivos serão salvos. Por convenção, eu criei uma pasta chamada output dentro da pasta wp-content. Meu caminho ficou: /Users/Cadu/workspace/wpstatic/wp-content/output/

Clique em Save Changes para salvar as configurações.

Passo 2: Configure as URLs amigáveis

Esse passo é essencial para que seu site funcione. E ainda vai ajudar no SEO!

Para simplificar o que são URLs amigáveis, observe os links abaixo:

  • http://seusite.com/?p=123
  • http://seusite.com/receita-de-macarrao-com-carne-moida

Se você fosse abrir esses links, qual deles seria mais fácil saber do que se trata?

Aposto que você respondeu a segunda opção. Pois ela é um exemplo de URL amigável. Entendeu?

Configurar URLs Amigáveis

Então vamos configurar as URLs de seu site.

  1. No menu à esquerda, vá em Configurações > Links Permanentes
  2. Selecione a opção Estrutura Personalizada
  3. Preenche o campo com /%postname%.html
  4. Clique em Salvar

Passo 3: Exporte os arquivos estáticos

Chegou a hora de criar os arquivos que serão publicados no GitHub Pages. É bastante simples:

  1. No menu à esquerda, acesse Simply Static > Generate
  2. Clique em Generate Static Files
  3. Aguarde até que os arquivos sejam gerados

Se tudo tiver ocorrido como esperado, o box de Activity Log exibirá informações parecidas com essas:

[2018-05-04 08:38:40] Setting up
[2018-05-04 08:38:41] Fetched 59 of 59 pages/files
[2018-05-04 08:39:02] Copied 51 of 51 files
[2018-05-04 08:39:02] Destination URL: //seulogin.github.io/wp-static-tutorial/
[2018-05-04 08:39:02] Wrapping up
[2018-05-04 08:39:02] Done! Finished in 00:00:23

Passo 4: Publique seus arquivos no GitHub Pages

Para publicar seu site no GitHub Pages, você vai precisar:

  • Criar um novo repositório no GitHub, onde os arquivos de seu site serão hospedados
  • Conectar a pasta onde os arquivos estáticos estão armazenados em seu computador com o repositório do GitHub
  • Fazer upload dos arquivos para o seu repositório no GitHub

Esse passo exige que você tenha conhecimentos básicos dos comandos do Git. Se não tiver, basta seguir os passos abaixo.

1. Crie um novo repositório no GitHub, chamado wp-static-tutorial (ou o nome que você usou no passo 1)

2. Abra o Terminal e navegue até a pasta onde os arquivos estáticos estão armazenados

$ cd /Users/Cadu/workspace/wpstatic/wp-content/output

3. Inicialize um repositório local do Git

$ git init

4. Conecte seu repositório local ao repositório remoto no GitHub

$ git remote add origin https://github.com/seulogin/wp-static-tutorial.git

5. Faça upload dos arquivos para o GitHub

$ git add .
$ git commit -m 'Publicando meu blog no GitHub'
$ git push -u origin master

Passo 5: Ative o GitHub Pages

Estamos a um passo de publicar o seu site em WordPress no GitHub!

Faça o seguinte:

  1. Acesse a página de seu repositório no GitHub
  2. Clique na aba Configurações
  3. Role a página até a seção GitHub Pages
  4. Selecione o branch onde estão armazenados os arquivos do site. No meu caso, coloquei no Master.
  5. Clique em Salvar.

Assim que você salvar, a URL de seu site será exibida na tela, como pode ser visto na imagem abaixo.

Pronto! Seu site está finalmente no ar!

Para ver o site criado neste tutorial, acesse https://castroalves.github.io/wp-static-tutorial/

Conclusão

O GitHub Pages é uma excelente opção para sites e blogs pequenos feitos em WordPress. Além da hospedagem grátis, é possível adicionar um domínio personalizado e você não precisa se preocupar com quedas de servidores.

Se você gostou desse tutorial, deixe sua estrelinha no GitHub e compartilhe em suas redes sociais.