Article image
Vanessa Ostroski
Vanessa Ostroski12/12/2022 16:35
Compartilhe

Como colocar um projeto Angular no GitHub Pages

  • #GitHub
  • #Angular

Siga as instruções a baixo. qualquer dúvida é só comentar.

  • Em seu projeto local, use o atalho "ctrl + p" e digite angular.json.
  • Abra o arquivo e procure a linha que tem "outputPath": (no meu está na linha 16)
  • substitua o conteúdo dela para "docs". Exemplo:

transforme disso

"outputPath": "dist/angular-blog",

para isso:

"outputPath": "docs",

image

  • No seu terminal digite:
$npm run build

esse comando irá criar uma pasta "docs".

  • Agora precisamos subir as alterações com os seguintes comandos no terminal:
$git add .
$git commit -m "colocando o projeto no GitPages"
$git push

Últimos passos.

  • entre no seu projeto no GitHub.
  • entre em configurações

image

  • vá em pages

image

  • vá em select folder > docs

image

Esse tutorial foi baseado neste video:

https://www.youtube.com/watch?v=42uxw1Hjo2s

se o seu projeto der erro 404, consulte o seguinte forum: https://stackoverflow.com/questions/34010970/running-angular2-in-subdirectory

o código para buildar será esse:

$ng build --base-href /nome-do-seu-projeto/

#CommunityWeek

Compartilhe
Comentários (11)

DM

Denys Malta - 22/03/2024 19:20

Muitíssimo obrigado, Vanessa!

Me ajudou pra caramba.

Gabriel Gregorio
Gabriel Gregorio - 12/12/2022 23:50

Assiste a gravação dessa live que teve recentemente, você pode ganhar um voucher para dá um Upgrade no seu Setup!!!! Não vale gastar com jogos na Steam hein!! é pro PC!!!!!

https://www.linkedin.com/events/openingceremony-diocommunitywee7005546507248525313/comments/

Melquiedes Franco
Melquiedes Franco - 14/12/2022 17:46

Obrigado! Vanessa! Será útil pra mim.

Giancarlo Rodrigues
Giancarlo Rodrigues - 14/12/2022 16:06

Bacana, Vanessa!!

GG

GVenGDGim GVenGDGimzDosamnlx - 14/12/2022 16:03

Show!!!!

Adriano José
Adriano José - 12/12/2022 18:12

Obrigado por compartilhar!

Rafael Silva
Rafael Silva - 12/12/2022 16:55

Muito obrigado pelo tutorial Vanessa.

Recentemente fiz dois projetos utilizando Angular e esse tutorial veio muito a calhar.

Lucas Ramos
Lucas Ramos - 12/12/2022 16:53

Vale lembrar que é interessante utilizar o Github Pages para deixar um Portfólio hospedado com suas skills e projetos já feitos, assim nas entrevistas podem mostrar tudo que conhecem de forma bem simples e agil!

Vanessa Ostroski
Vanessa Ostroski - 12/12/2022 23:37

Gabriel Gregorio, valeu pela dica. Eu não consegui achar #ComunityWeek nas opções de Hashtag :/ o que você quis dizer com usar #ComunityWeek?

Gabriel Gregorio
Gabriel Gregorio - 12/12/2022 20:11

Muito Top Vanessa!

Coloca a #CommunityWeek pois seu artigo vai ajudar muita gente, inclusive a mim que em breve estarei entrando em angular e utilizarei esse artigo como referência!

Lucas Ramos
Lucas Ramos - 12/12/2022 16:50

Muito bom!