DEV Community

loading...

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

barbaraperim profile image Bárbara Perim ・2 min read

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

Discussion

pic
Editor guide