Implantando um site Gatsby no GitHub Pages usando o Travis CI

Recentemente, trabalhei em um site estático simples para um projeto de código aberto meu e resolvi experimentar o Gatsby com um dos temas iniciais. Para disponibilizar as páginas da Web, decidi hospedar no GitHub Pages o site estático gerado pelo Gatsby, onde também mantenho o código-fonte, para deixar tudo bem integrado.

Com o GitHub Pages, há duas opções para hospedar e disponibilizar o site:

1.  uma branch dedicada chamada gh-pages.

2. usar outra branch, por exemplo, master, e colocar todo o código do site em um diretório docs/.

No meu projeto, escolhi a segunda opção: coloquei todo o código-fonte do site no diretório docs/ da branch master e, depois, fiz o deploy para gh-pages.

Fazendo o deploy no GitHub Pages

O Gatsby gera o código do site estático no diretório public/, que precisa ser enviado ao GitHub Pages para que o site fique disponível. Para enviar o código ao repositório remoto pelo Travis CI e cuidar de toda a mágica do Git, usamos o módulo npm gh-pages.

Você também pode instalar o módulo gh-pages para testar e fazer o deploy no seu ambiente de desenvolvimento local, mas isso não é obrigatório.

Etapa 1: obtenha um token do GitHub

Para enviar alterações do sistema de CI — no nosso caso, o Travis CI — ao GitHub Pages, você precisa se autenticar. Uma opção recomendada é usar tokens de desenvolvedor do GitHub, em vez de fornecer o nome de usuário e a senha da sua conta.

No GitHub, acesse as configurações da sua conta -> Developer settings -> Personal access tokens e crie um token com permissões de acesso ao repositório.

Na configuração do Travis, adicione ao repositório uma nova variável de ambiente secreta chamada GH_TOKEN com o valor do token obtido no GitHub. Não ative a opção NÃO exibir nos logs de build, pois é melhor manter o token em segredo. Caso contrário, outras pessoas poderão enviar alterações ao seu repositório.

Etapa 2: configure o script de deploy

Atualize o package.json do projeto Gatsby para incluir também um script de execução deploy, que chama o gh-pages com dois argumentos importantes:

1. -d public - especifica o diretório onde estão os arquivos gerados, que serão enviados como origem ao GitHub Pages

2. -r URL - a URL do repositório do GitHub, incluindo um token do GitHub para permitir o envio de alterações à branch gh-pages, no formato https://$GH_TOKEN@github.com/<github username>/<github repository name>.git

Veja um exemplo:

"scripts": {
  "deploy": "gatsby build --prefix-paths && gh-pages -d public -r https://$GH_TOKEN@github.com/lirantal/dockly.git"
}

Etapa 3: atualize o .travis.yml

A configuração a seguir de .travis.yml serve como referência:

language: node_js
before_script:
  - npm install -g gatsby
node_js:
  - "10"
deploy:
  provider: script
  script: cd docs/ && yarn install && yarn run deploy
  skip_cleanup: true
  on:
    branch: master

Vamos detalhar os pontos importantes para fazer o deploy do site Gatsby do Travis para o GitHub Pages:

1. before_script é usado para instalar a CLI do Gatsby, permitindo que o comando gatsby seja usado no script de execução do projeto para gerar o site Gatsby.

2. deploy é executado somente quando o build roda na branch master; nesse caso, ele inicia o script. O script contém as instruções para fazer o deploy do site Gatsby localizado no diretório docs/. Nesse diretório, é preciso instalar todas as dependências do site e executar o script de deploy, conforme configurado na etapa anterior.

Resumo

Com este tutorial, você já pode publicar seu site e compartilhá-lo com o mundo — e conosco!

Se você usa o CircleCI ou outra ferramenta, o fluxo de trabalho e as orientações gerais são quase idênticos. A diferença está nos detalhes do arquivo de deploy e nas configurações das variáveis de ambiente do CircleCI. Para contribuir com o código aberto, enviei uma solicitação de pull request na documentação ao repositório oficial do Gatsby, explicando todo esse processo para facilitar a vida de quem usar o Gatsby no futuro!