Hugo é um gerador de sites estático (SSG) escrito em Go (aka Golang), uma linguagem de programação compilada de alto desempenho frequentemente usada para desenvolver aplicativos e serviços backend.

Hoje, Hugo é capaz de gerar a maioria dos sites em segundos (<1 ms por página). Isso explica por que Hugo fatura a si mesmo como “a estrutura mais rápida do mundo para construir sites”

Neste artigo, vamos dar uma olhada na história do Hugo, o que o torna tão rápido, e como você pode começar a construir seu próprio site estático com o Hugo.

O que é Hugo? E por que ele é popular?

Página inicial do site do Hugo
Página inicial do site Hugo

Steve Francia desenvolveu originalmente o gerador estático Hugo em 2013, e Bjørn Erik Pedersen assumiu a liderança do projeto em 2015. Hugo é um projeto open-source, o que significa que seu código pode ser visto e melhorado por qualquer pessoa.

Como um gerador de sites estático, Hugo pega arquivos content Markdown, os executa através de templates de temas e gera arquivos HTML que você pode facilmente distribuir online. E faz tudo isso extremamente rápido.

Em 2021, há dezenas, se não centenas, de geradores estáticos. Todo gerador de site estático tem seu apelo. Jekyll é popular entre os desenvolvedores Ruby, e embora não seja tão rápido quanto outras opções, foi um dos primeiros geradores de sites estáticos a ver a adoção generalizada. Gatsby é outro SSG popular que é bem adequado para o desenvolvimento de sites estaticamente implantáveis que são dinâmicos em funcionalidade.

Então, com tantos SSGs por aí, o que faz Hugo se destacar?

Hugo orgulha-se de ser 'a estrutura de construção de site mais rápida do mundo' ⚡️ então se você está procurando uma maneira de construir rapidamente um site estático, comece aqui ⬇️Click to Tweet

Hugo é rápido

Em termos de desempenho bruto, Hugo é o melhor gerador de site estático do mundo. Comparado com Jekyll, Hugo mostrou ser 35x mais rápido pelo Forestry. Similarmente, Hugo pode render um site de 10.000 páginas em 10 segundos, uma tarefa que levaria mais de meia hora para ser completada por Gatsby. Hugo não só é o SSG mais rápido em termos de tempo de construção, como também é rápido de instalar.

Hugo embarca como um executável independente, ao contrário de Jekyll, Gatsby, e outros SSGs que requerem a instalação de dependências com um gerenciador de pacotes. Isto significa que você pode baixar e usar Hugo imediatamente sem ter que se preocupar com as dependências de software.

A modelagem é mais fácil com Hugo

Na linguagem SSG, “templating” refere-se ao processo de adição de placeholders para inserção dinâmica de conteúdo dentro de uma página HTML. Para acessar o título de uma página, você pode usar a variável {{ .Title }}. Assim, dentro de um template HTML Hugo, é comum ver o {{ .Title }} embrulhado em tags H1 como tal:

<h1>{{ .Title }}</h1>

No momento da construção, Hugo pegará automaticamente o título dentro de um arquivo content e inserirá o título entre as duas tags <h1>. Hugo tem uma variedade de variáveis de modelos embutidas, e você pode até mesmo escrever funções personalizadas para processar dados em tempo de compilação. Para templates, Hugo usa as bibliotecas incorporadas html/template e text/template. Isto ajuda a reduzir o inchaço dos aplicativos porque Hugo não precisa instalar bibliotecas de terceiros para a criação de templates.

Aqui está um exemplo de um modelo da homepage index.html do popular tema da Ananke. Como você pode ver, ele se assemelha a um arquivo HTML padrão com algum código de template adicional:

TBD: GRAB CODE FROM HERE: https://github.com/theNewDynamic/gohugo-theme-ananke

Como instalar Hugo

Hugo embarca como um executável compilado, o que significa que você não terá que baixar e gerenciar muitas dependências apenas para começar. Ele está disponível para MacOS, Windows e Linux.

Como instalar Hugo no MacOS e Linux

O método de instalação recomendado para MacOS e Linux requer o Homebrew, um gerenciador de pacotes para instalação e atualização de aplicativos. Se você ainda não tiver o Homebrew instalado, você pode instalá-lo executando o comando abaixo no Terminal:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Após Homebrew ter sido instalado, execute o comando abaixo para instalar Hugo:

brew install hugo

Como instalar Hugo no Windows

Para usuários do Windows, Hugo pode ser instalado usando os gerentes de pacotes Chocolatey ou Scoop. Como as instruções de instalação do Chocolatey e Scoop são um pouco mais complexas que as do Homebrew, nós recomendamos consultar as páginas oficiais de documentação deles aqui e aqui.

Depois de instalar Chocolatey ou Scoop, você pode instalar Hugo usando um dos seguintes comandos (dependendo do seu gerenciador de pacotes):

choco install hugo-extended -confirm
scoop install hugo-extended

Como verificar se Hugo está instalado corretamente

