Fazendo deploy de sites Nuxt no Github Pages

Introdução

Seja uma landing page, site pessoal ou até mesmo um portfólio, em todos estes casos o que você precisa é de um site estático. Neste tutorial eu vou mostrar como você pode publicar um site criado com Nuxtjs no Github Pages de uma forma bem fácil.

Criando o projeto

Para criar um novo projeto nuxt execute o comando abaixo no seu terminal:

npx create-nuxt-app nome-do-projeto

Assim que o CLI iniciar você pode selecionar as opções conforme desejar. Atente-se apenas à última etapa, que é referente à forma de renderização. Você deve selecionar a opção Static.

Configurando o Projeto

Para que seja possível publicar o projeto no Github Pages precisamos fazer algumas configurações. Primeiramente é preciso definir o "rootPath" da aplicação, para isso abra o arquivo nuxt.config.js e adicione esta linha de código:

router: { base: '/nome-do-projeto/' },

Substitua /nome-do-projeto/ pelo nome do repositório que você criou no Github. Caso ainda não tenha feito isso, crie um novo repositório e vincule-o ao seu projeto seguindo as instruções que o próprio Github te fornecerá.

Em seguida abra o arquivo package.json e adicione na lista de scripts o comando abaixo:

"scripts": {
  ...
  "deploy": "push-dir --dir=dist --branch=gh-pages --cleanup"
},

Por fim instale o pacote push-dir como dependência de desenvolvimento com o comando:

npm install push-dir --save-dev

Este pacote será responsável por pegar os arquivos compilados do site no diretório /dist e publicar no Github.

Configurando o Github Pages

Acesse o repositório que você criou no Github e crie um novo branch chamado gh-pages. Este branch será utilizado para armazenar os arquivos compilados do seu site.

Depois de criar o branch acesse a aba Settings, clique na opção Pages no menu lateral e na sessão Source selecione a branch gh-pages conforme descrito na imagem abaixo:

Fazendo o Deploy

Agora que você já configurou o projeto e o Github Pages, basta rodar estes comandos:

npm run generate

Este comando vai compilar o projeto e jogar os arquivos finais no diretório /dist. Caso você queira testar o resultado final antes de publicar o site é só rodar o comando npm start.

Agora para publicar o site execute este comando:

npm run deploy

Vale ressaltar que sempre que você fizer alterações no site será necessário executar os comandos npm run generate e npm run deploy para atualizar a versão publicada.

E assim chegamos ao fim deste tutorial, espero que tenha gostado ;)