Overview

Hugo é um gerador de site estático bem conhecido pela praticidade e pelos builds rápidos. É, infelizmente, uma das poucas soluções para web que não são feitas em plataforma NodeJS. Infelizmente por que eu acho que esse potencial do hugo pode ser mais desbravado sem necessariamente usar Node. Tudo fica mais rápido, sabe.

O hugo foi o escolhido para sediar esse blog depois de muita pesquisa e tentativas. Tem muitos temas bons basicamente prontos, o PaperMod é o meu preferido.

BTW hoje (ou ontem) eu atualizei o tema e dei uma refatorada nas gambiarras passadas. Antes eu tinha puxado tudo os componentes para a estrutura do blog mas peguei umas manhas para usar módulos para importar temas e plugins. Isso deixaria apenas o necessário no projeto em sí. Basicamente o config.yml, algumas customizações de CSS, o post em sí e a pasta static e a _vendor para não ter que baixar as dependências a cada build.

Como usar temas como módulos?

Primeiramente você tem que adicionar o tema como um módulo qualquer. Para configurar seu site hugo para usar módulos você vai precisar do Go instalado, o Go só é necessario mesmo nessa fase de configuração.

Para configurar seu site para usar módulos você usa o hugo mod init passando logo em seguida a URL do seu blog. Ela não precisa necessariamente existir mas sem essa inicialização o esquema de módulos não vai funcionar. No meu caso essa url é github.com/lucasew/blog.

No seu config.yaml você então referencia os módulos que você vai usar e no theme ao invés de passar o nome da pasta você passa o nome do módulo.

No meu caso fica assim essa parte dos módulos:

1
2
3
4

theme: "github.com/adityatelange/hugo-PaperMod"
module:
	imports:
		- path: "github.com/adityatelange/hugo-PaperMod"

E com isso você pode executar os seguintes comandos para baixar e vendorizar os módulos respectivamente:

1
2

hugo mod tidy
hugo mod vendor

Com isso os dados dos módulos ficam salvos na pasta _vendor, o que vai simplificar muito a sua vida na hora de configurar o build pois esses módulos não vão precisar serem baixados todas as vezes e o build também não vai depender do Go instalado.

Dica: Se o hugo ficar só avisando que o tema não existe e não fazer nada independente do comando que você rode só comenta a linha do theme. O site vai ficar bugado por que não tem nenhum tema configurado mas ai você consegue baixar o tema e os módulos podendo descomentar logo em seguida.

Dica: Para saber do que cada módulo depende utilize o comando hugo mod graph

Como fazer build no Vercel e no Cloudflare Pages quando você depende de uma versão muito nova do Hugo?

Depois que eu atualizei o tema precisei executar o build do site na versão 0.82 ou superior. O problema? O vercel e o cloudflare pages utilizam versões muito antigas do hugo. Como resolver isso? Baixando a versão mais nova no build!

Basicamente o que eu fiz é colocar no comando de build que ele tem que baixar o tar da versão x, extrair e chamar o binário hugo de dentro desse arquivo tar. Um problema que eu observei é que o vercel não vem com o wget instalado o que exige o uso de um outro programa, no caso o cURL. Sem problemas, consegui resolver e vou deixar os comandos que eu uso nesse blog.

1
2
3
4

# usando wget (cloudflare)
wget https://github.com/gohugoio/hugo/releases/download/v0.82.0/hugo_0.82.0_Linux-64bit.tar.gz -O hugo.tar.gz && tar -xf hugo.tar.gz && chmod +x ./hugo && ./hugo
# usando curl (vercel, acho que funcionaria no cloudflare também)
curl -L https://github.com/gohugoio/hugo/releases/download/v0.82.0/hugo_0.82.0_Linux-64bit.tar.gz -o hugo.tar.gz && tar -xf hugo.tar.gz && chmod +x ./hugo && ./hugo

Como subir o hugo server mostrando os posts de rascunho

Esse é o jeito que o meu hugo server roda localmente enquanto eu estou escrevendo posts para poder analisar melhor como está ficando o resultado.

1

hugo serve -D

Como anexar código custom no template PaperMod

É bem normal precisarmos adicionar código custom em todas as páginas. Geralmente é o analytics. No meu caso, além do analytics (Panelbear) eu uso o turbolinks e o MathJax que é aplicado nos posts que precisam. Esse turbolinks que dá essa sensação que o blog é um Single Page Application pois o próprio turbolinks só aplica a diferença das páginas ao invés de recarregar tudo a cada vez que você muda de página.

Existem geralmente dois locais onde você vai querer adicionar código custom:

• No head para scripts que não dependem do DOM
• No body para scripts que dependem do DOM. Geralmente depois do conteúdo.

No caso do tema PaperMod carregado como módulo para adicionar código no head e no body (footer) você adiciona esse código nos arquivos layouts/extend_head.html e layouts/extend_footer.html e o tema vai puxar esses arquivos. O tema fornece esses arquivos mas para usar o hugo sobrescreve eles. Para não dar erro deve existir esses arquivos no template em si e se necessário o usuário sobrescreve.