Como construir um site estático extremamente rápido com Hugo

Hugo é um gerador de site estático (SSG) escrito em Go (também conhecido como Golang), uma linguagem de programação compilada de alto desempenho frequentemente usada para desenvolver aplicativos e serviços de back-end.

Hoje, Hugo é capaz de gerar a maioria dos sites em segundos (<1 ms por página). Isso explica por que o Hugo se autodenomina “o framework mais rápido do mundo para construir sites”.

Neste artigo, veremos a 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 do Hugo.

O que é Hugo? E por que é popular?

Steve Francia desenvolveu originalmente o gerador de site estático Hugo em 2013, e Bjrn Erik Pedersen assumiu como desenvolvedor líder do projeto em 2015. Hugo é um projeto de código aberto, o que significa que seu código pode ser visualizado e melhorado por qualquer pessoa.

Como um gerador de site estático, Hugo pega arquivos de conteúdo do Markdown, os executa por meio de modelos de tema e cospe arquivos HTML que você pode implantar facilmente online - e faz tudo isso com extrema rapidez.

Em 2021, existem dezenas, senã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 ter ampla adoção. Gatsby é outro SSG popular que é adequado para desenvolver sites estaticamente implementáveis ​​que são dinâmicos em funcionalidade.

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

Hugo é rápido

Em termos de desempenho bruto, Hugo é o melhor gerador de site estático do mundo. Comparado com Jekyll, Hugo mostrou-se 35x mais rápido pelo Forestry. Da mesma forma, Hugo pode renderizar um site de 10.000 páginas em 10 segundos, uma tarefa que Gatsby levaria mais de meia hora para ser concluída. O Hugo não é apenas o SSG mais rápido em termos de tempos de construção, mas também é rápido de instalar.

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

A modelagem é fácil em Hugo

Na linguagem SSG, “modelagem” refere-se ao processo de adicionar espaços reservados para inserção de conteúdo dinâmico em 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 Hugo HTML, é comum ver o {{ .Title }} envolto em tags H1 assim:

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

No momento da construção, Hugo irá automaticamente pegar o título dentro de um arquivo de conteúdo e inserir o título entre as duas tags <h1> . O Hugo tem uma variedade de variáveis ​​de modelagem integradas e você pode até escrever funções personalizadas para processar dados em tempo de compilação. Para modelagem, Hugo usa as bibliotecas html/template e text/template integradas do Go. Isso ajuda a reduzir o inchaço do aplicativo porque o Hugo não precisa instalar bibliotecas de terceiros para modelagem.

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

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

Como instalar o Hugo

O Hugo é fornecido como um executável compilado, o que significa que você não precisará baixar e gerenciar muitas dependências apenas para começar. Está disponível para macOS, Windows e Linux.

Como instalar o 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. Caso ainda não tenha 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 a instalação do Homebrew, execute o comando abaixo para instalar o Hugo:

 brew install hugo

Como instalar o Hugo no Windows

Para usuários do Windows, o Hugo pode ser instalado usando os gerenciadores de pacotes Chocolatey ou Scoop. Como as instruções para instalar o Chocolatey e o Scoop são um pouco mais complexas do que o Homebrew, recomendamos consultar suas páginas de documentação oficial aqui e aqui.

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

 choco install hugo-extended -confirm

 scoop install hugo-extended

Como verificar se o Hugo está instalado corretamente

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

 hugo version

Este comando do Terminal deve gerar informações sobre a versão atualmente instalada do Hugo da seguinte forma:

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

Comandos e configuração do Hugo

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

Comandos Hugo CLI

• hugo check – executa várias verificações de verificação
• hugo config – exibe a configuração de um site Hugo
• hugo convert – converte conteúdo para diferentes formatos
• hugo deploy – implementa seu site em um provedor de nuvem
• hugo env – exibe a versão do Hugo e informações do ambiente
• hugo gen – fornece acesso a vários geradores
• hugo help – exibe informações sobre um comando
• hugo import – permite importar um site de outro local
• hugo list – exibe uma lista de vários tipos de conteúdo
• hugo mod – fornece acesso a vários ajudantes de módulo
• hugo new – permite criar novos conteúdos para o seu site
• hugo server – inicia um servidor de desenvolvimento local
• hugo version – exibe a versão atual do Hugo