Para verificar se Hugo foi corretamente instalado, execute o seguinte comando:

hugo version

Este comando Terminal deve emitir informações sobre a versão atualmente instalada do Hugo dessa forma:

hugo v0.85.0+extended darwin/arm64 BuildDate=unknown

Comandos e configuração do Hugo

Antes de mergulharmos na criação de um site estático com Hugo, vamos nos familiarizar com seus vários comandos CLI e parâmetros do arquivo de configuração.

Comandos do Hugo CLI

O Hugo CLI também tem uma variedade de bandeiras para especificar opções adicionais para alguns comandos. Para ver uma lista completa de bandeiras Hugo (há muitas delas), nós recomendamos usar o comando hugo help para exibir uma lista de todas as bandeiras disponíveis.

O arquivo de configuração do Hugo

O arquivo de configuração do Hugo suporta três formatos: YAML, TOML, e JSON. Da mesma forma, o arquivo de configuração do Hugo é config.yml, config.toml, ou config.json, e você pode encontrá-lo no diretório raiz de um projeto Hugo.

Arquivo de configuração Hugo
Arquivo de configuração Hugo

Aqui está como é um típico arquivo de configuração Hugo em formato YAML:

DefaultContentLanguage: en

theme:

- kinsta-static-site

contentdir: content

layoutdir: layouts

publishdir: public

paginate: 5

title: Kinsta Static Site

description: "This is a static site generated with Hugo!"

permalinks:

post: :slug/

page: :slug/

tags: "tag/:slug/"

author: "author/:slug/"

Se você já usou WordPress ou outro CMS antes, algumas das opções de configuração podem parecer familiares para você. Por exemplo, kinsta-static-site é o nome do tema do site, Kinsta Static Site é o meta title SEO, e paginate (o número de posts por página) é 5.

Hugo tem dezenas de opções de configuração, todas as quais você pode explorar na documentação oficial do Hugo. Se você precisar fazer qualquer mudança na configuração global enquanto desenvolve um site Hugo, é provável que você precise editar este arquivo de configuração.

Como criar um site Hugo

Agora que nós passamos por como instalar e usar o Hugo CLI e as bases do arquivo de configuração do Hugo, vamos criar um novo site Hugo.

Para criar um site Hugo, use o comando abaixo (sinta-se livre para mudar my-hugo-site para outra coisa, se você quiser):

hugo new site my-hugo-site

Criar um novo site Hugo
Criar um novo site Hugo

A seguir, navegue até a pasta do site, e você deve ver os seguintes arquivos e pastas: arquivo config.toml, pasta archetypes, pasta content, pasta layouts, pasta themes, pasta data e pasta static. Vamos rever rapidamente o que é cada um desses arquivos e pastas.

O arquivo config.toml do Hugo

Como destacamos acima, o arquivo primário de configuração do Hugo contém configurações globais para o seu site.

Pasta archetypes do Hugo

A pasta archetypes é onde você armazena os modelos content formatados em Markdown. Os archetypes são especialmente úteis se o seu site tem múltiplos formatos de conteúdo. Com os archetypes Hugo, você pode criar um modelo para cada tipo de conteúdo em seu site. Isto permite que você pré-popule os arquivos Markdown gerados com todas as configurações necessárias.

Por exemplo, se você tem um tipo de conteúdo podcast para exibir seus episódios de podcast, você pode criar um novo archetype em archetypes/podcast.md com o conteúdo abaixo:

---

title: "{{ replace .Name "-" " " | title }}"

date: {{ .Date }}

description: ""

season:

episode:

draft: true

---

Com este archetype de podcast, você pode então usar o comando abaixo para criar um novo post:

hugo new podcast/s1e6_interview-with-kinsta-ceo.md

Agora, se você abrir o post recém-criado, você deve ver isto:

---

title: "Interview with Kinsta CEO"

date: 2021-05-20T13:00:00+09:00

description: ""

Season: 1

episode: 6

draft: true

---

Sem archetypes, você teria que especificar manualmente os parâmetros do front matter para cada novo post que você criar. Embora os archetypes possam parecer complexos e desnecessários no início, eles podem acabar economizando muito tempo no longo prazo.

Pasta content do Hugo

A pasta de content é para onde vai o conteúdo real do seu post. Hugo suporta tanto os formatos Markdown quanto HTML, sendo Markdown a opção mais popular devido à sua facilidade de uso. Além de ser o espaço de armazenamento geral para posts, você pode usar a pasta content para organizar melhor o conteúdo dos posts.

Hugo trata cada diretório de nível superior na pasta content como uma seção de conteúdo. As seções content no Hugo são similares aos tipos de posts personalizados no WordPress. Por exemplo, se seu site tem posts, páginas e podcasts, sua pasta content teria posts, páginas e diretórios de podcasts onde arquivos conteúdo para estes diferentes tipos de posts viveriam.

Pasta layouts do Hugo

A pasta layouts contém arquivos HTML que definem a estrutura do seu site. Em alguns casos, você pode ver um site Hugo sem uma pasta layouts porque ele não tem que estar no diretório raiz do projeto e pode residir dentro de uma pasta themes.

