Eu já havia criado um Blog no Hugo, e ele estava lindo, rodando localmente na minha máquina. Porém, ele não seria muita coisa se eu não publicasse ele na Internet. Com isso, eu precisava de um Fluxo de Trabalho para publicar esse Blog na Internet.

Esse vídeo do NetworkChuck me trouxe uma luz, mostrando como é o processo dele para publicar no Blog dele, e assim decidi adaptar para o meu uso, e nisso, surgiu esse Tutorial que vocês estão lendo.

Criando o Repositório no GitHub

A primeira coisa que devemos fazer para colocar um Blog criado no Hugo no ar, é criar um repositório no Github. Para isso, clique no botão de “New”…

… e crie um novo repositório. No meu caso, escolhi fazer um repositório privado, o nome e coloquei a descrição. E não há problema nenhum em fazer um Repositório Público para o Blog. Eu que escolhi fazer num repositório privado por preferência minha.

Com isso, o Repositório no Github já estava criado.

Configurando o Repositório Local

Com o Repositório do Github criado, agora é a hora de fazer um Repositório Local. Com isso, devemos ir para a pasta onde o Blog estaria e inicializar um Repositório Local do Git.

git init
git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"

Apenas lembrar de substituir o "Your Name" e o "your.email@example.com" para os seus dados do Github.

Gerando a Chave SSH

Agora temos o Repositório no Github e o Repositório Local. Agora, precisamos de algo para ligar os dois, uma credencial. E aqui, podemos fazer isso de duas formas: HTTPS e SSH.

O modo HTTPS precisa informar o usuário e senha. Apesar de funcionar bem, esse processo pode se tornar cansativo. Porém, com o SSH, não é preciso informar o usuário e senha toda vez que for acessar o Repositório. Apenas precisamos configurar uma única vez, e o SSH cuida das credenciais entre o nosso computador e o Github.

Sendo assim, iremos gerar a chave SSH. É importante substituir o "your_email@example.com" pelo e-mail que está em seu Github.

ssh-keygen -t rsa -b 4096 -C "your_email@example.com"

E assim, a chave será gerada.

Para visualizar ela, basta ir na pasta ~/.ssh e dar um cat id_rsa.pub. Essa é a chave pública que precisaremos para autenticarmos no Github.

Adicionando a Chave SSH no Github

Temos a chave SSH gerada no computador, agora é hora de colocar a nossa chave pública no Github. Para isso, devemos clicar no ícone do usuário e ir em “Settings”…

… depois em “SSH and GPG Keys”…

… ir em “New SSH Key”…

… e colar aquela Chave Pública que geramos. Assim, vá em “Add SSH Key”…

… e assim, a chave estará adicionada no Github.

E para testar se a conexão está funcionando, pode dar um ssh -T git@github.com. Se aparecer essa mensagem, isso quer dizer que a conexão foi feita com sucesso.

Adicionando o Repositório Remoto do Github

Já temos o repositório do Github, o Repositório Local e a chave SSH. Agora é a hora de conectar os dois repositórios. Com isso, entrei na pasta onde está o Blog da Toca do Rapoelho, e já dei o comando para poder adicionar o repositório remoto ¹

git remote add origin git@github.com:rapoelho/blog.git

Primeiro Commit

Primeiramente, precisamos limpar a pasta /public e gerar o site novamente, com esses comandos:

rm -rf public
hugo

Com isso, faremos o primeiro Commit com esses comandos…

git add .
git commit -m "Hello World!"
git push -u origin master

… e com isso, todos os arquivos que estão na pasta local do Blog, estarão no repositório do Github. Aqui, concluímos mais uma etapa desse processo.

Separando o /public do restante

Eu escolhi usar a Hostinger para hospedar o meu Blog, afinal eu já tenho o Cantinho do Romeo hospedado por lá. Porém, a Hostinger não necessita de todos as pastas. Apenas uma pasta importa para a Hostinger: a /public, que é onde ficam todos os arquivos .html, .css e .js gerados.

Para separar essa pasta, precisamos criar uma Subárvore. Com isso, daremos esses comandos que irão separar a pasta /public num outro repositório, o hostinger-deploy, enviar as alterações para o repositório hostinger e excluir o hostinger-deploy.

git subtree split --prefix public -b hostinger-deploy
git push origin hostinger-deploy:hostinger --force
git branch -D hostinger-deploy

Configurando a Hostinger

