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
Top comments (2)
Muito bom!!
Ótimo artigo.