Similar aos temas do WordPress que usam PHP para templates, os templates Hugo consistem de HTML base com templates dinâmicos adicionais alimentados pelas bibliotecas incorporadas do Golang html/template e text/template. Os vários arquivos de templates HTML necessários para gerar a marcação HTML do seu site estão na pasta de layouts.

Pasta themes do Hugo

Para sites que preferem uma forma mais auto-contida de armazenar arquivos de modelos e ativos, Hugo suporta uma pasta themes. Os themes do Hugo são similares aos temas do WordPress, pois eles são armazenados em um diretório de temas e contêm todos os templates necessários para um tema funcionar.

Enquanto alguns usuários Hugo preferem manter arquivos relacionados a temas no diretório raiz do projeto, armazenar esses arquivos dentro da pasta themes permite um gerenciamento e compartilhamento mais fácil.

Pasta data do Hugo

A pasta data do Hugo é onde você pode armazenar dados suplementares (em formato JSON, YAML ou TOML) que são necessários para gerar as páginas do seu site. Os arquivos data são benéficos para conjuntos de dados maiores que podem ser incômodos de armazenar diretamente em um arquivo content ou modelo.

Por exemplo, se você quisesse criar uma lista de taxas de inflação em USD de 1960 a 2020, seriam necessárias cerca de 80 linhas para representar os dados (uma linha para cada ano). Ao invés de colocar estes dados diretamente em um arquivo content ou modelo, você pode criá-los na pasta data e preenchê-los com as informações necessárias.

Pasta static do Hugo

A pasta static do Hugo é onde você armazena os ativos estáticos que não requerem nenhum processamento adicional. A pasta static é normalmente onde os usuários do Hugo armazenam imagens, fontes, arquivos de verificação DNS, e muito mais. Quando um site Hugo é gerado e salvo em uma pasta para fácil implantação, todos os arquivos na pasta static são copiados como estão.

Se você está se perguntando porque não mencionamos arquivos JavaScript ou CSS, é porque eles são freqüentemente processados dinamicamente através de pipelines durante o desenvolvimento do site. No Hugo, os arquivos JavaScript e CSS são normalmente armazenados dentro da pasta themes porque eles requerem processamento adicional.

Como adicionar um tema a um site Hugo

Fazer o download e instalar um tema pré-fabricado é uma ótima maneira de começar com Hugo. Os temas do Hugo vêm em todos os formatos e tamanhos, e muitos deles estão disponíveis gratuitamente no repositório oficial de temas do Hugo. Vamos em frente e instalar o popular tema do Hyde em nosso site Hugo.

Primeiro, navegue até a pasta themes do seu projeto no Terminal:

cd <hugo-project-directory>/themes/

Em seguida, use Git para clonar o tema Hyde no diretório themes do seu projeto.

git clone https://github.com/spf13/hyde.git

A seguir, adicione a seguinte linha ao seu arquivo config.toml para ativar o tema Hyde:

theme = "hyde"

Neste ponto, o tema Hyde é instalado e configurado. O próximo passo é iniciar o servidor web de desenvolvimento integrado do Hugo para visualizar o site no seu navegador web.

Como pré-visualizar um site no Hugo

Hugo é enviado com um webserver integrado para fins de desenvolvimento, o que significa que você não precisa instalar um webserver de terceiros como Nginx ou Apache apenas para visualizar seu site localmente.

Para iniciar o servidor web do Hugo, execute o comando abaixo no diretório raiz do seu projeto:

hugo server -D

Hugo construirá então as páginas do seu site e as disponibilizará em http://localhost:1313/:

Servidor de desenvolvimento local Hugo
Servidor de desenvolvimento local Hugo

Se você visitar a URL no seu navegador, você deve ver o seu site Hugo com o tema Hyde:

Hugo site exibindo com o tema Hyde
Hugo site exibindo com o tema Hyde

Por padrão, o servidor de desenvolvimento local do Hugo irá observar as mudanças e reconstruir o site automaticamente. Como a velocidade de construção do Hugo é tão rápida, as atualizações do seu site podem ser vistas em tempo quase real – algo que é raro de se ver no mundo gerador de sites estáticos. Para demonstrar isso, vamos criar nosso primeiro post no Hugo.

Como adicionar conteúdo a um site Hugo

Adicionar conteúdo a um site Hugo é muito diferente de um CMS completo como WordPress ou Ghost. Com Hugo, não há uma camada de CMS embutida para gerenciar seu conteúdo. Ao invés disso, espera-se que você gerencie e organize as coisas como você achar melhor.

Em outras palavras, não há uma maneira explicitamente “correta” de fazer o gerenciamento de conteúdo no Hugo. Nós vamos compartilhar um método de adicionar e gerenciar conteúdo nesta seção, mas sinta-se livre para mudar as coisas à medida que você se familiarizar mais com Hugo.

Seções content no Hugo

