#20: 🛰 Publicando a nossa aplicação no Github Pages
Instruções para o StackBlitz 
Siga as instruções da página referente ao StackBlitz para renomear o seu projeto e compartilhar o link da sua aplicação.
Para fazer o deploy das suas alterações para o GitHub Pages, nós usaremos o pacote angular-cli-ghpages: https://github.com/angular-schule/angular-cli-ghpages.
Para realizamos esse processo, temos alguns requisitos:
- Você precisa ter um usuário no GitHub;
- Você precisa criar um repositório para o seu projeto;
- Você precisa fazer um commit de todas as alterações do projeto;
- Você precisa instalar o angular-cli-ghpages.
Se você já possui um usuário no GitHub, pode pular esse passo. Para criar um usuário, acesse https://github.com/. Preencha o formulário de cadastro e certifique-se de validar seu endereço de e-mail.
Depois de fazer o login no GitHub, clique no botão
Start a project, e dê o nome do repositório de ng-girls-todo ou qualquer outro que desejar.Dica O GitHub Pages é case sensitive. Nesse caso, é melhor utilizar letras minúsculas para nomear o repositório.
Faça um commit de todas as suas alterações executando o seguinte comando na pasta do seu projeto:
git add -A && git commit -m "Your Message"
Execute este comando para conectar seu código ao repositório, certificando-se de substituir o {YOUR_USERNAME} e o {YOUR_REPO} com o seu usuário do GitHub e o nome do repositório:
git remote add origin https://github.com/{YOUR_USERNAME}/{YOUR_REPO}.git
git push -u origin master
Primeiro, instale o angular-cli-ghpages:
npm i -g angular-cli-ghpages
Então execute o comando:
ng build --prod --base-href="/[your-repo-name]/"
angular-cli-ghpages --dir=dist/todo-list
💡
./[your-repo-name] é um placeholder para o nome do seu repositório no GitHub. Sendo assim, caso o seu projeto esteja em https://github.com/myname/ng-girls, o valor será --base-href="./ng-girls" . Em outros sistemas operacionais, também pode ser "/ng-girls/".Seu app estará disponível em https://[your-GH-username].github.io/[repo-name]/
Se o deploy ocorreu com sucesso, mas apareceu uma tela branca no browser, provavelmente foram utilizadas letras maiúsculas no nome do seu repositório. Tente criar um novo, contendo apenas letras minúsculas. Depois, remova a conexão antiga no seu ambiente local:
git remote rm
Crie a conexão com o novo repositório:
git remote add origin https://github.com/{YOUR_USERNAME}/{YOUR_REPO}.git
git push -u origin master
Faça um novo build:
ng build --prod --base-href="/[your-repo-name]/"
angular-cli-ghpages --dir=dist/todo-list
Em algumas máquinas (windows) você pode se deparar com um erro como esse:
An error occurred!
Error: Unspecified error (run without silent option for detail)
at C:\Users\<myuser>\AppData\Roaming\nvm\v8.9.1\node_modules\angular-cli-ghpages\node_modules\gh-pages\lib\index.js:232:19
at _rejected (C:\Users\<myuser>\AppData\Roaming\nvm\v8.9.1\node_modules\angular-cli-ghpages\node_modules\q\q.js:844:24)
...
Tente debugá-lo com
angular-cli-ghpages -S . Você pode obter o seguinte problema:fatal: could not read Username for \'https://github.com\': No error\n',
Nesse caso, execute estes passos:
- 1.
- 2.Execute o comando a seguir, informando o token, repositório, username e e-mail:angular-cli-ghpages --repo=https://<personal-access-token>@github.com/organisation/your-repo.git --name="Displayed Username" [email protected]