O Hugo CLI também possui uma variedade de sinalizadores para especificar opções adicionais para alguns comandos. Para ver uma lista completa de sinalizadores Hugo (há muitos deles), recomendamos usar o comando hugo help para exibir uma lista de todos os sinalizadores 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 do Hugo.

Veja como é um arquivo de configuração típico do Hugo no 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 o 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-título de SEO e paginate (o número de posts por página) é 5 .

O 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 alteração de 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 vimos como instalar e usar o Hugo CLI e os conceitos básicos do arquivo de configuração do Hugo, vamos criar um novo site do Hugo.

Para criar um site Hugo, use o comando abaixo (sinta-se à vontade para alterar my-hugo-site para outra coisa, se desejar):

 hugo new site my-hugo-site

Em seguida, navegue até a pasta do site e você deverá ver os seguintes arquivos e pastas: arquivo config.toml , pasta archetypes , pasta de conteúdo , pasta de layouts , pasta de temas , pasta de dados e pasta estática . Vamos ver rapidamente o que é cada um desses arquivos e pastas.

Arquivo config.toml de Hugo

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

Pasta Arquétipos do Hugo

A pasta archetypes é onde você armazena os modelos de conteúdo formatados no Markdown. Os arquétipos são especialmente úteis se o seu site tiver vários formatos de conteúdo. Com os arquétipos do Hugo, você pode criar um modelo para cada tipo de conteúdo em seu site. Isso permite que você preencha previamente os arquivos Markdown gerados com todas as configurações necessárias.

Por exemplo, se você tiver um tipo de conteúdo de podcast para exibir seus episódios de podcast, poderá criar um novo arquétipo em archetypes/podcast.md com o conteúdo abaixo:

 --- title: "{{ replace .Name "-" " " | title }}" date: {{ .Date }} description: "" season: episode: draft: true ---

Com este arquétipo de podcast, você pode usar o comando abaixo para criar um novo post:

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

Agora, se você abrir a postagem recém-criada, deverá ver isto:

 --- title: "Interview with Kinsta CEO" date: 2021-05-20T13:00:00+09:00 description: "" Season: 1 episode: 6 draft: true ---

Sem arquétipos, você teria que especificar manualmente os parâmetros da matéria-prima para cada nova postagem que criasse. Embora os arquétipos possam parecer complexos e desnecessários no início, eles podem acabar economizando muito tempo a longo prazo.

Pasta de conteúdo do Hugo

A pasta de conteúdo é para onde vai o conteúdo real do seu post. O Hugo suporta os formatos Markdown e HTML, sendo o Markdown a opção mais popular devido à sua facilidade de uso. Além de ser o espaço de armazenamento geral para postagens, você pode usar a pasta de conteúdo para organizar ainda mais o conteúdo da postagem.

Hugo trata cada diretório de nível superior na pasta de conteúdo como uma seção de conteúdo. As seções de conteúdo no Hugo são semelhantes aos tipos de postagem personalizados no WordPress. Por exemplo, se seu site tiver postagens, páginas e podcasts, sua pasta de conteúdo terá diretórios de postagens , páginas e podcasts nos quais os arquivos de conteúdo desses diferentes tipos de postagem residiriam.

Pasta de 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 de layouts porque ele não precisa estar no diretório raiz do projeto e pode residir em uma pasta de tema.

Semelhante aos temas do WordPress que usam PHP para modelagem, os modelos Hugo consistem em HTML base com modelagem dinâmica adicional alimentada pelas bibliotecas html/template e text/template incorporadas do Golang. Os vários arquivos de modelo HTML necessários para gerar a marcação HTML do seu site estão na pasta de layouts .

Pasta Temas do Hugo

Para sites que preferem uma maneira mais independente de armazenar arquivos e ativos de modelo, o Hugo oferece suporte a uma pasta de temas . Os temas Hugo são semelhantes aos temas do WordPress, pois são armazenados em um diretório de temas e contêm todos os modelos necessários para que um tema funcione.

Embora alguns usuários do Hugo prefiram manter os arquivos relacionados ao tema no diretório raiz do projeto, armazenar esses arquivos na pasta de temas facilita o gerenciamento e o compartilhamento.

Pasta de dados Hugo

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

Por exemplo, se você quiser criar uma lista de taxas de inflação do dólar de 1960 a 2020, seriam necessárias cerca de 80 linhas para representar os dados (uma linha para cada ano). Em vez de colocar esses dados diretamente em um arquivo de conteúdo ou modelo, você pode criá-los na pasta de dados e preenchê-los com as informações necessárias.

