Desenvolvimento

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.

há 4 anos 8 meses


Você sabia que a TreinaWeb é a mais completa escola para desenvolvedores do mercado?

O que você encontrará aqui na TreinaWeb?

Conheça os nossos cursos

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

Git e GitHub - Controle de versão
Curso Git e GitHub - Controle de versão
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.

Git - Fundamentos
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.

Desenvolvedor Especialista Front-end
Formação Desenvolvedor Especialista Front-end
Conhecer a formação

Autor(a) do artigo

Elton Fonseca
Elton Fonseca

Professor e desenvolvedor. Formado em análise e desenvolvimento de sistema, pós graduado em engenharia e arquitetura de software. É autor de cursos em diversos temas, como, desenvolvimento back-end, cloud computing e CMSs. Nas horas vagas adora estudar sobre o mercado financeiro, cozinhar e brincar com pequeno Daniel. @eltonfonsecadev

Todos os artigos

Artigos relacionados Ver todos