Como publicar seu projeto Hugo no Github:Pages
Aprenda como publicar sua página estática, de forma fácil e gratuita utilizando o Github:Pages
No primeiro artigo, mostramos como criar uma página utilizando o gerador de páginas estáticas Hugo. (Veja no link abaixo)
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 que é 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
- Esperamos que você tenha o Git 2.8 ou superior instalado na sua máquina;
- Uma conta no Github; e
- 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
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.
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.
- Execute
hugo server
2. acesse http://localhost:1313
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 publicQuinto 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
Feito isso, o conteúdo já estará disponível no repositório do github:pages
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/
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.
