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 ;)
Top comments (0)