Guia passo a passo para hospedar sua aplicação no GitHub Pages

Hospedar sua aplicação construída com HTML, CSS e JavaScript no GitHub Pages é uma excelente maneira de compartilhar seu trabalho com amigos e colegas, permitindo que eles testem e forneçam feedback valioso. Este guia detalhado irá orientá-lo em cada etapa do processo, desde a criação de um repositório até a ativação do GitHub Pages e é necessário que você possua uma conta no GitHub.

1. Criando um Repositório no GitHub

1.1. Acesse sua conta no GitHub e clique em "New" (Novo) para criar um novo repositório.

1.2. Escolha um nome significativo para o seu repositório e adicione uma descrição, que deve servir para que as pessoas compreendam, os objetivos do seu projeto, os seus objetivos pessoais durante a execução e as tecnologias utilizadas.

1.3. Indico que você selecione a opção para inicializar o repositório com um arquivo README.md, onde você pode descrever de forma mais completa o que você deseja implementar, bem como instruções de uso.

1.4. Clique em "Create repository" (Criar repositório) para finalizar a criação.

2. Associando seu Projeto ao GitHub

2.1. Caso você ainda não tenha uma pasta com o seu projeto, crie a pasta e dentro dela abra o terminal ou prompt de comando.

git init: Iniciando um repositório git na sua pasta. Veja mais na documentação https://git-scm.com/docs/git-init.

git add: Adicionando o conteúdo especificado ou todos os conteúdos (utilizando *) a staging area. Veja mais na documentação https://git-scm.com/docs/git-add.

git commit: Segurando todas as mudanças adicionadas até o momento que foi executado. O -m indica que você deseja anexar uma mensagem. Veja mais na documentação https://git-scm.com/docs/git-commit.

git branch -M main: Modificando o nome da branch inicial. Veja mais na documentação https://git-scm.com/docs/git-branch.

git remote add: Conectando seu repositório local ao repositório no GitHub. Veja mais na documentação https://git-scm.com/docs/git-remote.

git push: Empurrando as mudanças armazenada no commit do seu repositorio local para o repositório no remoto. O -u criar um vinculo inicial entre a sua branch local para uma branch remota. Veja mais na documentação https://git-scm.com/docs/git-push.

Esses comandos já são apresentados pelo GitHub após a criação do seu repositório. Lembre-se de usar o seu nome de usuario e o nome do seu projeto.

2.2. Caso você já uma pasta com o seu projeto com um repositório local, dentro dela abra o terminal ou prompt de comando.

Esses comandos já são apresentados pelo GitHub após a criação do seu repositório. Lembre-se de usar o seu nome de usuario e o nome do seu projeto.

3. Ativando o GitHub Pages

3.1. No seu repositório no GitHub, vá para a seção "Settings" (Configurações).

3.2. Role para baixo até encontrar a seção "GitHub Pages".

3.3. No menu suspenso "Source" (Origem), selecione "main branch" (branch principal).

3.4. Clique em "Save" (Salvar).

4. Entendendo o Processo de Hospedagem no GitHub

Quando você ativa o GitHub Pages para um repositório, o GitHub automaticamente hospeda os arquivos do seu projeto, tornando-os acessíveis através de um URL público. Os arquivos são servidos diretamente do repositório, então sempre que você fizer um push de alterações para o branch principal, o site será atualizado automaticamente.

5. Condições Importantes para Apresentar no GitHub

5.1. Certifique-se de que todos os arquivos necessários para sua aplicação estejam no repositório, incluindo HTML, CSS e JavaScript, bem como quaisquer arquivos de imagem, fontes ou outros recursos.

5.2. Evite o uso de caminhos absolutos para recursos (por exemplo, "/images/imagem.png"), pois eles podem não funcionar corretamente ao serem hospedados no GitHub Pages.

5.3. Verifique se sua aplicação é responsiva e funciona bem em diferentes dispositivos e tamanhos de tela.

Com este guia, você está pronto para hospedar sua aplicação no GitHub Pages e compartilhar seu trabalho com o mundo. Aproveite para receber feedback valioso e aprimorar suas habilidades de desenvolvimento web!