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:
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/"
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/”
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
Erro com as imagens?
Provavelmente você está usando o caminho relativo, prefira utilizar da seguinte forma:
'./assets/images/image.png'
Top comments (0)