01/12/2019 · 4 minutes of reading · In Portuguese
Uma das minhas metas de 2020 é conseguir manter um blog e tomada essa decisão comecei a projetar como ele seria publicado. Avaliei static generators, WordPress, Medium e outras plataformas plug-and-play mas nenhuma me dava a liberdade para customizar como um bom desenvolvedor gosta, não restou dúvidas, usar um gerador estático como o Gatsby era a escolha mais inteligente para um desenvolvedor React.
Passada a fase de estudos, concepção, horas de diversão montando um tema que atendesse minhas necessidades, começou a jornada que imaginava ser um problema ao optar por construir um blog fora de grandes plataformas: Como e onde publicar? Estudei alguns provedores como por exemplo o S3 da Amazon mas enquanto fazia o último commit de meus ajustes no tema a resposta chegou em forma de pergunta: Por que não uso o próprio github como servidor de arquivos?
Existem diversas formas de configurar a publicação de uma página usando o github pages, no meu caso optei por usar a branch master como versão de produção do blog e para isso é necessário ir nas configurações de seu repositório, rolar até a sessão GitHub Pages e escolher master branch como Source. Nessa mesma sessão você consegue adicionar um domínio customizado e ativar o HTTPS.
Ao usar um gerador estático você muito provavelmente precisa executar um script de build para gerar a versão final do seu site, no Gatsby esse comando é gatsby build e ele cria um diretório public em seu projeto. Aqui entra em cena o Github Actions permitindo você automatizar a publicação de seu site a cada novo push e para iniciar com esse recurso você só precisa criar um arquivo .yml dentro do seguinte diretório em seu projeto: .github/workflows/qualquer-nome.yml com a seguinte estrutura:
Primeiramente definimos um nome para o workflow, o meu chamei de Deploy on Github Pages:
name: Deploy on Github Pages
O próximo passo é definir qual evento será responsável por disparar os processos, como eu estou publicando meus arquivos de desenvolvimento na branch develop eu quero que a trigger seja disparada quando eu realizar um novo push nela.
name: Deploy on Github Pages
on:
push:
branches:
- develop
Agora chega a parte onde a mágica acontece, vamos definir o trabalho a ser executado, para isso eu usei duas actions da comunidade para atingir meus objetivos:
O borales/actions-yarn tem como função executar scripts do package.json usando o yarn, com ela eu instalo as dependências e executo o build da aplicação. Sua configuração é bastante simples, só precisamos informar qual script será executado no atributo with.cmd.
Enquanto o peaceiris/actions-gh-pages é responsável por pegar um diretório e mover para uma branch, para isso precisamos informar o diretório em env.PUBLISH_DIR, a branch destino em env.PUBLISH_BRANCH e a chave de deploy em env.ACTIONS_DEPLOY_KEY.
O arquivo .yml final ficou assim:
name: Deploy on Github Pages
on:
push:
branches:
- develop
jobs:
build:
name: Deploy
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v1
- uses: borales/actions-yarn@v2.0.0
with:
cmd: install
- uses: borales/actions-yarn@v2.0.0
with:
cmd: build
- uses: peaceiris/actions-gh-pages@v2
env:
ACTIONS_DEPLOY_KEY: ${{ secrets.ACTIONS_DEPLOY_KEY }}
PUBLISH_BRANCH: master
PUBLISH_DIR: ./public
Se assim como eu, você precisou configurar pela primeira vez chaves de deploy no Github, vem que eu te ajudo.
Primeiro você precisa gerar uma nova chave SSH usando o comando abaixo em seu terminal:
ssh-keygen -t rsa -b 4096 -C "$(git config user.email)" -f gh-pages -N ""
Se tudo deu certo, você vai receber o retorno abaixo:
Generating public/private rsa key pair.
Your identification has been saved in gh-pages.
Your public key has been saved in gh-pages.pub.
The key fingerprint is:
SHA256:TizUu... diego@...
O próximo passo é configurar a chave publica, para isso vá nas configurações do seu repositório, clique em Deploy Keys e adicione o conteúdo do arquivo gh-pages.pub no campo Key, em title deve informar o nome da chave que você definiu no .yml (em nosso caso é ACTIONS_DEPLOY_KEY) e deve marcar Allow write access para conseguirmos fazer um push com essa key.
cat gh-pages.pub # o cat serve também pra ver o conteúdo de um arquivo.
Por fim devemos informar também a chave privada, ainda nas configurações escolha Secrets e adicione uma nova com o conteúdo do arquivo gh-pages:
cat gh-pages
E isso é tudo que você precisa fazer para ter um blog com deploy automatizado sem custos no Github.
✅ Done.