Como hospedar seu site com o GitHub Pages

Primeiramente você precisa criar uma conta na plataforma GitHub. O GitHub é uma plataforma de armazenamento de código fonte utilizada pelo mundo todo. Ela usa o software Git para controlar e gerenciar os códigos fonte.

1. Criação da conta

Acesse o GitHub e crie uma conta. Essa sua conta pessoal é importante e hoje em dia muito utilizada inclusive em entrevistas de emprego então use nomes significativos para sua conta, tanto o email como o nome de usuário (username) que você vai ter que criar.

2. Configurando o git e Inicializando o Repositório

Após criar sua conta vamos criar um novo repositório. Repositório nada mais é do que uma pasta com os arquivos do seu projeto. Para tal, abra uma pasta contendo seu projeto no VSCode, novamente utilize nomes significativos para o nome da pasta e dos arquivos.

Certifique-se que os arquivos html estão sendo listados na raiz da aplicação como mostra a figura e não dentro de outra pasta.

Agora vamos configurar o seu usuário do GitHub na máquina, para isso acesse o terminal clicando no menu: Ver -> Terminal. No terminal você vai precisar rodar 2 comandos (execute um comando cada vez) listados abaixo, com os seus dados de email e usuário que acabou de cadastrar.

git config --global user.email "[email protected]"
git config --global user.name "seuUsuario"

Atenção: o terminal não vai mostrar nenhuma mensagem após executar os comandos, e é normal isso.

Agora você pode clicar no botão do lado esquerdo do vscode chamado Controle de Código-Fonte.

Como ainda estamos criando o repositório, o vscode vai pedir para você inicializar esse repositório. Clique no botão “Initialize Repository”.

Importante: a inicialização do repositório acontece apenas uma única vez.

3. Fazendo commits (registrando as alterações de código)

Após inicializar o repositório você verá uma tela com os arquivos e um U do lado. Esse U significa que o git percebeu que tem arquivos porém esses arquivos não estão sendo monitorados pelo Git ainda.

Precisamos falar para o git monitorar os arquivos e registrar as alterações que fizemos no arquivo. O git faz esse registro de alterações com um comando chamado commit. Pense em um commit como sendo uma foto do estado atual dos seus arquivos. A ideia é que você vá registrando esses momentos com commits para que você possa ter um controle das alterações que foram realizadas.

Cada vez que você registra um commit, você está batendo uma foto daquele momento do seu código. Você pode registrar quantos commits quiser. A ideia é que os commits não sejam muito grandes, ou seja, não tenham muitas modificações em apenas um commit.

Para fazer um commit basta preencher a mensagem com uma descrição sobre aquele commit e clicar em confirmar.

Essa descrição deve ser em relação as alterações feita naquele momento e sempre significativa (lembre-se que estamos sempre trabalhando em equipe e outras pessoas vão usar essa informação)

Vai aparecer uma mensagem dizendo que os arquivos ainda não estão sendo observados, e você pode clicar em “Sim” para que os arquivos possam ser observados pelo git.

Feito isso, você registrou as alterações (tirou uma foto) e essa foto agora está registrada no seu repositório local (no seu computador). Você pode ir fazendo alterações e registrando as alterações (fazendo commits) quantas vezes quiser, mas lembre-se de fazer commits pequenos.

4. Enviando as alterações para o GitHub

Todas as alterações (commits) ainda estão na sua máquina local (no seu computador), precisamos fazer com que essas alterações sejam enviadas para o repositório central (github) para que tenhamos uma centralização do código. Para fazer isso clique no botão Publicar Branch.

Vai aparecer a mensagem

Clique em Permitir. Vai abrir o navegador e novamente aparecer uma nova mensagem, clique em Abril Visual Studio Code.

Por fim, de volta no VSCode vai aparecer uma ultima mensagem, clique no botão Abrir.

Agora vai abrir uma barra no VsCode com algumas opções, perguntado se você gostaria de criar seu repositório publico ou privado. Escolha público (precisa ser público ou não vai funcionar a hospedagem).

Se tudo ocorrer bem, você deverá receber uma mensagem similar a seguinte:

Ao clicar no botão Abrir no Github, agora você deve ser capaz de ver seu código sendo mostrado na página do seu repositório no GitHub.

5. Hospedando a página

Até esse ponto você conseguiu enviar os códigos do seu projeto para o GitHub. Agora vamos configurar para que ele disponibilize o código para que nosso site possa ser acessado via uma URL pública.

Para isso, dentro da página do seu repositório, clique no botão Settings

Na página de Settings, escolha a opção Pages no canto esquerdo:

Dentro da página Pages clique no botão None, em seguida escolha a opção main e clique no botão Save:

Feito isso o GitHub vai mostrar a seguinte mensagem:

Espere alguns minutos e atualize a página. Deve aparecer uma mensagem como a seguinte:

Isso significa que agora o seu site está hospedado e disponível através da URL disponibilizada mostrada logo em seguida do texto Your site is live at