Criar site no Hugo é algo extremamente rápido e fácil, com poucos comando você consegue criar toda um base para seu site com um código fonte bem leve e totalmente preparado para SEO.

Pré-requisitos:

  • Hugo
  • Git

Presumindo que você já tenha o Hugo instalado no seu sistema operacional, caso não tenha, veja o tutorial abaixo para instalação no Windows ou linux Ubuntu.

https://tiagoscosta.com.br/posts/hugo-framework-instalação-no-windows

https://tiagoscosta.com.br/posts/hugo-framework-instalação-no-ubuntu

Criando o site Link para o cabeçalho

Observação: Se estiver usando Windows, não use o CMD ou PowerShell, use o Git Bash, pois assim você não terá problema de enconding de arquivo (caracteres estranho).

Escolha algum diretório do seu SO para criar seu site e no terminal execute os comandos abaixo:

# O comando abaixo cria um novo site
# estou criando como "first-site", mas você pode dar qualquer nome
hugo new site first-site

# Entre no diretório do projeto
cd first-site

# Cria um repositório do git, pois puxaremos o tema do git
git init

# Puxa e instala o tema no seu projeto. Usaremos o tema "Ananke"
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

# Esse comando define o tema instalado como o padrão no arquivo
# de configuração que se chama "hugo.toml"
echo "theme = 'ananke'" >> hugo.toml

# Inicie o servidor de desenvolvimento para visualizar o site
hugo server

Acesse seu site através do endereço:

http://localhost:1313

Para parar o servidor pressione as teclas CTRL + C

O comando “hugo server” compila o site, criando todo o site estático no diretório public e já serve através do servidor desenvolvimento.

site

Estrutura de pastas Link para o cabeçalho 

first-site/
├── archetypes/
├── assets/
├── content/
├── data/
├── i18n/
├── layouts/
├── public/           <-- aparece quando o site é compilado
├── resources/
├── static/
├── themes/
└── hugo.toml         <-- configuração do site

  • archetypes Link para o cabeçalho

    Local onde é definido os modelos com front matter e markdown que serão utilizados na criação do site.

    Todo tema já possui seu modelo default, caso necessário, você pode sobrepor esse modelo criando seus arquivos personalizados aqui.

  • assets Link para o cabeçalho

    Local onde você pode definir recursos utilizados pelo site como: imagens, css, sass, javascript e typescript, por exemplo.

    Muitas vezes os temas já possuem seus arquivos default, mas aqui você pode personalizar e sobrepor esses arquivos.

  • content Link para o cabeçalho

    Local que armazena as páginas que você cria, a maior parte do conteúdo do site residirá aqui.

  • data Link para o cabeçalho

    Local que pode armazenar arquivos (csv, json, toml, yaml e xml) que podem ser usados para injetar conteúdo dinâmico no site

  • i18n Link para o cabeçalho

    Nesse local você consegue configurar e traduzir seu site para o idioma que você deseja, tornando seu site multilíngue.

  • layouts Link para o cabeçalho

    Local onde é definido o layout html ou parte dele que será utilizado no seu site.

    Todo tema já possui sua configuração default de layout com diversos arquivos, caso necessário, você pode sobrepor o layout criando os arquivos personalizados aqui.

  • public Link para o cabeçalho

    Essa pasta só aparece após a compilação do site através dos comandos hugo ou hugo server.

    Nela é armazenada o site em si que pode ser armazenado em qualquer provedor de hospedagem.

  • resources Link para o cabeçalho

    Essa pasta só aparece quando você compila o site através dos comandos hugo ou hugo server.

    Nela é armazenado o cache no momento da compilação do site.

  • static Link para o cabeçalho

    Usada para armazenar arquivos estáticos que serão utilizados no site como: favicon.icon, imagens que serão utilizados em algum lugar do layout, robots.txt, entre outros.

  • theme Link para o cabeçalho

    Diretório onde fica instalado os temas.

  • hugo.toml Link para o cabeçalho

    Principal arquivo de configuração do framework, inclusive é nele que definimos qual tema será utilizado.

Mais informações sobre estrutura de diretórios:

https://gohugo.io/getting-started/directory-structure/

Adicionando uma nova página Link para o cabeçalho 

# Para criar uma nova página, execute o comando
hugo new content content/posts/my-first-post.md

Isso vai gerar um arquivo my-first-post.md no diretório content/posts.

Abra o arquivo no seu editor de código e veja que ele possui os seguintes metadados:

+++
title = 'My First Post'
date = 2024-01-14T07:07:07+01:00
draft = true
+++

title = Título da página

data = Data de publicação (Se você botar uma data futura, só vai aparecer quando a data chegar)

draft = Se estiver true é rascunho e por padrão rascunho não é exibido. Para exibir publicação defina false.

Como rascunho não é exibido, localmente queremos visualiza-lo, para isso execute:

# Sobe o servidor de desenvolvimento exibindo inclusive os rascunhos
hugo server -D ou hugo server --buildDrafts

Acesse o site novamente

http://localhost:1313

Você já verá a página que acabou de criar:

página

Compilar o site para publicação Link para o cabeçalho

Quando você compila o site, ele é todo gerado no diretório public, mas sem as páginas de rascunhos ou com datas futuras.

# Para compilar, execute
hugo

Configure o site Link para o cabeçalho

Na pasta raiz existe um arquivo chamado hugo.toml.

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

Nele você definir diversas coisas no seu site como:

  • baseURL

    Defina a URL de produção incluindo o protocolo e terminando com barra, ex.: htttps://exemplo.com/

  • Idioma padrão

    Defina pt-br

  • título do seu site

    Coloque um título condizente com a proposta do seu site

  • tema utilizado

    Teste alguns temas e defina o que você mais gostar ou te atender melhor

Essas são algumas e existem outras diversas configurações para personalizar seu site, muitas delas podem variar de acordo com cada tema, pois cada um tem suas particularidades.

Agora é só hospedar seu site em algum provedor!

Segue abaixo algumas sugestões de provedores para hospedar seu site:

Agora você já pode facilmente criar e manter seu blog ou site com esse framework poderoso 🙂!

Em breve abordarei mais recursos sobre o assunto.

Comandos úteis

# COMANDOS HUGO

# Compila o site, o resultado fica diponível na pasta public
hugo

# Sobe o site localmente sem exibir postagens de rascunhos (padrão do Hugo)
hugo server

# Sobe o site localmente exibindo postagens de rascunhos
hugo server -D

# Sobe o site localmente deixando-o acesssível de qualquer dispositivo na rede
# Bom para acessar de outra máquina ou visualizar no celular
hugo server --bind 0.0.0.0 --baseURL http://0.0.0.0 --port 1313 -D
Ou
hugo server --bind=0.0.0.0 --baseURL=http://0.0.0.0:1313 -D

# Cria uma nova postagem
hugo new content content/posts/my-first-post.md

# Listar comandos
hugo -h

# Mais detalhes dos comandos na documentação oficial
https://gohugo.io/commands

Código fonte desse tutorial

https://github.com/tiagotsc/hugo-first-site

Links úteis

Documentação oficial do Hugo

https://gohugo.io/documentation/

Funções presentes no Hugo

https://gohugo.io/quick-reference/functions/

Variáveis disponíveis no Hugo

https://gohugobrasil.netlify.app/variables/

Métodos disponíveis no Hugo

https://gohugo.io/methods/