Agora, a pasta já está separada do restante. Para colocar o Blog no ar, precisaremos configurar a Hostinger. Para isso, você deve criar um novo site na Hostinger. Para isso, vá em “Adicionar Site” e depois em “Site PHP/HTML Personalizado”.

E isso, irá criar um site vazio, pronto para ser utilizado.

Até poderíamos pegar toda a pasta /public que é gerada localmente pelo Hugo e enviar para a Hostinger. Mas queremos automatizar isso, pegando a subárvore hostinger que configuramos lá no Github. Para isso, depois do site criado, vá na lista de Sites da sua Hospedagem da Hostinger, e clique em “Painel de Controle”…

… e no Painel de Controle do seu site, vá na opção “GIT” na Seção “Avançado”…

… e assim como precisamos de uma chave SSH para conectar ao Github sem precisar informar usuário e senha, aqui precisamos gerar uma Chave SSH para a Hostinger se comunicar com o repositório onde está o Blog. Com isso, clique em “Gerar Chave SSH”…

… e com isso, a chave SSH será gerada. Aqui é só repetir os mesmos passos que fizemos para adicionar a chave local para o Github.

Assim, devemos configurar o repositório. Como eu fiz um repositório privado, o formato é git@github.com:<usuário>/<repositorio>.git. Se você optou por um repositório público, o formato é outro, é aquele https://github.com/<usuário>/<repositorio>.git. Depois, informe a Branch onde estará a pasta /public, conforme configuramos acima. E por fim, clique em criar.

E assim, o repositório estará adicionado…

… e o site estará no ar.

Fazendo a Hostinger puxar toda alteração do site

Mas ainda tem uma configuração a ser feita. Da maneira que tudo está, você terá que ir no painel da Hostinger para puxar os arquivos, mas dá pra fazer isso de forma automática. Com isso, naquele mesmo local em que configuramos o GIT na Hostinger, clique em “Implantação automática”.

Isso vai trazer essa tela. Na seção “URL do webhook” copie o endereço…

… no repositório do Github, e adicione o webhook.

“Por fim, adicione o webhook da Hostinger no Github

Agora, toda alteração que for feita na pasta /public no Github, irá ser aplicada na Hostinger de forma automática.

Script para Facilitar o Deploy

Agora temos o nosso site no ar! Ótimo! Mas como eu quero que isso seja um Blog, eu preciso atualizar ele a cada postagem. E vimos ali em cima, que precisamos primeiro criar o Commit e depois separar a pasta /public.

São oito comandos que precisam ser dados a cada vez que precisarmos atualizar o site. Mas, se tem uma das coisas que eu adoro no Linux, é a possibilidade de fazer Scripts para automatizar as coisas. E assim, eu criei esse Script:

#! /bin/bash

echo "## Limpando a pasta para compilação..."
rm -rf public

echo "## Compilando o Site..."
hugo

echo -e "\n## Adicionando todos os Arquivos para o Commit..."
git add .

echo -e "\n## Criando o Commit para o Github"
git commit -m "Site Atualizado"

echo -e "\n## Enviando o Commit para o Github"
git push -u origin master

echo -e "\n## Preparando o Deploy para a Hostinger..."
sleep 2

echo -e "  ### Criando Subárvore Temporária..."
git subtree split --prefix public -b hostinger-deploy

echo -e "\n  ### Enviando para o Branch de Produção..."
git push origin hostinger-deploy:hostinger --force

echo -e "\n  ### Excluindo a Subárvore Temporária..."
git branch -D hostinger-deploy

echo -e "\n\n## Site Atualizado ##"
read -p "## Pressione Enter para Sair."

Basicamente, executo esse Script e o meu Blog está magicamente atualizado.

Palavras Finais

E esse é basicamente todo o processo que tive para publicar o meu Blog, que fiz no Hugo, ao mundo. Ter um Blog feito com um Gerador de Sites Estáticos é algo bem peculiar. Por anos, usei o Wordpress para colocar as minhas ideias ao mundo, e eu estava acostumado com aquilo.

Acessar o WP-admin, criar uma nova postagem usando o Gutenberg (que é um bom editor, embora meio pesadão), configurar algumas coisas e publicar. É um processo bem simples e indolor. Mas foi a minha curiosidade que me levou aqui ao Hugo, e posso dizer que gostei desse processo.

Justamente, porque o Hugo me permite organizar os arquivos do Blog da maneira que eu quiser, separados em pastas e depois, criar um padrão de URL em que tudo fica bem acessível. Realmente, é uma boa experiência.