No Hugo, a primeira ferramenta de organização de conteúdo que você tem à sua disposição é a seção content. Uma seção de conteúdo no Hugo é similar a um tipo de post no WordPress – não apenas você pode usá-la como um filtro de conteúdo, mas você também pode usá-la como um identificador ao criar temas personalizados.

Por exemplo, se você tiver uma pasta de seção de conteúdo do blog, você pode usá-la para armazenar todos os seus posts no blog e renderizar um modelo de página específico que se aplica apenas aos posts do blog.

Como adicionar posts no Hugo

Com isso em mente, vamos criar uma seção de conteúdo para posts em blogs e adicionar alguns pedaços de conteúdo. Crie uma nova pasta chamada posts na pasta content do seu projeto – esta é a seção de conteúdo.

Vamos criar outra camada organizacional dentro da pasta posts, criando uma pasta 2021. Neste ponto, o seu diretório content deve ser parecido com este:

Diretório de conteúdo Hugo
Diretório content do Hugo

Agora, vamos criar nosso primeiro post. Como discutimos anteriormente, Hugo suporta tanto Markdown quanto arquivos HTML para conteúdo. Em geral, é melhor ficar com os arquivos Markdown porque eles são mais fáceis de escrever, formatar e ler.

Na pasta content/posts/2021, crie um novo arquivo que termina em .md (a extensão do arquivo Markdown). Você pode nomear o arquivo como você quiser, mas a sintaxe recomendada para nomear um arquivo content do Hugo é YYYY-MM-DD-a-sample-post.md.

Além de criar manualmente um arquivo content, você também pode usar o Hugo CLI para criar um novo post com o comando abaixo (certifique-se de executar o comando a partir do diretório do seu projeto):

hugo new posts/2021/2021-08-30-a-sample-post.md

Observe como a pasta content está faltando no caminho acima. Isto é porque Hugo assume que todos os arquivos de conteúdo irão para a pasta content por padrão.

Se você abrir o arquivo content recentemente criado, você deve ver algumas linhas de metadados na parte superior do documento que se parecem com isto:

---

title: "2021 08 30 a Sample Post"

date: 2021-08-30T13:44:28+09:00

draft: true

---

Este metadados, que é formatado em YAML, é chamado de “front matter.” O front matter auto-gerada é um benefício significativo do uso do Hugo CLI. O front matter é onde os dados únicos para um post (nome do post, dados, status do rascunho, tags, categorias, etc.) são armazenados. O formato padrão para o front matter pode ser configurado por seção usando archetypes.

Agora vamos adicionar algum texto ao post. Ao escrever um post, certifique-se sempre de que seu conteúdo esteja abaixo do front matter, assim:

Blog post em Hugo
Blog post no Hugo

Assim que você salvar o arquivo content, você deve ver Hugo reconstruir o seu site no Terminal. Na captura da tela abaixo, você pode ver Hugo reconstruir o site inteiro em 22 ms!

Reconstrução do site Hugo
Reconstrução do site Hugo

Se você visitar seu site Hugo em seu navegador, você deve ver o novo post.

Hugo site com um post
Site Hugo com um post

Como adicionar uma página no Hugo

Agora que adicionamos um post ao nosso site Hugo, vamos adicionar uma página. A maioria dos sistemas de gerenciamento de conteúdo, incluindo WordPress, distingue entre postagens e páginas. Tipicamente, um post é um conteúdo datado, enquanto uma página consiste de conteúdo evergreen ou estático.

Para criar uma página, nós precisamos primeiro de uma seção content da página. Para fazer isso, crie uma pasta chamada pages na pasta content do Hugo. Depois disso, use o comando abaixo para adicionar uma nova página “Sobre” ao seu site:

hugo new pages/about.md

Observe como a convenção de nomenclatura das páginas difere dos posts. Ao contrário dos posts, as páginas não estão vinculadas a uma data específica, então é desnecessário incluir a data de criação no nome do arquivo.

Agora, vamos adicionar algum texto à página “Sobre”:

Sobre a página em Hugo
Sobre a página no Hugo

Neste ponto, você deve ver a página Sobre no seu navegador da web:

Sobre a página no navegador da web
Sobre a página no navegador da web

Agora que temos duas seções de conteúdo – posts e páginas – vamos analisar como fazer algumas customizações no site, como editar o título e a descrição, adicionar a página Sobre ao menu da barra lateral, alterar o formato dos links permanentes e remover páginas do feed dos posts.

Como mudar o título e a descrição do site

O método exato para mudar o título e a descrição do site depende da configuração do seu site e/ou tema ativo. No caso do tema Hyde, o título e a descrição do site podem ser alterados no arquivo de configuração do Hugo (config.toml).

Nós sabemos disso por causa do seguinte código do tema que torna a barra lateral:

<aside class="sidebar">

<div class="container sidebar-sticky">

<div class="sidebar-about">

<a href="{{ .Site.BaseURL }}"><h1>{{ .Site.Title }}</h1></a>

<p class="lead">

