Promoção no ar
Tempo restante da oferta:
21 Horas
09 Min
59 Seg
Assinar →

Como usar domínio personalizado no Github Pages

Veremos nesse artigo como usar um domínio personalizado em um site do Github Pages de forma simples e gratuita.

Elton Fonseca 7 anos atrás

Já vimos aqui no blog um post sobre a criação de um repositório no Github e sobre a utilização do Github Pages para criação de portfólio. Esse recurso por si só já é muito bom, pois evita a necessidade de um servidor pago para ter um site, mas ele fica ainda mais atraente com a utilização de domínios personalizados nessas páginas.

Por padrão, quando criamos um site no Github Pages o endereço utilizado para acessar a página possui o padrão: https://nome_do_usuario.github.io/nome_do_repositorio fica muito mais interessante se ao invés disso, usarmos por exemplo, para uma página pessoal o domínio relacionado ao seu perfil de desenvolvedor https://seunome.dev, no meu caso utilizo https://eltonfonseca.dev

Curso Git - Fundamentos Conhecer o curso

Serviço de DNS

Quando compramos um domínio, precisamos de um serviço de DNS onde vamos criar as zonas. Alguns vendedores de domínio já possuem por padrão o serviço de DNS também, como é o caso do Google Domínio, dono dos domínios .dev, mas a maioria dos vendedores de domínio não possuem.

Primeiramente vamos ver como realizamos a configuração do domínio onde o vendedor não possui o serviço de DNS (como é o caso do registro.br, por exemplo). Nesse caso podemos usar a Cloudflare que possui plano gratuito. Acesse o link https://dash.cloudflare.com/sign-up para realizar o cadastro.

Depois de logado precisamos adicionar um novo site:

Criando dominio no cloudflare

Informe o domínio do seu site:

Dominio personalizado

Basta seguir os passos para terminar a adição, única coisa que precisa se atentar é o tipo de plano para selecionar gratuito.

Apontar o DNS no domínio

Agora precisa informar na empresa onde comprou o domínio qual é o servidor que será responsável pelos DNS. Acesse a página de Overview do seu site na Cloudflare, ele te apresentará quais nameservers deve usar:

nameservers

Se o domínio foi comprado no registro.br, após logar basta clicar sobre ele e clicar no botão Alterar Servidores DNS. A configuração deve ficar conforme a imagem abaixo:

Atlerar dns no registro br

Se tiver comprado o domínio em outra empresa precisará verificar qual é o procedimento específico no sistema dela, geralmente isso é bem simples.

Curso Git - Fundamentos Conhecer o curso

Adicionar zona de DNS na Cloudflare

Agora precisamos criar uma zona no Cloudflare que aponta para o IP do Github Pages, com isso toda vez que o usuário acessar no navegador https://eltonfonseca.dev ele retornará o caminho para a página. Vamos usar no nosso exemplo uma zona tipo A, mas poderíamos usar um ALIAS ou ANAME.

Acesse o menu DNS no painel do site no Cloudflare e em seguida adicione o seguinte registro:

adicionando dns no registro

Esse endereço de IP foi retirado da página da documentação do Github Pages. Ele ainda possui outros ips alternativos:

  • 185.199.108.153
  • 185.199.109.153
  • 185.199.110.153
  • 185.199.111.153

Basicamente terminamos a nossa configuração de DNS. Se a empresa onde comprou o domínio já possuir o gerenciador de DNS basta realizar esse último passo.

Veja no Google Domains como isso é feito:

zona dns

Configurando o Github Pages

Precisamos configurar o Github para responder ao domínio personalizado que criamos. Depois de já ter o site funcionando com o endereço padrão (mostrado no post do início).

Acesse as configurações do repositório onde está o site:

configurações gitbub

Em seguida em GitHub Pages informe o seu domínio personalizado:

Informando dominio personalizado

Depois de clicar em Save marque também a opção Enforce HTTPS para que os acessos aconteçam via HTTPS.

Podemos testar o site no navegador com o novo domínio:

dominio funcionando

Prontinho já temos o nosso site funcionando com domínio personalizado no Github Pages. Isso nos permite hospedar sites estáticos de forma extremamente simples sem ter que pagar um servidor de hospedagem ou realizar configurações complexas. O Github Pages possui algumas limitações e politicas de uso, antes de iniciar o seu uso pode ser interessante ler a documentação.

Formação Desenvolvedor Front-end Júnior Conhecer a formação

Continue lendo

Artigos relacionados

Um ano de acesso total para você viver de programação.

Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro console.log ao mercado de trabalho.

  • 1 ano de acesso a todos os cursos
  • Cursos novos toda semana
  • Suporte direto com professores
  • Plano de carreira personalizado
  • Certificados digitais inclusos
  • Aplicativos para Android e iOS, com acesso offline
Garantia incondicional de satisfação

Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro.

Acesso completo a todos os cursos e dezenas de Formações.

12 meses
Economize R$ 840,00 54% OFF

de 12x R$ 129,00 por apenas

12x R$ 59,00

sem juros no cartão de crédito ou R$ 599,00 à vista

Oferta termina em 21h 09min 59s

  • Acesso imediato e ilimitado durante 1 ano.
  • Plano de carreira personalizado.
  • Suporte direto com professores.
  • E muito mais!
Matricule-se agora