Como publicar um site no Github Pages

1 comentário

Introdução

Neste tutorial vamos ver como configurar a publicação de um site com o Github Pages e ao final vou deixar um template de site de portfolio para você clonar, fazer alterações com os seus dados e enviar para o novo repositório do seu site.

Então leia o tutorial completo antes de fazer qualquer alteração no seu repositório.

O que é Github Pages?

É um serviço gratuito de hospedagem de sites estáticos que ficam ligados diretamente a um repositório do Github. 

Sites estáticos são aqueles que você não consegue pegar informações de um banco de dados para alterar o conteúdo nem criar algum tipo de processamento no lado do servidor. Quer dizer também que todo mundo vê exatamente o mesmo conteúdo, não tem opção de login de usuário para separar conteúdos.

Para fazer alterações em um site estático é necessário fazer modificações no próprio arquivo HTML do site e publicar novamente no servidor de hospedagem.

As páginas publicadas no Github Pages em planos gratuitos devem estar em repositórios públicos para funcionarem. Isto significa que todo conteúdo do seu repositório poderá ser visualizado por qualquer pessoa, mas ninguém conseguirá fazer modificações nele, apenas visualização. A partir do Plano Pro, é possível ter um repositório privado e páginas públicas. Enquanto escrevo este conteúdo, o plano custa cerca de R$20/mês.

Criando nosso site no Github Pages

Acesse sua conta no Github, caso não tenha precisará criar uma. Para mais detalhes sobre o Github, visite este tutorial.

Em sua página principal do Github, crie um novo repositório com o nome seguindo o formato meunomedeusuario.github.io, mantenha os demais campos do formulário como estão e clique em create repository.

Na página de instruções do novo repositório, clique no link create a new file e no campo name your file digite index.html, dentro do editor de código cole o código abaixo, role até o final da tela e clique em Commit new file.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Minha página no Github</title>
</head>
<body style="background: #f4f4f4;">
  <h1
      style="
             color:#39b54a;
             font-family:arial;
             text-align:center;
             "
      >
        Olá Mundo
   </h1>
</body>
</html>

Em seu navegador favorito, acesse o endereço do repositório que você criou. No meu caso foi: https://tiagosabadini.github.io/. Sua nova página está no ar!

As alterações feitas no código podem demorar até 10 minutos para serem refletidas no seu site. Acompanhe o deploy do seu site na aba Actions dentro do seu repositório, quando estiver verdinha significa que a página está no ar.

Configurando um nome de domínio personalizado

Vamos configurar um nome de domínio personalizado no Github Pages. Como exemplo, vou utilizar o meu domínio chamado popularize.com.br. Atualmente este domínio tem a seguinte página.

Meu objetivo é alterar o apontamento desse domínio para o meu repositório do Github tiagosabadini.github.io, que atualmente tem o conteúdo abaixo, que configuramos juntos neste tutorial.

Antes de tudo precisamos deixar claro o que é um domínio, subdomínio e subdomínio personalizado. Domínio é o nome do seu site que não muda, a raiz do endereço, no caso deste tutorial é: popularize.com.br.

Quando utilizamos www no começo de um endereço, estamos utilizando um subdomínio, exemplo: www.popularize.com.br. Qualquer prefixo que for utilizado antes da raiz do seu domínio e que seja diferente de www, por exemplo blog, app, admin, etc, são subdomínios personalizados.

No Github Pages, vamos configurar o subdomínio www e a plataforma vai tentar proteger também o endereço domínio raiz, sem o www. Vamos configurar esse subdomínio porque eles são mais estáveis e não são afetados pelas alterações de IP nos servidores do Github.

Configurando o DNS do seu domínio

Acesse a configuração de DNS na plataforma onde o seu domínio foi contratado e crie um registro do tipo CNAME com o HOST = www e o destino é a página publicada no Github. Veja um exemplo abaixo.

Configurando o domínio personalizado no Github

Agora vá para o repositório do seu site na sua conta do Github > settings > Pages (no menu lateral esquerdo) e adicione o seu domínio personalizado e aguarde a checagem do DNS. No meu caso foi:

Marque a opção Enforce HTTPS e aguarde até que o Github faça as verificações das configurações. Isso pode demorar até 24 horas, mas normalmente antes de 30 minutos a propagação acontece e o Github consegue reconhecer as alterações na sua hospedagem.

Observe que o seu repositório contém um novo arquivo chamado CNAME e seu conteúdo é o domínio que acabamos de configurar.

Enviando um site personalizado para o Github Pages

Agora que temos tudo configurado, vamos substituir a página de exemplo por uma página de portfólio real. Para baixar e configurar o seu site personalizado você vai precisar saber e ter algumas coisas, veja:

  1. Instale o Visual Studio Code em seu computador para facilitar o processo;
  2. Baixe os arquivos deste repositório e altere o template como você quiser, com os seus dados;
  3. Copie os dados baixados para o repositório criado com o seu nome;
  4. Substitua os dados fake do template pelas informações pessoais suas;
  5. Envie via git push para o seu repositório configurado no tutorial;
  6. Seu site estará no ar sem problemas, assim como o meu está, veja: https://tiagosabadini.github.io/githubpages-site-html/, porém com seu domínio personalizado.
Seu site configurado

Se ainda restar dúvidas, deixe nos comentários 😉

Tags

Um comentário

Os comentários estão fechados.