{{ with .Site.Params.description }} {{.}} {{ else }}An elegant open source and mobile first theme for <a href="http://hugo.spf13.com">hugo</a> made by <a href="http://twitter.com/mdo">@mdo</a>. Originally made for Jekyll.{{end}}

</p>

</div>

<nav>

<ul class="sidebar-nav">

<li><a href="{{ .Site.BaseURL }}">Home</a> </li>

{{ range .Site.Menus.main -}}

<li><a href="{{.URL}}"> {{ .Name }} </a></li>

{{- end }}

</ul>

</nav>

<p>{{ with .Site.Params.copyright }}{{.}}{{ else }}© {{ now.Format "2006"}}. All rights reserved. {{end}}</p>

</div>

</aside>

As duas partes a serem focadas são:

{{ .Site.Title }}

E..

{{ with .Site.Params.description }} {{.}} {{ else }}An elegant open source and mobile first theme for <a href="http://hugo.spf13.com">hugo</a> made by <a href="http://twitter.com/mdo">@mdo</a>. Originally made for Jekyll.{{end}}

As Chaves ou chavetas {{ }} são parte do motor de modelos do Hugo e permitem a geração dinâmica de dados em páginas renderizadas. Como um exemplo, {{ .Site.Title }} instrui Hugo a verificar o arquivo config.toml e buscar o valor mapeado para a chave Title.

Como a configuração padrão do Hugo usa My New Hugo Site como o título do site, é isso que a barra lateral mostra. Se mudarmos o título do site no config.toml para outra coisa, a mudança também refletirá no frontend.

Vamos em frente e mudar o parâmetro do título no config.toml de My New Hugo Site para Kinsta’s Hugo Site.

Alterando o título do site em Hugo
Alterando o título do site no Hugo

Passando para a descrição do site, você pode ver que o motor de modelos do Hugo suporta lógica condicional. Traduzido para inglês simples, o código abaixo instrui Hugo a verificar se um valor Params está atribuído à chave description no arquivo config.toml. Se não, aqui está uma string padrão a ser usada em seu lugar.

{{ with .Site.Params.description }} {{.}} {{ else }} An elegant open source and mobile first theme for <a href="http://hugo.spf13.com">hugo</a> made by <a href="http://twitter.com/mdo">@mdo</a>. Originally made for Jekyll.{{end}}

Como nós não temos uma descrição configurada no arquivo config.toml, Hugo tem como padrão renderizar “Um tema elegante de código aberto e mobile-first para Hugo feito por @mdo”. Originalmente feito para Jekyll”

Agora vamos atualizar nosso arquivo config.toml de:

baseURL = "http://example.org/"

languageCode = "en-us"

title = "Kinsta's Hugo Site"

theme = "hyde"

Para:

baseURL = "http://example.org/"

languageCode = "en-us"

title = "Kinsta's Hugo Site"

theme = "hyde"

[params]

description = "Kinsta is a premium managed WordPress hosting company."

Como esperado, as mudanças agora também são visíveis no frontend:

Mude a descrição do site Hugo
Mude a descrição do site Hugo

Como remover páginas do post feed

Na maioria dos blogs, é comum que o post feed na página inicial mostre apenas posts. Por padrão, o tema Hyde inclui todos os arquivos content no post feed. Para mudar este comportamento, você precisará editar a função range no modelo index.html, que gera a página inicial.

A função Hugo range itera sobre um conjunto definido de itens e depois faz algo com os dados. Por padrão, o modelo index.html do tema Hyde varia sobre .Site.RegularPages e filtra dados como permalink, título do post e resumo do post antes de renderizar o HTML.

Como .Site.RegularPages inclui todas as páginas regulares sobre o Hugo, incluindo tanto posts quanto páginas, a página “Sobre” é renderizada. Ao alterar os itens de range para .Site.RegularPages "Section" "posts", nós podemos instruir Hugo a filtrar apenas através das páginas regulares na seção posts – os arquivos content na pasta posts que criamos anteriormente.

Vamos fazer essa mudança agora, editando o modelo a partir disso:

Precisa de uma hospedagem rápida, confiável e totalmente segura para seu site WordPress? Kinsta fornece tudo isso e suporte de classe mundial 24 horas por dia, 7 dias por semana, por especialistas em WordPress. Confira nossos planos

{{ define "main" -}}

<div class="posts">

{{- range .Site.RegularPages -}}

<article class="post">

<h1 class="post-title">

<a href="{{ .Permalink }}">{{ .Title }}</a>

</h1>

<time datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}" class="post-date">{{ .Date.Format "Mon, Jan 2, 2006" }}</time>

{{ .Summary }}

{{ if .Truncated }}

<div class="read-more-link">

<a href="{{ .RelPermalink }}">Read More…</a>

</div>

{{ end }}

</article>

{{- end }}

</div>

{{- end }}

A isto:

{{ define "main" -}}

<div class="posts">

{{- range where .Site.RegularPages "Section" "posts" -}}

<article class="post">

<h1 class="post-title">

