DEV Community 👩‍💻👨‍💻

Cover image for Fazendo deploy de sites Nuxt no Github Pages
Welker Arantes Ferreira
Welker Arantes Ferreira

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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/' },

Enter fullscreen mode Exit fullscreen mode

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"
},
Enter fullscreen mode Exit fullscreen mode

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

npm install push-dir --save-dev
Enter fullscreen mode Exit fullscreen mode

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:

Configurações Github Pages

Fazendo o Deploy

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

npm run generate
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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 ;)

Top comments (0)

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.