Marco Paulo Ollivier
Jul 8 · 5 min read

No primeiro artigo, mostramos como criar uma página utilizando o gerador de páginas estáticas Hugo.

Nessa segunda parte, utilizaremos um recurso do Github para publicação de páginas estáticas chamado Github Pages. Falaremos sobre algumas características específicas do recurso oferecido e configurações importantes que devem ser levadas em conta na hora de configurar nosso projeto.

O Github pages

O Github pages é um recurso gratuito do Github que permite que você disponibilize na internet páginas estáticas de forma gratuita com o armazenamento do material sendo feito diretamente do seu repositório público.

Existem duas maneiras de criar uma página no Github Pages:

  • Para organizações e usuários (https://<USERNAME|ORGANIZATION>.github.io)
  • Para projetos (https://<USERNAME|ORGANIZATION>.github.io/<PROJECT>/)

Requisitos mínimos

  1. Esperamos que você tenha o Git 2.8 ou superior instalado na sua máquina;
  2. Uma conta no Github; e
  3. Um projeto Hugo pronto para ser disponibilizado. Para isso, basta seguir nosso artigo anterior de como criar uma página estática com Hugo.

Mãos a obra

Como estamos dando continuidade ao projeto de anterior, e queremos publicar a página de uma organização, esse será o caminho que tomaremos para essa prática.

Primeiro passo: Criando um repositório para o projeto Hugo

Esse passo nós já fizemos no artigo anterior quando criamos um projeto github chamado gopher.hugo e guardamos a estrutura do projeto que criamos usando o Hugo

Github do projeto

Esse repositório servirá para o armazenamento dos nossos arquivos de conteúdo e outros arquivos fonte.

Segundo passo: Crie um repositório para sua organização

Agora vamos criar o repositório que armazenará nossas páginas estáticas que serão disponibilizadas para internet. Para isso precisamos criar outro repositório com o padrãohttps://<USERNAME|ORGANIZATION>.github.io.

Então vamos criar um repositório chamado gopheriomeetup.github.io.

Tela de criação de uma página no Github

ATENÇÃO: para que a página seja associada a organização/usuário e não como um sub-módulo, o nome tem que ser exatamente igual. Por exemplo: se estamos criando a página para a organização gopheriomeetup, o repositório tem que se chamar, necessariamente, gopheriomeetup.github.io.

Terceiro passo: Clone o repositório do seu projeto

Clone seu projeto para sua máquina de desenvolvimento e tenha certeza que ele está funcionando.

  1. Execute hugo server
Terminal do projeto Hugo

2. acesse http://localhost:1313

Projeto Hugo executando

Depois de validar, pare a execução CTRL+Ce apague a pasta rm -rf public

Quarto passo: associe seu arquivo estático ao repositório da página

Quando executamos o comando hugo dentro do projeto, ele irá gerar as páginas estáticas dentro da pasta public. Para podermos associar ao nosso repositório github:pages, nós vamos criar um sub-módulo do Git e associar o conteúdo a ele. git submodule add -b master git@github.com:<USERNAME>/<USERNAME>.github.io.git public. No nosso caso ficará dessa forma:

$ git submodule add -b master git@github.com:gopheriomeetup/gopheriomeetup.github.io.git public

Quinto passo: Gerando o conteúdo estático

Depois de associar a pasta public ao sub-módulo, o processo de commit é o padrão. Gere o conteúdo estático usando o comando hugo e execute os comandos de commit e push do git

$ hugo$ cd public$ git add .$ git commit -m "message"$ git push
Terminal depois de fazer o push no repositório do conteúdo estático

Feito isso, o conteúdo já estará disponível no repositório do github:pages

Página do repositório estático

Sexto passo: últimos ajustes no Github:Pages

Ainda faltam alguns ajustes finais que não fizemos no Github para que nossa página fique disponível online. Entre no menu Settings e vá até as configurações do Github Pages.

Mude a opção source para master branch e como indicado no alerta verde, a página já está disponível no endereço https://gopheriomeetup.github.io/

Página publicada na internet

Passo extra: Deixe o processo um pouco mais automatizado

Antes de pensarmos em um pipeline de CI, podemos criar um script que faça a atualização dos arquivos estáticos de forma mais simples. A documentação oficial do Hugo dá um exemplo para isso.

#!/bin/bashecho -e "\033[0;32mDeploying updates to GitHub...\033[0m"# Build the project.
hugo # if using a theme, replace with `hugo -t <YOURTHEME>`
# Go To Public folder
cd public
# Add changes to git.
git add .
# Commit changes.
msg="rebuilding site `date`"
if [ $# -eq 1 ]
then msg="$1"
fi
git commit -m "$msg"
# Push source and build repos.
git push origin master
# Come Back up to the Project Root
cd ..

Conclusão

Nesse segundo artigo conseguimos ver que é muito simples e rápido disponibilizar na internet uma página web com um projeto estático e quando utilizamos a combinação Hugo + Github:pages, podemos ter bastante flexibilidade nas mãos. Acredito que essa possa ser uma opção a ser considerada quando for criar sua página pessoal, para seu projeto ou para seu blog.



Responsive

Software Engineering Blog & Programming Tutorials

Marco Paulo Ollivier

Written by

Software Developer, futuro físico, entusiasta de Economia, Política e Filosofia. Também é Vascaíno, fã do GnR. Metido a fotógrafo e guitarrista meia-boca😜

Responsive

Software Engineering Blog & Programming Tutorials

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade