Criando uma página no GitHub Pages


Este artigo segue o guia disponibilizado pelo GitHub em https://pages.github.com/ e orienta a como criar uma página no GitHub e publicar online.

Assume-se que o leitor já tenha algum conhecimento como criação de repositório no GitHub e clonagem de repositório. Caso desconheça as funções, recomenda-se a leitura do artigo Como configurar um projeto Unity existente para um repositório do GitHub utilizando o GitHub Desktop, onde oriento a criar uma conta e criar repositórios no GitHub.

Sumário

Criando um repositório no GitHub

Existem várias formas de criar um repositório, seja no próprio site do GitHub, utilizando as ferramentas Git ou ainda usando o GitHub Desktop. Mostrarei, neste tutorial, a criação de um repositório diretamente na página do GitHub.

Acesse a página https://github.com e faça o login com sua conta.

Clique em Repositories:

Imagem do link do repositório no GitHub

Clique em New para criar um novo repositório:

Imagem do botão para criação do novo repositório

Dê um nome para seu novo repositório e ao final da página clique em Create repository.

Imagem da área onde se nomeia o site

Clonando um repositório para seu computador

Utilizaremos, nesta etapa, o GitHub Desktop para clonar o repositório do GitHub e poder trabalhar em uma cópia local do projeto. Para isso, é necessário que tenha instalado o GitHub Desktop e feito a autenticação com sua conta do GitHub.

Para clonar o repositório, abra o GitHub Desktop e clique na setinha ao lado do repositório padrão (se não tiver nenhum repositório criado, uma dica para clonar um repositório será exibida e poderá seguir a partir dalí). Clique em Add e depois clique em Clone repository...

Imagem do processo de clonagem de um repositório no GitHub Desktop

Localize o repositório criado para o site na lista disponibilizada em Your repositories. Caso tenha muitos repositórios, poderá filtrar pelo nome na caixa de pesquisa. Escolha um local para salvar o repositório e clique em Clone.

Imagem da aplicação GitHub para clonar um repositório

Adicionando os arquivos da página

A partir de agora você terá uma cópia dos arquivos do repositório criado em seu computador pessoal. Utilizando essa estrutura, você pode adicionar arquivos nessa pasta ou até mesmo abrir em um editor de código como o Visual Studio Code e criar os arquivos necessários para sua página.

Para este exemplo, criei um arquivo index.html utilizando os templates do Boostrap disponívels na W3Schools e coloquei dentro da raiz do repositório. É importante que o arquivo principal da página se chame index.html, pois é o arquivo que será procurado pelo servidor para iniciar a exibição da página.

Imagem de uma pasta chamada portfolio com um arquivo index.html dentro da pasta

Subindo o site no servidor

Uma vez adicionado o arquivo no repositório local, podemos subir para o servidor do GitHub fazendo um Commit no GitHub Desktop:

Imagem da aplicação GitHub Desktop e do botão Commit

Para subir o arquivo aos servidores do GitHub, clique em Publish branch.

Imagem do botão Publish Commit da aplicação GitHub Desktop

Publicando a página e compartilhando o link

Acesse a página do GitHub em https://github.com/ e, estando autenticado na sua conta, localize e abra o repositório:

Imagem da página do GitHub com o repositório recém criado e atualizado

Acesse as configurações do repositório clicando no botão Settings, disponível no menu superior do lado direito da página:

Imagem do botão Settings na página do GitHub.

No menu esquerdo, navegue até o link Pages e clique nele.

Imagem do botão Pages no GitHub Pages

Em Source, mantenha a opção Deploy from a branch (disponibilizar a partir de uma ramificação do repositório), e na opção Branch, selecione o main:

Imagem da seleção das opções ao diponibilizar uma página online

Para publicar, clique em Save:

Imagem do botão Save para publicar uma página online

Para acessar sua página é bem simples. Acesse o link: https://NOMEUSUARIO.github.io/NOMEDOSITE/. Por exemplo, quando criei este exemplo, criei um repositório chamado portfolio e meu nome de usuário no github é Eduardo-Gonelli, portanto, meu site ficaria: https://eduardo-gonelli.github.io/portfolio/ (Está publicado online e vocês podem acessar para conferir o template Bootstrap utilizado).

Referências