Como colocar um projeto Angular no GitHub Pages

Olá pessoal,

Durante o meu curso de Angular, senti dificuldades em fazer o deploy da minha página no GitHub Pages. No entanto, com muita persistência e pesquisa, descobri uma maneira simples e fácil de colocar um projeto Angular no GitHub Pages. Neste tutorial, vou ser breve e explicar os passos necessários. Após o envio do último comando para armazenar o seu projeto no GitHub, que é o seguinte:

Passo 1: Git Push

Após enviar o comando "git push -u origin main" para armazenar o seu projeto no GitHub, siga as etapas a seguir:

Passo 2: Terminal

Volte para o terminal do seu projeto e digite o seguinte comando:

npm install -g angular-cli-ghpages

Esse comando irá adicionar uma biblioteca chamada "angular-cli-ghpages" ao seu projeto Angular. Essa biblioteca nos permitirá fazer o deploy do projeto no GitHub Pages.

Passo 3: Fazer o deploy

Após a instalação da biblioteca, execute o seguinte comando no terminal:

ng build --configuration=production --base-href "https://<username>.github.io/<reponame>/"

Substitua o " <username>" pelo seu nome no Github e "<reponame>" pelo nome do diretório do projeto, ficaria assim:

ng build --configuration=production --base href"https://github.com/juliamariaa/nomedoprojetoaqui/"

Aguarde até que o comando seja concluído. Ele irá empacotar o seu projeto Angular e fazer o deploy no GitHub Pages.

Passo 4: Acessar a página

ngh --dir dist/<project-name>

ATENÇÃO AQUI: No passo 3 geramos um build que criou uma pasta chamada " dist " e dentro dela tem uma pasta com o nome do nosso projeto. As vezes, o nome do nosso projeto é "AngularProjeto" e ela pode gerar na pasta dist um " angular-projeto". Então, é o nome gerado na pasta dist que você irá colocar.

Passo 5: Projeto no ar

Em seguida, vá para o repositório do seu projeto no GitHub, na pasta "Actions" e verá o build do seu projeto sendo feito e logo será disponibilizado o link para acesso ao seu projeto.

Espero que essas instruções tenham sido úteis para você. Agora você poderá compartilhar o seu projeto Angular com outras pessoas através do Github Pages. Boa sorte!