Article image
Guilherme Santos
Guilherme Santos18/03/2024 16:07
Share

Angular no GitHub Pages

  • #GitHub
  • #Angular

Para você, aluno, que tentou realizar uma hospedagem do seu projeto no github da forma convencional e não deu certo! Pesquisei e encontrei o processo para que consiga botar seu site no ar com o "github pages". É bem simples!

-Vamos lá: O Angular precisa realizar a construção do site em uma pasta separada com script especifico. Mas isso é automático, não se preocupe.

1° Passo: Realize o procedimento para subir seu projeto em um repositório do github normalmente (git init >> git add >> git commit >> git remote add origin >> git push);

2° Passo: Após ter seu projeto lançado no github, use o terminal do seu projeto para criar uma pasta "docs" no angular a partir de um comando "ng build". Nessa pasta que o github pages vai usar para rodar o site. O comando está logo abaixo:

ng b --output-path docs --base-href /nome-do-repositorio-do-seu-github/

-Após esse comando, a pasta docs será criada no seu projeto, como no exemplo abaixo:

PS C:\Users\Familia Prates\Desktop\praticarangular\buzzFeed> ng b --output-path docs --base-href /quizz-BuzzFeed-clone/
✔ Browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.


Initial Chunk Files           | Names         |  Raw Size | Estimated Transfer Size
main.824b0872a3f0bc86.js      | main          | 199.72 kB |                53.34 kB
polyfills.86615a3316a18752.js | polyfills     |  33.02 kB |                10.66 kB
runtime.f043e4104a9ec455.js   | runtime       | 894 bytes |               519 bytes
styles.51de48cdeb1deee9.css   | styles        |  97 bytes |                77 bytes


                            | Initial Total | 233.71 kB |                64.58 kB


Build at: 2023-12-23T22:29:48.413Z - Hash: 1b4489700e08490e - Time: 14961ms

3° Passo: Suba seu projeto atualizado no github (git add >> git commit >> git push). Com a pasta docs presente em seu repositório, você poderá utilizar o github pages.

4° Passo: No repositório do github, entrando em "settings", na seção "pages", faça a hospedagem do site mudando a pasta /root: para /docs.como no exemplo abaixo:

image

-Após isso, clique em "save" e pronto!!

Espero ter ajudado alguem. Continuem tentando galera!! Nunca desista! Uma hora vai!

Att,

Guilherme Prates dos Santos

Share
Comments (0)