DEV Community

Cover image for Publicando site no Github Pages
Victor Castro for A Caverna do Patocórnio

Posted on

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:

Criando repositório

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

Configurando repositório

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
Enter fullscreen mode Exit fullscreen mode

Adicionar os arquivos do seu projeto para commit utilizando:

git add .
Enter fullscreen mode Exit fullscreen mode

Adicionar uma mensagem de commit com o comando:

git commit -m "Subindo o nosso site"
Enter fullscreen mode Exit fullscreen mode

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

git remote add origin git@github.com:KastroWalker/github-pages-tutorial.git
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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:

Subindo 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:

Botão configurações do repositório

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

Acessando menu de 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.

Escolhendo branch

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

Clicando 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.

Mensagem de hospedando

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

Mensagem de site hospedado

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.

Configurando DNS

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

Top comments (2)

Collapse
 
saragomesdev profile image
Sara Gomes

Muito bom!!

Collapse
 
reis_h profile image
Victor Reis

Ótimo artigo.