Veja nesse artigo como publicar o seu projeto no GitHub pages em 5 passos
Dando continuidade ao meu artigo anterior: novidades do Angular 8.3, hoje eu irei demonstrar como publicar um projeto no GitHub pages, utilizando o novo comando que foi adicionado na versão 8.3 do CLI, o ng deploy.
Para os próximos passos será necessário estar com a versão 8.3.12 do Angular CLI no seu computador. Caso essa não seja a sua versão, abra um terminal e execute o comando abaixo:
npm install -g @angular/cli
Com a versão do CLI atualizada, vamos aos 5 passos de criação e deploy do projeto.
1- Passo: Criação de um novo projeto
Abra um terminal no seu computador e execute o seguinte comando para criação de um novo projeto:
ng new (nome do seu projeto)
2- Adicionando pacote ghpages
Com o projeto criado, volte no seu terminal, navegue até ele e execute o comando abaixo:
ng add angular-cli-ghpages
3- Criação de um novo repositório no GitHub
Com o projeto criado e o pacote importado, vamos criar um novo repositório no GitHub. Para isso, siga os passos abaixo:
Acesse o link: https://github.com/, vá até o canto superior e clique no icone do lado do simbolo de notificações:
Em seguida clique em new repository:
Agora volte no seu terminal e execute os comandos abaixo para versionar ele no GitHub:
git add *
git commit -m "first commit"
git remote add origin https://github.com/{seu usuario}/{seu repositorio}.git
git push -u origin master
4- Alterando a base url do projeto
Como o projeto será publicado em um subdiretório, será necessário alterar a base url dele. Para isso, vá até o arquivo index.html do seu projeto e altere ele conforme abaixo:
<base href="/nome do seu repositório no git/">
5-Deploy do projeto
Com todos os passos anteriores OK, execute o comando abaixo no seu terminal para publicar o projeto:
ng deploy
Esse comando irá publicar o seu projeto no GitHub Pages no seguinte link: https://github.com/<username>/<repositoryname>.git
- username: o seu usuário do GitHub
- nome do seu repositório
Para verificar se o seu projeto foi publicado com sucesso, acesse a url mencionada acima no seu navegador. No meu exemplo ficou a seguinte url: https://programadriano.github.io/angulardeploy/
Bom, a ideia desse artigo era de ser algo rápido demonstrando uma das novidades do Angular 8.3.
Espero que tenham gostado e até um próximo artigo pessoal 😉
Fonte: https://medium.com/xp-inc/angular-8-3-publicando-projeto-com-o-angular-cli-em-5-passos
Gostou deste artigo? Comente abaixo!