Publicando site no Github Pages

Iniciando

Quando estava iniciando em desenvolvimento web, escutava muito sobre a criação de um portfólio para mostrar meus conhecimentos, mas na época não tinha a mínima ideia de como colocar meus projetos online para que outras pessoas pudessem ver. Depois de um tempo eu descobri que eu precisava colocar o meu projeto em um servidor para que outras pessoas pudessem acessar, mas daí vinha o problema de não ter grana para poder contratar algum desses serviços. Mas graças a comunidade eu descobri o Github Pages.

O que é o Github Pages?

O Github Pages é uma funcionalidade disponibilizada pelo github para poder hospedar projetos web de uma forma gratuita. No GH Pages você consegue hospedar apenas projetos com tecnologias de frontend, não é possível utilizar para hospedar seus projetos utilizando alguma tecnologia server side como, por exemplo, PHP, Node.js ou Ruby.

Hospedando o seu primeiro site

O objetivo desse artigo não é explicar do zero Git e Github, então é importante você ter o conhecimento básico sobre essas duas ferramentas e possuir uma conta no Github. Se você não tiver esse conhecimento básico, pode dar uma olhada nesse tutorial da WoMakersCode.

O primeiro passo é criar um novo repositório no github. Para isso, na sua página inicial do github você pode clicar em criar um novo repositório:

Configure as informações do seu repo e clique em salvar:

Subindo projeto para o github

Após criar o seu repositório, o próximo passo é subir o seu projeto para o github. Para fazer isso, acesse pela linha de comando o diretório do projeto que você quer hospedar. No meu caso, irei utilizar um site simples para fazer esse tutorial.

Iremos inicializar um repositório git com o seguinte comando:

git init

Adicionar os arquivos do seu projeto para commit utilizando:

git add .

Adicionar uma mensagem de commit com o comando:

git commit -m "Subindo o nosso site"

Sincronizar o nosso repositório local com o remoto utilizando o comando:

git remote add origin git@github.com:KastroWalker/github-pages-tutorial.git

Importante configurar conforme as informações do seu repositório.

Subir os arquivos para a branch main do nosso repositório remoto.

git push -u origin main

Utilizamos '-u origin main', pois, esse é o nosso primeiro commit para a nossa branch main remota, e nesse momento é que estamos configurando a nossa main local com a branch main remota.

Você pode ver nesse gif todos os passos acima que eu utilizei para subir o projeto para o Github:

Configurando github pages

Agora é a hora de configurar o nosso repositório para funcionar no Github Pages, para isso precisamos acessar as configurações do nosso repositório:

Iremos agora acessar a parte de configurações do github pages acessando a seção pages:

Precisamos configurar a branch com o código que vai ficar rodando no nosso site. Para isso iremos clicar no select na parte de source e escolher a branch main.

Depois é só clicar no botão de salvar.

Irá aparecer uma mensagem avisando que o seu site está pronto para ser publicado. Após alguns minutos você já vai conseguir acessar o seu site. No meu caso só demorou 1 minuto.

Quando o seu site estiver hospedado, irá aparecer essa mensagem nas configurações de pages.

Pronto, agora você já tem o seu site hospedado gratuitamente no github pages.

Configurando domínio personalizado

Provavelmente você deve estar estranhado por estar aparecendo 'kastro.dev' na minha URI, e na sua tem o nick do seu github seguido de github.io, por exemplo, 'kastrowalker.github.io' isso acontece, pois, configurei um DNS para o meu domínio do github, por padrão o github te disponibiliza um domínio com o seu nick.

Caso você tenha um domínio você consegue configurar ele no github pages, para fazer isso é só ir novamente na parte de configurações do github pages e no final vai ter uma seção para adicionar o link do seu domínio, e clicar em salvar.

Você também irá configurar no serviço do seu domínio para funcionar com o github, mas isso muda de serviço para serviço, então seria inviável abordar nesse tutorial. Contudo, basta procurar no google "como configurar domínio do servidor {insira aqui o nome do seu servidor de domínio} no github pages" que, provavelmente, você vai encontrar um tutorial ensinado a configurar essa parte.

Se você quiser criar um site para ser seu portfólio e ficar com a URI apenas <seu nick do github>.github.io é só criar o repositório com o nome do seu domínio, por exemplo, kastrowalker.github.io.

Conclusão

Agora você já sabe como hospedar os seus projetos web gratuitamente.
Uma dica que tenho, para você que está iniciando no mundo de desenvolvimento web, é que coloque os seus projetos de estudos hospedados no github pages, essa é uma forma de mostrar para outras pessoas as coisas que você sabe fazer.

Caso queira ver o site usado nesse tutorial, você consegue acessando esse link.

Obrigado por ler esse artigo e espero ter te ajudado de alguma forma. Qualquer dúvida que você tiver pode me mandar mensagem lá na DM do meu twitter.

Não esquece de curtir aqui no dev.to e compartilhar esse artigo com outras pessoas que você acha, que pode também gostar de saber como hospedar um site gratuitamente.

Até uma próxima <3