<a href="{{ .Permalink }}">{{ .Title }}</a>

</h1>

<time datetime="{{ .Date.Format "2006-01-02T15:04:05Z0700" }}" class="post-date">{{ .Date.Format "Mon, Jan 2, 2006" }}</time>

{{ .Summary }}

{{ if .Truncated }}

<div class="read-more-link">

<a href="{{ .RelPermalink }}">Read More…</a>

</div>

{{ end }}

</article>

{{- end }}

</div>

{{- end }}

Depois de fazer esta mudança, a página inicial só exibirá posts como este:

Exibir posts somente na página inicial
Exibir posts somente na página inicial

Como usar as parciais no Hugo

Uma das características mais poderosas do Hugo são os templates parciais – templates HTML embutidos em outro template HTML. Parciais permitem a reutilização de código em diferentes arquivos de template sem gerenciar o código em cada arquivo.

Por exemplo, é comum ver diferentes seções de página (cabeçalho, rodapé, etc.) em seus arquivos parciais separados, que são então chamados dentro do arquivo modelo baseof.html de um tema.

Dentro do arquivo baseof.html no tema Ananke, você pode ver um exemplo de uma parcial na Linha 18 – {{ partial "site-style.html" . }}.

Neste caso, {{ partial "site-style.html" . }} instrui Hugo a substituir o conteúdo da Linha 18 pelo site-style.html na pasta /layouts/partials. Se nós navegarmos para o /partials/site-style.html, nós vemos o seguinte código:

{{ with partialCached "func/style/GetMainCSS" "style/GetMainCSS" }}

<link rel="stylesheet" href="{{ .RelPermalink }}" >

{{ end }}

{{ range site.Params.custom_css }}

{{ with partialCached "func/style/GetResource" . . }}{{ else }}

<link rel="stylesheet" href="{{ relURL (.) }}">

{{ end }}

{{ end }}

Descarregando este código para um arquivo separado, o arquivo modelo baseof.html pode permanecer organizado e fácil de ler. Embora parciais não sejam necessárias, especialmente para projetos básicos, elas vêm a calhar para projetos maiores com funcionalidades mais complexas.

Como usar códigos curtos no Hugo

Os atalhos Hugo são similares aos parciais, pois permitem a reutilização do código em uma variedade de páginas. Os atalhos são arquivos HTML que residem na pasta /layouts/shortcodes. A principal diferença é que as partiais se aplicam aos templates HTML, enquanto os atalhos se aplicam às páginas content Markdown.

No Hugo, os atalhos permitem que você desenvolva módulos de funcionalidade que você pode usar em páginas do seu site sem gerenciar mudanças de código para cada página.

Se você tiver um blog, é provável que você tenha que percorrer o conteúdo corporal de seus posts para atualizar as referências do ano atual. Dependendo de quantos posts você tem no seu site, esta tarefa pode levar muito tempo!

Ao usar um atalho Hugo em seus arquivos content, você não terá que se preocupar em atualizar as referências do ano nunca mais!

Vamos começar criando um atalho em /layouts/shortcodes/current_year.html com o conteúdo abaixo:

{{ now.Format "2006" }}

Os códigos curtos podem ser incorporados nos posts com esta sintaxe – {{< shortcode_name >}}. Em nosso caso, nós podemos chamar o atalho current_year.html com {{< shortcode_name >}} assim:

---

title: "2021 08 30 a Sample Post"

date: 2021-08-30T13:44:28+09:00

draft: true

---

This post was created in the year {{< current_year >}}.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur finibus, velit sit amet vulputate scelerisque, massa turpis fringilla nulla, commodo dapibus urna arcu at nunc. Mauris ultrices convallis ipsum eget facilisis. Curabitur ut rutrum sem. Praesent id nibh non enim mollis porta. Nam mollis, quam et vehicula tristique, lorem ante laoreet orci, sit amet congue tortor nibh sit amet leo. Curabitur lobortis neque tempor, vestibulum lacus nec, condimentum arcu. Nulla fringilla leo sit amet ipsum auctor sagittis. Vivamus aliquam iaculis posuere. Pellentesque malesuada neque sit amet consectetur fringilla. Curabitur felis tellus, mattis in dui vel, vestibulum tincidunt metus. Mauris eget elit dui. Etiam risus nulla, ultricies vitae molestie quis, placerat in magna. Proin interdum, orci ac auctor ullamcorper, tellus ex porta tortor, suscipit luctus libero odio quis arcu.

Phasellus dapibus pellentesque ex eget pulvinar. Proin vitae elit risus. Sed justo nulla, pellentesque eu erat eu, luctus bibendum magna. Curabitur at mi id augue egestas condimentum sed quis lectus. Aenean fringilla nisl sed tincidunt tristique. Cras scelerisque laoreet sapien a faucibus. Vivamus a vehicula arcu. Duis rutrum, massa eu tincidunt eleifend, est nulla faucibus nisl, sit amet consectetur neque velit at velit. Integer fermentum augue ut orci iaculis aliquet. Ut in gravida magna.

