Deploy Jekyll Site Usando o Git

Nesse artigo você aprenderá como criar um servidor para deploy do Jekyll usando o Git e a DigitalOcean. Uma forma inteligente de programar e automatizar sua rotina de deploy.

Usar o Git para realizar o deploy de um site é bem mais conveniente e moderno. Aqueles que usam a ferramenta Jekyll já estão acostumados com o conceito, visto que na documentação oficial já existe um exemplo de como realizar o deploy de um site para o Github Pages usando o Git.

O problema dos exemplos disponíveis na documentação oficial do Jekyll, é que os mesmo usam os ganchos post-update ou post-receive do Git. Nada conta eles, porém é bem mais simples utilizar o pre-push para o envio, ao invés de ter que realizar inúmeras configurações no lado do servidor.

Outra crítica é quanto o uso do Github Pages, apesar de grátis (o que sempre é bom), ele é bem limitado quanto aos plugins e recursos disponíveis. Um site moderno faz o uso de inúmeros plugins e conceitos que o Github Pages não suporta nativamente.

Obviamente o melhor caminho é contratar uma hospedagem própria e realizar o deploy da aplicação lá. Porém em diversas empresas que presto consultoria o processo de deploy ainda é antiquado. Geralmente os administradores compilam os sites e enviam através do FTP para o servidor. Um processo lento e suscetível a falhas humanas.

Nesse artigo vou explicar como alcançar o mesmo objetivo de um FTP usando apenas o Git e assim facilitar a vida dos desenvolvedores. Os requisitos para acompanhar esse artigo são simples e o primeiro deles é o conhecimento do Git e o segundo e o conhecimento de como criar uma droplet na DigitalOcean, sabendo as duas coisas o processo será bastante simples.

Primeiro passo e instalar as ferramentas necessárias em seu servidor para que o mesmo consiga entregar páginas HTML e também garantir que o Git esteja instalado e configurado em seu servidor.

Instalando e Configurando o Apache na DigitalOcean

Com seu servidor já criado, vamos começar instalando o apache, nosso objetivo e permitir que o mesmo responda a requisições web e entregue o conteúdo estático de seu site. Execute o comando abaixo para que o apache seja instalado em seu servidor.

sudo apt update
sudo apt install apache2 -y

Você será solicitado a digitar a senha de root (caso já não seja root), após digitá-la, a instalação do Apache vai começar. Ao finalizar basta acessar o IP de seu servidor que você encontrará uma página semelhante a da imagem abaixo.

Para que apache saiba como encontrar os arquivos de seu site e como entregá-los aos usuários, é necessário habilitar o novo site. Para isso execute o comando abaixo para criar a estrutura de pastas necessárias. Lembre-se de alterar todas ocorrências de exemplo.com.br para o endereço de seu site.

sudo mkdir -p /var/www/exemplo.com.br/public_html

Com a estrutura de pastas criadas, vamos dar as permissões necessárias. Execute o comando abaixo para alterar o dono da pasta public_html disponível dentro de exemplo.com.br para o usuário atual.

sudo chown -R $USER:$USER /var/www/exemplo.com.br/public_html

Agora execute o comando abaixo para definir as permissões ideais para os arquivos no servidor.

sudo chmod -R 755 /var/www

Agora é hora de configurar o Virtual Host para seu site, execute o comando abaixo para criar um novo arquivo de configuração.

sudo nano /etc/apache2/sites-available/exemplo.com.br.conf

Copie os dados abaixo e cole no arquivo que abrimos anteriormente.

<VirtualHost *:80>
    ServerName exemplo.com.br
    ServerAlias www.exemplo.com.br
    ServerAdmin webmaster@localhost
    DocumentRoot /var/www/exemplo.com.br/public_html
    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

Depois de colar as informações acima pressione Ctrl+x para sair do editor de texto e, quando solicitado, pressione a tecla Y e em seguida o Enter para salvar as alterações.

Digite o comando abaixo para habilitar o arquivo de configuração.

sudo a2ensite exemplo.com.br.conf

Reinicie o serviço do Apache com o comando abaixo para aplicar as configurações novas.

sudo service apache2 restart

Pronto a parte do Apache já se encontra completamente pronta.

Configurando o Git para deploy automático

