Como publicar um site gratuitamente com o GitHub Pages (Introdução a sites estáticos)

Nesta série de introdução ao Git/GitHub, aprendemos todo o fluxo, desde a criação de uma conta, passando pelas operações básicas de comando, até o fluxo fundamental de desenvolvimento em equipe usando branches.

Neste encerramento da série, apresentaremos uma funcionalidade fantástica chamada GitHub Pages, que permite que você publique de fato o projeto que gerencia no GitHub como um site gratuito para o mundo inteiro ver. É o método ideal para publicar sites de portfólio, páginas de demonstração de aplicativos web que você criou, e muito mais. Domine este último passo e divulgue seus trabalhos para o mundo!

O que é o GitHub Pages? O que ele tem de tão incrível?

GitHub Pages é um serviço de hospedagem de sites estáticos oferecido pelo GitHub. Um site estático é um site composto apenas por arquivos que não necessitam de processamento do lado do servidor, como HTML, CSS e JavaScript. Embora não seja possível a integração com PHP ou bancos de dados, é mais do que poderoso para muitas finalidades, como portfólios, blogs e sites de documentação de projetos.

As principais vantagens do GitHub Pages são as seguintes:

• Totalmente gratuito: Para repositórios públicos, não há nenhum custo de hospedagem.
• Configuração incrivelmente fácil: Você pode publicar seu site com apenas alguns cliques na tela de configurações do repositório.
• Domínios próprios também podem ser usados: Um domínio `github.io` é fornecido gratuitamente, mas você também pode configurar um domínio próprio que tenha adquirido.
• Integração suave com o Git: Basta fazer um `git push` das suas alterações locais para que o conteúdo seja refletido automaticamente no site publicado.

Dois tipos de publicação! Site de usuário e site de projeto

O GitHub Pages oferece dois tipos de métodos de publicação, dependendo da finalidade.

1. Site de usuário (ou de organização)
   • URL: `seu-nome-de-usuario.github.io`
   • Características: Só se pode criar um por conta. O nome do repositório deve ser obrigatoriamente "`nome-de-usuario.github.io`". É ideal para usar como página principal de um portfólio pessoal ou blog.
2. Site de projeto
   • URL: `seu-nome-de-usuario.github.io/nome-do-repositorio/`
   • Características: Pode-se criar um para cada repositório normal. Não há limite para o número que pode ser criado. É adequado para ser usado como página de demonstração para projetos individuais ou como site de documentação.

Desta vez, explicaremos como publicar um "site de projeto", que você pode experimentar facilmente com qualquer repositório.

Na prática! Passos para publicar um site de projeto

Vamos tentar publicar como um site o repositório `my-first-repo` que criamos nos artigos anteriores.

Passo 1: Vá para as "Configurações" do repositório que quer publicar

Primeiro, abra a página do repositório que quer publicar no GitHub e, entre as abas, clique em "Settings".

[Imagem: A aba "Settings" destacada na lista de abas do repositório do GitHub.]

Passo 2: Na seção "Pages", selecione a fonte de publicação

No menu do lado esquerdo da página de Configurações, clique em "Pages". Preste atenção à configuração de "Source" no item "Build and deployment".

[Imagem: "Deploy from a branch" selecionado como fonte para o GitHub Pages.]

Confirme que "Deploy from a branch" está selecionado. Este é o método mais básico, que significa "publicar o site a partir de uma branch específica".

Passo 3: Selecione a branch a ser publicada e salve

No item "Branch", configure qual branch publicar. Como queremos publicar o código da branch `main`, configuramos da seguinte forma:

• Branch: Selecione `main`
• Folder: Selecione `/(root)`

Depois de configurar, clique no botão "Save".

[Imagem: `main` selecionado como branch, `/(root)` como pasta, e o botão "Save" sendo pressionado.]

Passo 4: Verifique a URL publicada

Ao pressionar o botão Save, a página será recarregada e um banner verde com a mensagem "Your site is live at ..." aparecerá na parte superior. Pode levar de 1 a 2 minutos para que o site seja publicado na internet.

[Imagem: O banner verde "Your site is live at..." exibido na parte superior das configurações do GitHub Pages.]

Experimente clicar na URL exibida. Se a página "Hello, World!" que você criou anteriormente for exibida como um site acessível a qualquer pessoa na internet, você conseguiu!

Como atualizar o site

O ponto incrível do GitHub Pages é que a atualização é extremamente fácil. Basta modificar os arquivos localmente e fazer push dessas alterações para a branch configurada para publicação (neste caso, `main`) para que, em poucos minutos, o conteúdo seja refletido automaticamente no site publicado.

Vamos tentar. Modifique o conteúdo do seu `index.html` local.

echo "<h1>Meu site foi atualizado!</h1>" > index.html

Faça `add` e `commit` da alteração.

git add index.html
git commit -m "Atualizar index.html para o GitHub Pages"

Por fim, faça `push` da alteração.

git push origin main

Após a conclusão do push, espere 1 a 2 minutos e depois recarregue a URL do site que você publicou anteriormente. O conteúdo da página deverá estar atualizado.

Conclusão: Divulgue seus trabalhos para o mundo com o GitHub!

Nesta série de introdução ao GitHub, você experimentou todo o fluxo, desde a criação da conta, passando pelas operações básicas do Git, o fluxo de desenvolvimento em equipe, e finalmente, até publicar seu próprio site. Este é um passo muito grande como criador da web.

O conhecimento que você adquiriu aqui será uma base sólida para suas futuras atividades de desenvolvimento. Sinta-se à vontade para publicar seu próprio portfólio ou novos projetos com o GitHub Pages e mostrá-los a pessoas de todo o mundo. Esperamos que sua vida como desenvolvedor se torne mais confortável e criativa!