Se você visualizar o post no navegador, você deve ver o ano corrente na primeira linha do post assim:

Use um atalho Hugo para gerar automaticamente o ano corrente
Use um atalho Hugo para gerar automaticamente o ano corrente

Como adicionar imagens a um post no Hugo

Ao contrário do WordPress e outros sistemas completos de gerenciamento de conteúdo, Hugo não inclui um sistema de arrastar e soltar para gerenciar imagens. Assim, o projeto de um sistema de gerenciamento de imagens é descarregado para o usuário final.

Embora Hugo não tenha uma maneira padronizada de gerenciar imagens, um método popular baseia-se em armazenar imagens na pasta /static e referenciá-las em posts e páginas usando um código de atalho. Vamos caminhar através de como você pode fazer a organização básica de imagens no Hugo.

A primeira coisa que precisamos fazer é criar uma estrutura organizacional para nossa biblioteca de imagens. Enquanto isso parece complexo, tudo o que é necessário é a criação de alguns diretórios adicionais dentro da pasta /static.

Vamos começar criando uma pasta de uploads em /static. Dentro da pasta de uploads, crie uma pasta chamada 2021 para manter todas as imagens carregadas em 2021.

Gerenciamento de imagens em Hugo
Gerenciamento de imagens no Hugo

A seguir, vamos adicionar duas imagens(blue1.jpg e blue2.jpg) na pasta 2021.

Adicionando imagens à pasta "2021"
Adicionando imagens à pasta “2021”

Em HTML, as imagens são exibidas usando a tag <img>. Por exemplo, para exibir blue1.jpg, nós podemos usar o HTML abaixo:

<img src="/uploads/2021/blue1.jpg" alt="Blue is the warmest color!">

Embora seja possível adicionar este HTML diretamente ao arquivo content Markdown, é melhor criar um atalho que você possa usar para exibir qualquer imagem da pasta de uploads. Desta forma, se você precisar atualizar a tag img, você pode editar o modelo de código de atalho sem editar cada instância da tag img.

Para criar o modelo de atalho, crie um novo arquivo em /layouts/shortcodes/img.html com o conteúdo abaixo:

<img src="/uploads/{{ .Get "src" }}" alt="{{ .Get "alt" }}

A seguir, adicione o atalho abaixo a um post de blog:

