01 de Fevereiro de 2024 - @Walmir Neto

A idéia aqui é mostrar o básico de como usar o GitHub Pages, usando seu próprio domínio, enfim sem muita delongas, vamos nessa.


Criando e configurando repositório no GitHub

Na página do GitHub sugere que você crie um repositório com no padrão github.com/username/username.github.io para que o mesmo seja acessado no link username.github.io, mas também é possível criar com qualquer outro nome. Só é preciso ir nas configurações do repositório, para esse exemplo, eu vou usar o repositório https://github.com/owalmirneto/ghpages e nesse caso o link será https://owalmirneto.github.io/ghpages. Então vamos criar o repositório ;)

github-pages.png

Depois de criado precisamos pelo menos criar um arquivo de entrada para o site. Então vamos criar o index.html com o seguinte conteúdo:

 <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Configurando Google Domains e GitHub Pages</title>
</head>
<body>
  <h1>Configurando Google Domains e GitHub Pages</h1>
  
  <a href="<https://walmir.dev/posts/56a2f972cd80477eb3c8fc5a2cfe8ae4>">
  	Ver artigo
  </a>
</body>
</html>

Apesar de eu usar um html simples, o github incentiva o uso de jekyll, sinceramente acho uma boa opção, mas vamos no mais simples, pois o intuito aqui é aprender a configurar uma pagina 😎

Ah, só mais um detalhe, você pode criar no /root do repositório ou na pasta /docs dependendo da configuração na tela de configuração do repositório https://github.com/owalmirneto/ghpages/settings/pages (no teu caso seria https://github.com/[USERNAME]/[REPO]/settings/pages)

config-pages.png

Nesse ponto se tu fez tudo certo, já dar para acessar https://[USERNAME].github.io/[REPO] e no meu https://owalmirneto.github.io/ghpages

Configurações de DNS

Caso você tenha um domínio, é possível usar-lo. Para fazer isso você precisar criar um registros A para os 4 IPs do GitHub Pages no seu DNS “preferido”, com mostra abaixo (+info)

185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

config-google-dns.png

Com isso é só acessar https://[USERNAME].github.io/[REPO] ou ghpages.walmir.dev (eu usei um subdomínio, mas é possível usar um domínio principal caso essa seja sua intenção)

Configurando CloudFlare

Para configurar o CloudFlare é preciso ter cautela e tentar se programar para fazer caso tenha uma dominio já em andamento. Pois é preciso trocar todos os DNS para o CloudFlare e isso pode gerar downtime nas suas aplicações 😬

Dito isso, vamos ao processo. Primeiro é preciso adicionar o domínio no CloudFlare: