Publicando seu projeto Hugo no Github:Pages

Esta é a Parte 2 da nossa série de artigos sobre como criar uma página pessoal com Hugo e Github Pages.

Marco Paulo Ollivier
Jul 8 · 5 min read

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.

  • 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

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.

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

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.

Terminal do projeto Hugo
Projeto Hugo executando

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
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.

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