DEV Community

Bárbara Perim
Bárbara Perim

Posted on

2

Como fazer deploy da sua aplicação Angular com GitHub Pages sem bibliotecas externas

O que é o GitHub Pages e para que serve?
É uma ferramenta que permite fazer deploy dos seus repositórios no GitHub em websites de forma gratuita.

Primeiro passo: habilitar GitHub Pages nas configurações do seu repositório
Acesse os setting de seu projeto:
Alt Text
Vá até a sessão Github Pages e configure uma branch e um folder onde ficarão seus arquivos após a build. Pode ser a main ou uma nova branch para isso. Aqui vou dar um exemplo criando a pasta /docs na raiz do projeto.

Segundo passo: Altere seu arquivo angular.json
Altere a seguinte linha do seu arquivo angular.json para a nova pasta em que vamos direcionar os arquivos da build.

"outputPath": "docs/"
Enter fullscreen mode Exit fullscreen mode

Terceiro passo: Execute a build
Execute o seguinte comando prestando atenção ao baseHref, substitua username pelo seu usuário no GitHub e seu-repo pelo nome do seu repositório.

ng build --prod --baseHref=” https://username.github.io/seu-repo/”
Enter fullscreen mode Exit fullscreen mode

Quarto passo: Página 404.html
Quando a build estiver completa faça uma cópia da página index.html e renomeie ela para 404.html. É uma página para caso de erro, mas como o GitHub Pages por enquanto não tem uma solução para lidar com rotas, essa alteração faz com que elas funcionem! Mas ainda assim é um hack e a página ainda é servida com status code de 404.
E agora é só commitar!

git add .
git commit -m "generated deployables"
git push -u origin master
Enter fullscreen mode Exit fullscreen mode

Erro com as imagens?
Provavelmente você está usando o caminho relativo, prefira utilizar da seguinte forma:

'./assets/images/image.png'
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay