[pt-BR] Hugo: a forma mais rápida de fazer um site

No ano passado, eu me propus um desafio: montar uma oficina que envolvia programação e desenvolver uma aplicação para servir como material de apoio para essa oficina. A ideia é que os participantes da oficina pudessem utilizar essa aplicação para ver algumas explicações sobre o exemplo que seria apresentando, mas principalmente, copiar o código de cada exemplo.

Isso me pareceu uma ótima ideia, afinal a oficina não era introdutória, e as pessoas participantes deveriam ter conhecimento prévio, mas eu fiz uma escolha muito errada: resolvi implementar essa aplicação na mão, usando meus frameworks de desenvolvimento web e criando componentes do zero. Isso foi errado por vários motivos, e talvez eu até escreva um artigo específico sobre isso por aqui.

Confesso que a aplicação não ficou muito boa, mas funcionou bem o suficiente para que eu começasse a planejar uma segunda versão, e é nessa segunda versão que o personagem principal do nosso artigo entra: o Hugo, que não é um programador sênior disposto a dar dicas de programação, mas sim um framework para geração de sites estáticos que tem despertado a minha curiosidade.

🤔 O que é o Hugo?

O Hugo é uma ferramenta desenvolvida utilizando a linguagem Golang, também conhecida como Go, para a criação de sites estáticos, que são sites cujo conteúdo não muda, ou seja, é fixo. Em outras palavras, o conteúdo do site é definido durante o desenvolvimento e só pode ser alterado mudando o código.

Isso pode até parecer uma abordagem meio ultrapassada considerando a popularidade de sites dinâmicos, que apresentam conteúdos diferentes para cada usuário, mas ainda existem muitos casos onde essa abordagem se encaixa perfeitamente, como blogs, portifólios, e é claro, a aplicação que eu queria criar para minha oficina.

🤔 Por que usar o Hugo?

Como Dev frontend, confesso que no início tive uma certa resistência com relação ao Hugo, afinal, se eu queria criar um site, iria criar o MEU site, com o MEU código e mostrar as MINHAS habilidades. Essa foi a ideia na primeira versão, e era também a ideia na segunda. Até eu perceber o tempo que estava gastando para implementar coisas muito simples, com o intuito de deixá-las perfeitas. Então, achei o Hugo e resolvi dar uma chance a ele. Em outras palavras, cansei de reinventar a roda.

Fazendo uma pesquisa rápida, você consegue encontrar uma série de vantagens que o Hugo promove com relação à implementação de sites "na mão", e a principal delas é a velocidade de compilação. Quando falamos de desenvolvimento de sites que necessitam de frameworks, por exemplo, acabamos enfrentando muitas vezes um tempo longo de compilação da aplicação. Com o Hugo, a compilação foi quase instantânea. Fiquei bem impressionada com a velocidade da ferramenta, especialmente quando comparamos com o Next.js, que era o framework que estava usando na primeira versão.

Além disso, você também encontra outros pontos positivos para a utilização do Hugo, sendo um deles a velocidade de desenvolvimento, já que o Hugo já apresenta uma estrutura pronta para uso, o que permite que sua aplicação esteja funcionando em questão de minutos.

Outros pontos positivos dizem respeito à manutenção do site que se torna extremamente simples considerando que muitas páginas, no fim das contas, são apenas arquivos Markdown, o que é outro ponto que para o meu caso, foi extremamente positivo, afinal eu gostaria de escrever um pouco de texto e um pouco de código nessa aplicação.

No fim das contas, na minha experiência, o Hugo permite a criação de sites de uma maneira extremamente rápida, especialmente se comparado com outros frameworks que já tive contato, e a implementação e manutenção desses sites também é muito simples.

Mudando poucas linhas de código em um arquivo de configuração, por exemplo, você consegue alterar totalmente a interface da sua aplicação, o que nunca vi ser feito de uma forma tão rápida e sem riscos de efeitos colaterais na interface da aplicação.

🤔 Como se desenvolve uma aplicação com Hugo?

Para desenvolver uma aplicação com Hugo, é preciso fazer o download da ferramenta, criar um projeto, baixar um tema e começar a criar o conteúdo do seu site. O processo padrão são esses três passos mesmo, mas é claro que outros passos podem ser adicionados conforme a necessidade.

Um conceito muito importante que precisamos ter em mente quando falamos do Hugo, é o conceito de Tema, que nada mais é do que uma implementação de um layout completo que pode ser importado para sua aplicação com poucas linhas de código.

Depois de aplicar um tema ao seu site, você pode definir algumas configurações, ou parâmetros do tema no arquivo de configuração do site para fazer com que ele se modifique para atender as suas necessidades, ou então pode editar o tema manualmente, o que requer um entendimento mais profundo de como o Hugo funciona.

Muitos temas podem ser encontrados na galeria do Hugo, que pode ser acessada clicando aqui.É muito importante salientar que cada tema tem suas peculiaridades e possibilidades de personalização específicas, então é sempre importante ler a documentação do tema escolhido para ter mais informações acerca dos benefícios e das possibilidades que cada um tem.

Com relação ao conteúdo da aplicação, toda aplicação Hugo possui uma pasta chamada content onde o conteúdo do site, ou as páginas do site, são armazenadas. Um novo conteúdo pode ser adicionado facilmente através do terminal e são majoritariamente arquivos Markdown. O Hugo também aceita arquivos HTML que eu costumo utilizar para casos específicos onde quero adicionar algum código JavaScript na aplicação.

Cada arquivo de conteúdo do Hugo contém um cabeçalho com alguns metadados que o Hugo usa para renderizar a página. Esse cabeçalho é chamado de Front Matter, caso você queira pesquisar mais sobre o assunto. Eventualmente, algumas alterações precisam ser feitas nesses metadados, mas não vou entrar em detalhes disso agora.

Também é importante dizer aqui que o Hugo utiliza uma organização específica para os arquivos, havendo uma pasta para os conteúdos, outra para layouts, outra para temas, outra para arquivos estáticos, etc., o que acaba gerando uma certa familiaridade conforme utilizamos mais com a ferramenta.

⌛ Considerações finais

Nesse artigo, busquei trazer um pouco da motivação que me levou a ir atrás do Hugo, e algumas características dessa ferramenta que acho que podem ser muito úteis para algumas pessoas desenvolvedoras, assim como foi pra mim.

Acho que ficou perceptível ao longo do artigo o quão encantada eu estou por essa tecnologia, mas e você, querida pessoa que terminou de ler esse artigo? Já conhecia o Hugo? Já o usou em algum projeto? Como foi a sua experiência? Quais pontos positivos, ou negativos, você enxerga nessa ferramenta? Deixe aqui nos comentários!

Té mais. 🧑‍💻