Publicando meu site em Angular 8 no GitHub Pages com domínio customizado

Utilizando a biblioteca angular-cli-ghpages para realizar o deploy da minha aplicação Angular no GitHub Pages diretamente do terminal.

💁‍♂ Considerações iniciais

Neste artigo será abordada a instalação e configuração dos pacotes necessários assim como demonstrado o passo à passo do build e deploy da aplicação. Não será abordada a construção e/ou o desenvolvimento da mesma.

Para que o GitHub entenda seu projeto como padrão do GitHub Pages, é necessário que ele respeite o formato O_QUE_VOCE_QUISER.github.io.

👣 Primeiros passos

O artigo utiliza como base para o processo de deploy o angular-cli-ghpages e, como tarefa inicial, iremos realizar a instação global desta biblioteca.

npm install -g angular-cli-ghpages

📃 Anotações (dicas) úteis

Este artigo tem como base a utilização do repositório do meu site pessoal, nele algumas estruturações de branchs foram realizadas para facilitar a implementação e o desenvolvimento. Para que as alterações sejam aplicadas automaticamente na página do site, a branch master foi reservada para os arquivos gerados pelo deploy e, uma branch de desenvolvimento chamada develop foi criada (nela todas as alterações são realizadas).

No decorrer do artigo, algumas linhas de comandos são citadas. Para um uso mais simplificado no dia à dia, esses comandos foram mapeados no arquivo package.json.

Dentro das configurações do angular.json é possível configurar o outputPath para que o conteúdo da sua aplicação seja distribuída na pasta raiz.

lennonalvesdias/lennonalvesdias.github.io

⚙ Build

Com a instalação realizada com sucesso, o próximo passo é a realização do build do projeto. Caso a URL do projeto seja a do GitHub Pages, o comando deverá ser parecido com:

ng build --prod --base-href https://lennonalvesdias.github.io/

Caso você opte por utilizar domínio personalizado para o seu site, o comando será apenas:

ng build --prod

🌎 Habilitando domínio personalizado no GitHub

O GitHub Pages permite que você utilize o domínio O_QUE_VOCE_QUISER.github.io de forma gratuita, porém você ainda pode configurar um domínio próprio para exibição do seu site.

Para isso, na página do seu repositório clique na opção Settings. Nesta aba, rolando para baixo, estará visível a sessão GitHub Pages, onde você encontrará a opção Custom Domain. Nesta opção você deve informar o domínio que deseja utilizar e clicar na opção Save.

É importante ressaltar que você deve ser proprietário deste domínio e configurar a Zona DNS do mesmo. Caso você tenha segurança em alterar a Zona, basta criar registro do tipo A apontando para os seguintes endereços IP (conforme página de ajuda do GitHub):

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

🚀 Deploy

Com a biblioteca angular-cli-ghpages instalada de forma global e as branchs configuradas conforme demonstrado acima, o comando de deploy sem a utilização do domínio personalizado será:

ngh --branch=master

Caso opte por utilizar o domínio personalizado no site, o comando de deploy será parecido com:

ngh --branch=master --cname=lennonalves.com.br

A biblioteca permite ainda a configuração da mensagem de implantação com o parâmetro --message, a utilização do parâmetro --dry-runpara obter a saída antes de publicar a mudança além de outras opções que podem ser encontradas em sua página no NPM.