Pasta Estática Hugo

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

Se você está se perguntando por que não mencionamos arquivos JavaScript ou CSS, é porque eles geralmente são processados ​​dinamicamente por meio de pipelines durante o desenvolvimento do site. No Hugo, os arquivos JavaScript e CSS são comumente armazenados na pasta do tema porque requerem processamento adicional.

Como adicionar um tema a um site Hugo

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

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

 cd <hugo-project-directory>/themes/

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

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

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

 theme = "hyde"

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

Como visualizar um site Hugo

O Hugo vem com um servidor web integrado para fins de desenvolvimento, o que significa que você não precisa instalar um servidor web 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 irá então construir as páginas do seu site e disponibilizá-las em http://localhost:1313/ :

Se você visitar a URL em seu navegador da web, deverá ver seu site Hugo com o tema Hyde:

Por padrão, o servidor de desenvolvimento local de Hugo observará as alterações 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 quase em tempo real – algo raro de se ver no mundo do 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 CMS integrada para gerenciar seu conteúdo. Em vez disso, espera-se que você gerencie e organize as coisas como achar melhor.

Em outras palavras, não há uma maneira explicitamente “correta” de fazer gerenciamento de conteúdo no Hugo. Compartilharemos um método de adição e gerenciamento de conteúdo nesta seção, mas sinta-se à vontade para alterar as coisas à medida que se familiarizar com o Hugo.

Seções de conteúdo em Hugo

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

Por exemplo, se você tiver uma pasta de seção de conteúdo de blog , poderá usá-la para armazenar todas as suas postagens de blog e renderizar um modelo de página específico que se aplica apenas a postagens de blog.

Como adicionar postagens no Hugo

Com isso em mente, vamos criar uma seção de conteúdo para postagens de blog e adicionar alguns conteúdos. Crie uma nova pasta chamada posts na pasta de conteúdo 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, seu diretório de conteúdo deve ficar assim:

Agora, vamos criar nosso primeiro post. Como discutimos anteriormente, o Hugo oferece suporte a arquivos Markdown e HTML para conteúdo. Em geral, é melhor manter 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 termine em .md (a extensão do arquivo Markdown). Você pode nomear o arquivo como quiser, mas a sintaxe recomendada para nomear um arquivo de conteúdo Hugo é YYYY-MM-DD-a-sample-post.md .

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

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

Observe como a pasta de conteúdo está ausente no caminho acima. Isso ocorre porque Hugo assume que todos os arquivos de conteúdo irão para a pasta de conteúdo por padrão.

Se você abrir o arquivo de conteúdo recém-criado, deverá 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 ---

Esses metadados, que são formatados em YAML, são chamados de “questão inicial”. A matéria frontal gerada automaticamente é um benefício significativo de usar o Hugo CLI. A questão principal é onde os dados exclusivos de uma postagem (nome da postagem, dados, status do rascunho, tags, categorias etc.) são armazenados. O formato padrão para o assunto principal pode ser configurado por seção usando arquétipos.

Agora vamos adicionar algum texto ao post. Ao escrever uma postagem, sempre certifique-se de que seu conteúdo esteja abaixo do assunto principal, assim:

Depois de salvar o arquivo de conteúdo, você verá Hugo reconstruir seu site no Terminal. Na captura de tela abaixo, você pode ver Hugo reconstruindo todo o site em 22 ms!

Se você visitar seu site Hugo em seu navegador, deverá ver a nova postagem.

Como adicionar uma página no Hugo

Agora que adicionamos uma postagem ao nosso site Hugo, vamos adicionar uma página. A maioria dos sistemas de gerenciamento de conteúdo, incluindo o WordPress, distingue entre posts e páginas. Normalmente, uma postagem é um conteúdo datado, enquanto uma página consiste em conteúdo perene ou estático.

Para criar uma página, primeiro precisamos de uma seção de conteúdo da página . Para fazer isso, crie uma pasta chamada pages na pasta de conteúdo do Hugo. Depois, 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 das postagens. Ao contrário das postagens, as páginas não estão vinculadas a uma data específica, portanto, não é necessário incluir a data de criação no nome do arquivo.

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

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

Agora que temos duas seções de conteúdo - posts e páginas - vamos ver como fazer algumas personalizaçõ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 de postagem.

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