Você precisará configurar o Git em duas pontas, a primeira delas é em sua máquina local e a segunda no servidor. Vamos começar configurando sua máquina local para detectar o momento exato que você fará um push do seu código, e antes de enviar os arquivos ao seu repositório remoto Git, compilar o Jekyll e enviar o conteúdo da pasta _site para o seu servidor de aplicação.

É importante entender o conceito de trabalhar com dois servidores, o seu push original tem como objetivo enviar seu código fonte ao repositório remoto Git, por exemplo o Github. Antes de realizar o envio ao repositório remoto do Git, vamos rodar um segundo script automático que vai enviar o seu código compilado ao seu servidor de aplicação, onde seu site realmente está instalado.

Configurando o Git na máquina local

Primeira coisa a se fazer é criar um arquivo chamado pre-push com o conteúdo abaixo e adicioná-lo aos hooks de seu repositório Git. Para isso entre na raiz do seu repositório Git (você precisa já ter um repositório Git) e crie um arquivo no caminho .git/hooks/pre-push com o código abaixo.

#!/bin/bash

bundle exec jekyll build

cd _site

if [ ! -d ".git" ]; then
  git init
fi

if [[ ! $(git remote) ]]; then
  git remote add live ssh://USUARIO@IP_OU_URL_DO_SERVIDOR/var/repo/exemplo.com.br.git
  git add . && git commit -m "Build" && git push -u -f live master
else
  git add . && git commit -m "Build" && git push -f live master
fi

Lembre-se de alterar USUARIO para seu usuário de acesso remoto via ssh e também alterar IP_OU_URL_DO_SERVIDOR para sua URL ou IP do servidor web onde configuramos o Apache anteriormente.

Apos salvar o arquivo anterior, execute o comando abaixo para torná-lo executável.

sudo chmod +x .git/hooks/pre-push

Ao completar os passos acima você já se encontra com repositório local configurado. Agora vamos configurar o servidor para receber o push e realizar o deploy da aplicação.

Configurando o Git no servidor remoto

Primeiramente acesse seu servidor via SSH e faça a instalação do Git (caso ainda não possua). Para instalar o Git execute o comando abaixo.

sudo apt install git -y

Quando a instalação finalizar, é importante que você configure seus dados dentro do Git, para isso execute os dois comandos abaixo substituindo o nome e o e-mail para os seus dados.

git config --global user.name "Seu nome"
git config --global user.email seu@email.com.br

Com essas informações configuradas, podemos criar um repositório remoto para receber nosso push e fazer o deploy de nosso site. Execute os comandos abaixo para criar um repositório Git em seu servidor e inicializá-lo. Não se esqueça de alterar exemplo.com.br para a URL de seu site, a mesma que usou para configurar o Apache.

cd /var
sudo mkdir repo && cd repo
sudo mkdir exemplo.com.br.git && cd exemplo.com.br.git
git init --bare

Após a execução dos comandos acima vamos criar um novo hook agora no lado do servidor, ele será responsável por pegar os arquivos de nosso site que acabamos de fazer commit e enviar para o local onde o Apache está disponibilizando para os usuários acessarem nosso site. Execute o comando abaxi para criar esse arquivo.

sudo nano hooks/post-receive

Com o arquivo aberto cole o código abaixo para apontar o caminho raiz de nosso site dentro do Apache. Mais uma vez não se esqueça de alterar exemplo.com.br para a URL de seu site.

#!/bin/sh
git --work-tree=/var/www/exemplo.com.br/public_html --git-dir=/var/repo/exemplo.com.br.git checkout -f 

Depois de colar as informações acima pressione Ctrl+x para sair do editor de texto e, quando solicitado, pressione a tecla Y e em seguida o Enter para salvar as alterações.

Execute o comando abaixo para permitir que o script que acabou de criar seja executável.

sudo chmod +x hooks/post-receive

Tudo pronto, deste momento em diante, sempre que realizar um push de seu código fonte Jekyll para o seu repositório remoto o Git vai compilar o código fonte e disponibilizar uma versão atual de seu site no servidor web que configuramos.

Vale lembrar que ao fazer o push do seu código a senha do servidor web será solicitada, tenha ela em mãos ao realizar o push.