{{< img src="2021/blue1.jpg" alt="Blue is also the coolest color!">}

No modelo de atalho, {{ .Get "src" }} e {{ .Get "alt" }} instruem Hugo a buscar o conteúdo dos parâmetros src< e alt< ao chamar um atalho.

Agora, se você recarregar o post do blog, você deve ver a imagem dessa forma:

Atalho de imagem em Hugo
Atalho de imagem no Hugo

Como implantar um site Hugo

Até aqui, você aprendeu como instalar Hugo, criar um site, adicionar um tema, fazer edições básicas nos arquivos de configuração e expandir a funcionalidade do seu site com partials e atalhos. Neste ponto, você deve ter um site funcional que esteja pronto para ser implantado online.

Como Hugo é um gerador de sites estático, você pode implantar o HTML, CSS e JS que ele gera em qualquer lugar com um webserver. Como os requisitos técnicos para servir sites estáticos são tão baixos, você pode hospedá-los gratuitamente em uma grande variedade de provedores como Netlify, Vercel, Cloudflare Pages, e muito mais.

Anteriormente, nós usamos o hugo server -D para gerar um servidor de desenvolvimento local para prever mudanças em nosso site em tempo real. Para gerar o site por completo, nós podemos usar o comando hugo no diretório raiz do nosso projeto. Depois que a geração do site estiver completa, você deve ver uma nova pasta pública no diretório do seu projeto. Dentro desta pasta, você encontrará todos os arquivos que precisam ser carregados em um servidor ou serviço de armazenamento em nuvem como o Amazon S3.

Gerar seu site Hugo localmente
Gerar seu site Hugo localmente

Gerar seu site localmente e fazer upload manual para o Amazon S3 ou um servidor rodando Nginx é uma maneira de implantar um site gerado estaticamente. Entretanto, não é a mais eficiente porque requer que você carregue novos arquivos manualmente toda vez que você fizer uma mudança.

Ao invés disso, uma opção melhor é conectar a pasta do seu projeto Hugo a um repositório GitHub e ativar o repositório GitHub a um serviço de implantação automatizado como o Netlify. Com esta configuração, você pode editar seu site, pressionar as mudanças no GitHub e acionar uma nova build e deployment no Netlify sem qualquer intervenção manual. Agora, vamos caminhar através de como fazer tudo isso!

Como fazer o upload do seu projeto Hugo para o GitHub

Primeiro, você precisará criar um repositório GitHub para o seu projeto. Para fazer isso, crie uma conta GitHub (se você ainda não tem uma) e faça o download do aplicativo oficial do GitHub. Depois de instalar o aplicativo GitHub, clique em File na barra de menu e selecione New Repository. Dê ao repositório um nome à sua escolha, deixe as outras opções em seus estados padrão por enquanto, e clique em Create Repository (Criar Repositório).

Criar um repositório GitHub
Criar um repositório GitHub

Por padrão (em macOS), o aplicativo GitHub cria novos repositórios em /Users/username/Documents/GitHub. Como nós nomeamos nosso repositório como my-hugo-site, nosso repositório pode ser encontrado em /Users/brianli/Documents/GitHub/my-hugo-site.

A seguir, mova todos os arquivos da pasta original do seu projeto para a nova pasta do repositório GitHub. Certifique-se de excluir a pasta public porque nós não precisamos fazer upload dessa pasta para o GitHub.

Copie o projeto para a pasta do repositório GitHub
Copie o projeto para a pasta do repositório GitHub

Se você navegar de volta para o aplicativo GitHub, você deve ver agora uma lista de arquivos alterados. Para carregar o repositório no GitHub, adicione um resumo, clique em Commit to main, e clique em Publish Repository no canto superior direito.

Comprometa o repo, e faça o upload para o GitHub
Comprometa o repo, e faça o upload para o GitHub

Por padrão, a opção “Mantenha este código privado” é marcada. Se você quiser que seu código seja de código aberto e acessível ao público, sinta-se à vontade para desmarcá-lo. Finalmente, clique em Publish Repository mais uma vez.

Publique seu repositório GitHub
Publique seu repositório GitHub

Agora, se você for ao GitHub, você deve ver seu repositório online dessa forma:

Repositório do projeto Hugo no GitHub
Repositório do projeto Hugo no GitHub

Como vincular o GitHub Repo à Netlify

Se você ainda não tem uma conta Netlify, inscreva-se para uma aqui. Para vincular um repositório GitHub à Netlify, clique em New site from Git no painel de controle da Netlify.

Novo site de Git on Netlify
Novo site de Git on Netlify

Em Continuous Deployment, selecione a opção GitHub.

Selecione "GitHub" para implantação contínua
Selecione “GitHub” para implantação contínua

Em seguida, use a caixa de busca para encontrar o repositório do seu projeto Hugo.

Encontre seu repositório do projeto Hugo
Encontre seu repositório do projeto Hugo

A seguir, especifique as configurações para a implantação contínua. Como Netlify pode detectar uma configuração Hugo, as configurações padrão devem funcionar bem para um desdobramento básico.

À medida que você se familiariza mais com Hugo, você pode se aprofundar em variáveis de ambiente, comandos de construção personalizados e muito mais. Por enquanto, configurar o comando de construção para hugo e o diretório público para public permitirá que você implante um site Hugo simples. Depois de especificar o comando build e o diretório público, clique em Deploy Site.

Implantar o site Hugo na Netlify
Implantar o site Hugo na Netlify

Como Hugo é um gerador de site estático tão rápido, a implantação deve levar apenas alguns segundos para um site básico. Assim que a implantação terminar, você será capaz de ver uma URL de encenação no painel do Netlify. Clique na URL para ver o site implantado.

Netlify URL de encenação
Netlify URL de encenação

Aqui está o nosso site Hugo no Netlify. Como você pode ver, ele é idêntico ao site em nosso ambiente local:

Hugo site em Netlify
Hugo site em Netlify

Neste ponto, você pode configurar um domínio personalizado e um certificado SSL para o seu site hospedado na Netlify. Para fazer isso, recomendamos que você se leia a documentação oficial da Netlify.

Como nós ligamos a Netlify ao GitHub, um novo compromisso com o projeto Hugo, o GitHub repo irá automaticamente acionar uma nova implantação na Netlify!

Pronto para construir um site estático em tempo recorde? ⏱ Comece com Hugo ⚡️Click to Tweet

Resumo

Hugo é um dos mais populares geradores de sites estáticos do mundo, e por uma boa razão. Ele não só tem um processamento de construção super rápido, mas também vem com poderosos recursos de modelos que suportam parciais e atalhos.

Neste tutorial, você aprendeu como configurar Hugo, criar um novo projeto, adicionar arquivos content, editar arquivos de temas e implantar um site estático finalizado. Nós recomendamos passar pela documentação oficial do Hugo para aprender mais sobre Hugo e seus recursos mais avançados como funções personalizadas, front matter e buildpacks CSS/JS.

Qual a sua opinião sobre o Hugo e outros geradores de sites estáticos? Por favor, informe-nos nos comentários abaixo!


Economize tempo, custos e otimize o desempenho do seu site com:

  • Ajuda instantânea de especialistas em hospedagem do WordPress, 24/7.
  • Integração do Cloudflare Enterprise.
  • Alcance global com 29 centros de dados em todo o mundo.
  • Otimização com nosso monitoramento integrado de desempenho de aplicativos.

Tudo isso e muito mais em um plano sem contratos de longo prazo, migrações assistidas e uma garantia de 30 dias de devolução do dinheiro. Confira nossos planos ou entre em contato com as vendas com as vendas para encontrar o plano certo para você.