O método exato de alterar o título e a descrição do site depende da configuração do site e/ou do 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 ).

Sabemos disso por causa do seguinte código de tema que renderiza 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 para focar 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}}

O guidão {{ }} faz parte do mecanismo de modelagem do Hugo e permite dados gerados dinamicamente em páginas renderizadas. Como 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 título do site, é isso que a barra lateral mostra. Se alterarmos o título do site em config.toml para outra coisa, a alteração também refletirá no frontend.

Vamos em frente e mudar o parâmetro title no config.toml de My New Hugo Site para Kinsta's Hugo Site .

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

 {{ 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ão temos uma descrição configurada no arquivo config.toml , Hugo assume como padrão a renderização “Um elegante tema 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 alterações agora também são visíveis no frontend:

Como remover páginas do feed de postagem

Na maioria dos blogs, é comum que o feed de postagens na página inicial exiba apenas postagens. Por padrão, o tema Hyde inclui todos os arquivos de conteúdo no feed de postagem. Para alterar esse comportamento, você precisará editar a função de range no modelo index.html , que gera a página inicial.

A função range de Hugo itera sobre um conjunto definido de itens e então faz algo com os dados. Por padrão, o modelo index.html do tema Hyde abrange .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 normais do Hugo, incluindo posts e páginas, a página “Sobre” é renderizada. Ao alterar os itens do range para .Site.RegularPages "Section" "posts" , podemos instruir Hugo a filtrar apenas as páginas regulares na seção de postagens - os arquivos de conteúdo na pasta de postagens que criamos anteriormente.

Vamos fazer essa alteração agora editando o modelo a partir disso:

 {{ 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 }}

Para isso:

 {{ 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 essa alteração, a página inicial exibirá apenas postagens como:

Como usar parciais no Hugo

Um dos recursos de modelagem mais poderosos do Hugo são os parciais – modelos HTML incorporados em outro modelo HTML. Parciais permitem a reutilização de código em diferentes arquivos de modelo 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 de modelo baseof.html de um tema.

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

Neste caso, {{ partial "site-style.html" . }} {{ partial "site-style.html" . }} instrui Hugo a substituir o conteúdo da Linha 18 pelo site-style.html na pasta /layouts/partials . Se navegarmos para o /partials/site-style.html , veremos 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 }}

Ao transferir esse código para um arquivo separado, o arquivo de modelo baseof.html pode permanecer organizado e fácil de ler. Embora parciais não sejam necessários, especialmente para projetos básicos, eles são úteis para projetos maiores com funcionalidades mais complexas.

Como usar códigos de acesso no Hugo

Os shortcodes Hugo são semelhantes aos parciais, pois permitem a reutilização de código em várias páginas. Shortcodes são arquivos HTML que residem na pasta /layouts/shortcodes . A principal diferença é que as parciais se aplicam aos modelos HTML, enquanto os códigos de acesso se aplicam às páginas de conteúdo do Markdown.

No Hugo, os códigos de acesso permitem desenvolver módulos de funcionalidade que podem ser usados ​​em páginas do site sem gerenciar alterações de código para cada página.

Se você administra um blog, é provável que precise percorrer o conteúdo do corpo de suas postagens para atualizar as referências do ano para o ano atual. Dependendo de quantos posts você tem em seu site, essa tarefa pode demorar muito!

Ao usar um shortcode Hugo em seus arquivos de conteúdo, você não terá que se preocupar em atualizar as referências de ano novamente!

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

 {{ now.Format "2006" }}

Shortcodes podem ser incorporados em posts com esta sintaxe – {{< shortcode_name >}} . No nosso caso, podemos chamar o shortcode 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 a postagem no navegador da Web, deverá ver o ano atual na primeira linha da postagem da seguinte forma:

Como adicionar imagens a um post no Hugo

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

Embora Hugo não tenha uma maneira padronizada de gerenciar imagens, um método popular depende de armazenar imagens na pasta /static e referenciá-las em posts e páginas usando um shortcode. Vamos ver como você pode fazer uma organização básica de imagens no Hugo.

A primeira coisa que precisamos fazer é criar uma estrutura organizacional para nossa biblioteca de imagens. Embora isso pareça 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 armazenar todas as imagens carregadas em 2021.

Em seguida, vamos adicionar duas imagens ( blue1.jpg e blue2.jpg ) na pasta 2021 .

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

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

Embora seja possível adicionar esse HTML diretamente ao arquivo de conteúdo do Markdown, é melhor criar um código de acesso que você possa usar para exibir qualquer imagem da pasta de uploads. Dessa forma, se você precisar atualizar a tag img , poderá editar o modelo de código de acesso sem editar cada instância da tag img .

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

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

Em seguida, adicione o shortcode abaixo a uma postagem do blog:

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

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

Agora, se você recarregar a postagem do blog, deverá ver a imagem assim:

Como implantar um site Hugo

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

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

Anteriormente, usávamos o hugo server -D para ativar um servidor de desenvolvimento local para visualizar as alterações em nosso site em tempo real. Para gerar o site na íntegra, podemos usar o comando hugo no diretório raiz do nosso projeto. Após a conclusão da geração do site, você deverá ver uma nova pasta pública no diretório do 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 localmente e carregá-lo manualmente no Amazon S3 ou em um servidor executando Nginx é uma maneira de implantar um site gerado estaticamente. No entanto, não é o mais eficiente porque exige que você carregue manualmente novos arquivos sempre que fizer uma alteração.

Em vez disso, uma opção melhor é vincular a pasta do projeto Hugo a um repositório do GitHub e vincular o repositório do GitHub a um serviço de implantação automatizado como o Netlify. Com essa configuração, você pode editar seu site, enviar as alterações para o GitHub e acionar uma nova compilação e implantação no Netlify sem qualquer intervenção manual. Agora, vamos ver como fazer tudo isso!

Como fazer upload do seu projeto Hugo para o GitHub

Primeiro, você precisará criar um repositório GitHub para seu projeto. Para fazer isso, crie uma conta no GitHub (se você ainda não tiver uma) e baixe o aplicativo oficial para desktop do GitHub. Após instalar o aplicativo GitHub, clique em Arquivo na barra de menus e selecione Novo repositório . Dê ao repositório um nome de sua escolha, deixe as outras opções em seus estados padrão por enquanto e clique em Criar Repositório .

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

Em seguida, mova todos os arquivos da pasta original do projeto para a nova pasta do repositório GitHub. Certifique-se de excluir a pasta pública porque não precisamos fazer upload dessa pasta para o GitHub.

Se você navegar de volta para o aplicativo GitHub, deverá ver 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.

Por padrão, a opção “Manter este código privado” está marcada. If you want your code to be open-source and publicly accessible, feel free to uncheck it. Finally, click Publish Repository once again.

Now, if you go to GitHub, you should see your repository online like so:

How to Link GitHub Repo to Netlify

If you don't already have a Netlify account, sign up for one here. To link a GitHub repository to Netlify, click New site from Git in the Netlify dashboard.

Under Continuous Deployment , select the GitHub option.

Next, use the search box to find your Hugo project repository.

Next, specify the settings for the continuous deployment. Since Netlify can detect a Hugo configuration, the default settings should work fine for a basic deployment.

As you get more familiar with Hugo, you may delve into environment variables, custom build commands, and more. For the time being, setting the build command to hugo and the public directory to public will allow you to deploy a simple Hugo site. After specifying the build command and public directory, click Deploy Site .

Como o Hugo é um gerador de site estático tão rápido, a implantação deve levar apenas alguns segundos para um site básico. Quando a implantação for concluída, você poderá ver uma URL de teste no painel do Netlify. Clique na URL para visualizar o site implantado.

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

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

Como vinculamos o Netlify ao GitHub, um novo commit no repositório GitHub do projeto Hugo acionará automaticamente uma nova implantação no Netlify!

Resumo

Hugo é um dos geradores de sites estáticos mais populares do mundo, e por um bom motivo. Ele não apenas possui processamento de compilação super rápido, mas também é fornecido com recursos poderosos de modelagem que suportam parciais e códigos de acesso.

Neste tutorial, você aprendeu como configurar o Hugo, criar um novo projeto, adicionar arquivos de conteúdo, editar arquivos de tema e implantar um site estático concluído. Recomendamos consultar a documentação oficial do Hugo para saber mais sobre o Hugo e seus recursos mais avançados, como funções personalizadas, front Matter e buildpacks CSS/JS.

Quais são seus pensamentos sobre Hugo e outros geradores de sites estáticos? Por favor, deixe-nos saber nos comentários abaixo!