Publicando site no Github Pages
Tags: github, webdev, beginners, braziliandevs
Published: 2022-02-19 22:18:30

## 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](https://dev.to/womakerscode/git-e-github-guia-rapido-e-comandos-basicos-para-iniciantes-4ile) da [WoMakersCode](https://dev.to/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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h9g92roo2qlrcpf4iulu.png)

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

![Configurando repositório](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zwg0kofrvl3it73yxppd.png)
 
## 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:

```bash
git init
```

Adicionar os arquivos do seu projeto para commit utilizando:

```bash
git add .
```

Adicionar uma mensagem de commit com o comando:

```bash
git commit -m "Subindo o nosso site"
```

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

```bash
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.

```bash
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:

![Subindo projeto para o github](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i3cmr0j0c7g3qe9timw0.gif)
 
## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mvmlfapm414tcdydlfzt.png)

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

![Acessando menu de pages](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5c0axriiqg7ofx60vzd0.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jhof9w42pqvshplstqja.png)

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

![Clicando no botão de salvar](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aewyozo8kv9xmlwbj0uw.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/be1gde6rzta4mtv27iyj.png)

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

![Mensagem de site hospedado](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7akh6uqu0hxeprjwt82w.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/axaum2ywy07iqlf7tl8y.png)
 
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](https://kastro.dev/github-pages-tutorial/).

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](https://twitter.com/kastrowalker/).

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