Começar Um Site Com Hugo

2025-04-14

Este documento é uma adaptação do Quick Start da documentação do Hugo, com algumas notas complementares.

O que é Hugo?

Hugo é um gerador de site estático ou, em inglês, SSG (Static Site Generator). A ideia é desacoplar o conteúdo da apresentação.

Dessa forma, é possível manter o layout e identidade visual em determinados arquivos, usando temas e templates. E escrever os conteúdos em markdown.

Pré-requisitos

Para começar, instale o Hugo de acordo com seu sistema operacional. Usuários Windows, devem se atentar ao uso do PowerShell porque não é o que vem no Windows. Os usuários do GNU/Linux talvez queiram verificar se a versão do Hugo disponível nos repositórios de sua distribuição é a mais recente. Eu, usuário do Linux Mint (uma variante do Debian e do Ubuntu) talvez queiram baixar a última versão disponível no repositório no github. Eu acabei utilizando a versão extended (hugo_extended_*****.deb) porque o tema Ananke não funciona com a versão não-extended do Hugo.

Também instale o git.

Tenha um editor de textos para editar o conteúdo. Eu gosto do VSCodium, mas você pode escolher qualquer um de sua preferência.

Criar um site

Certifique-se de que a versão instalada de Hugo é v0.128.0 ou superior:

hugo version

Crie um novo site:

hugo new site quickstart

Mude a pasta corrente para a do novo site:

cd quickstart

Inicie um repositório Git vazio na pasta corrente:

git init

Clone o tema Ananke para a pasta themes/ananke:

git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

Adicione uma linha configurando o tema ao arquivo hugo.toml:

echo "theme = 'ananke'" >> hugo.toml

Rode o servidor de desenvolvimento do Hugo:

hugo server

Num navegador, acesse o endereço http://locahost:1313/ (a porta 1313 pode variar).

Para encerrar o servidor de desenvolvimento do Hugo, aperte Ctrl+C na linha de comando.

Adicionar conteúdo

Adicione uma nova página para o site:

hugo new content content/posts/my-first-post.md

Veja que todo conteúdo deve ser colocado na pasta content. Não se esqueça de ler mais sobre a estrutura de pastas do Hugo.

O arquivo criado com o comando new content tem essa estrutura:

+++
title = 'My First Post'
date = 2025-04-14T22:26:31-03:00
draft = true
+++

Para tornar o conteúdo publicável, é preciso mudar draft the true para false.

O legal de Hugo é poder escrever o conteúdo em Markdown, que é mais simples de editar do que um arquivo HTML. Experimente algo assim:

+++
title = 'My First Post'
date = 2025-04-14T22:26:31-03:00
draft = true
+++
## Introduction

This is **bold** text, and this is *emphasized* text.

Visit the [Hugo](https://gohugo.io) website!

Salve o arquivo e utilize o servidor de desenvolvimento do Hugo para visualizar o site. Utilize qualquer dos comandos abaixo:

hugo server --buildDrafts
hugo server -D

Configurar o site

Na raiz do projeto, abra o arquivo hugo.toml com um editor de textos e faça as alterações necessárias:

baseURL = 'https://example.org/'
languageCode = 'en-us'
title = 'My New Hugo Site'
theme = 'ananke'

No meu site, eu acrescentei algumas personalizações. Com este código, o botão read more será apresentado como Leia mais:

[params]
read_more_copy = "Leia mais"

E, tendo criado algumas posts na pasta content/posts, bem como as páginas proficohq, sobre e rss, garanti a existência de um menu com o seguinte trecho de código:

[[menu.main]]
  name = "Início"
  url = "/"
  weight = 10

[[menu.main]]
  name = "Blog"
  url = "/posts"
  weight = 20

[[menu.main]]
  name = "Profico-HQ"
  url = "/proficohq"
  weight = 30

[[menu.main]]
  name = "Sobre"
  url = "/sobre"
  weight = 40

[[menu.main]]
  name = "RSS"
  url = "/rss"
  weight = 50

E, para apresentar os posts com data no formato YYYY-MM-DD, procurei nos arquivos do tema ananke (pasta themes/ananke) aqueles que possuíam o padrão date_format, colocando a data “2006-01-02”.

Publicar o site

Antes de publicar, lembre-se de garantir que todos os arquivos da pasta content que precisam ser publicados estejam marcados com draft = false:

draft = false

Agora, para publicar, execute o comando:

hugo

Os arquivos gerados pelo Hugo estarão salvos na pasta public. Basta copiar estes arquivos para seu servidor web. No meu caso, uso um cliente ftp e copio para a pasta public_html da hospedagem contratada.