Primeiros Passos Com Hugo

Hugo é um dos mais populares frameworks open-source para geração de sites estáticos. Ele pode ser usado nos sistemas operacionais: Linux, Windows, macOS, OpenBSD, FreeBSD; bem como outros que tenham suporte ao compilador da linguagem Go.

Neste breve artigo irei mostrar como:

  • instalar o Hugo no Linux utilizando o Homebrew;
  • criar um site usando o tema Ananke.

Pré requisitos de sistema:

Para o tutorial deste artigo será necessário ter instalado:

  • Homebrew (para verificar execute: brew --version);
  • Git (para verificar execute: git --version).

Instalação do Hugo

Para instalar o Hugo abra uma sessão do terminal e execute o comando:

brew install hugo

O brew irá baixar os pacotes e instalar o Hugo no seu sistema. Confira se tudo ocorreu bem executando o comando:

hugo version

A saída deverá exibir algo assim: Hugo version

Criando seu primeiro site com Hugo

Agora utilizando os comandos abaixo vamos:

  1. Criar um novo site;
  2. Acessar o diretório onde o site foi criado;
  3. Inicializar um repositório git dentro do diretório raiz do site;
  4. Baixar o tema o tema ananke como um sub módulo git;
  5. Configurar o site para usar o tema recém baixado.
hugo new site meusite
cd meusite
git init
git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke
echo 'theme = "ananke"' >> config.toml

O próximo passo será criar uma página de conteúdo.

hugo new posts/meu-primeiro-post.md

Esse comando irá criar um arquivo na subpasta content/posts/. Abra o arquivo com seu editor de preferência. Aqui vamos usar o nano.

nano content/posts/meu-primeiro-post.md

Veja que o hugo cria a página com alguns metadados, como título e data. Também cria um atributo “draft: true” que indica que a página ainda é um rascunho.

Insira algum texto abaixo dos metadados e salve o arquivo.

Pronto, agora pra ver seu novo site rodando basta executar no terminal:

hugo server -D

Este comando inicializa um servidor local onde você poderá ver o resultado do trabalho feito até aqui. Veja a mensagem de saída informando o endereço (normalmente http://localhost:1313/). Abra esse endereço no seu navegador de preferência e vizualize o resultado.

Bem, chegamos ao fim deste artigo. Num próximo artigo pretendo mostrar outros recursos e algumas customizações possíveis. Obrigado por visitar o blog, e caso tenha alguma sugestão ou comentário use o formulário de contato.

Até a próxima!