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?
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 é 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.
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 hugoComo 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 -confirmscoop install hugo-extendedComo verificar se Hugo está instalado corretamente
Para verificar se Hugo foi corretamente instalado, execute o seguinte comando:
hugo versionEste comando Terminal deve emitir informações sobre a versão atualmente instalada do Hugo dessa forma:
hugo v0.85.0+extended darwin/arm64 BuildDate=unknownComandos 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
hugo check– executa várias verificaçõeshugo config– mostra a configuração para um site Hugohugo convert– converte conteúdo para diferentes formatoshugo deploy– implanta seu site para um provedor de nuvenshugo env– exibe a versão Hugo e informações do ambientehugo gen– fornece acesso a vários geradoreshugo help– exibe informações sobre um comandohugo import– permite que você importe um site de outro localhugo list– exibe uma lista de vários tipos de conteúdohugo mod– fornece acesso a vários ajudantes de módulohugo new– permite criar novos conteúdos para o seu sitehugo server– inicia um servidor de desenvolvimento localhugo version– mostra a versão atual do Hugo
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.
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
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.mdAgora, 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.gitA 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 -DHugo construirá então as páginas do seu site e as disponibilizará em http://localhost:1313/:
Se você visitar a URL no seu navegador, você deve ver o seu site Hugo 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:
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.mdObserve 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:
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!
Se você visitar seu site Hugo em seu navegador, você deve ver o novo 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.mdObserve 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”:
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 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.
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:
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:
{{ 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:
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:
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.
A seguir, 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, 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:
Como implantar um site Hugo na Kinsta
Neste ponto, 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 partials e shortcodes. Você agora deve ter um site funcional pronto para ser implantado on-line.
Anteriormente, usamos o comando hugo server -D para iniciar um servidor de desenvolvimento local e visualizar as mudanças em nosso site em tempo real. Para gerar o site completo, podemos usar o comando hugo no diretório raiz do nosso projeto. Após a geração do site estar completa, você verá uma nova pasta chamada public no diretório do seu projeto. Dentro desta pasta, você encontrará todos os arquivos que precisam ser enviados para um servidor estático.
A melhor opção para publicar o seu site estático é enviar o seu projeto Hugo para um repositório Git e vinculá-lo à Hospedagem de Site Estático da Kinsta. Atualmente, a Kinsta só consegue croar SSGs baseados em Node.js, mas para SSGs como Hugo, existem duas alternativas:
- Instale a dependência Hugo bin
- Usar CI/CD para construir os arquivos estáticos e, em seguida, implantá-los na Kinsta
Para este guia, vamos usar a dependência Hugo-bin. Para fazer isso, inicialize o Node.js em seu projeto Hugo executando o comando npm init -y no diretório raiz do seu projeto Hugo.
Isso criará um arquivo package.json básico. Em seguida, instale a dependência de desenvolvimento hugo-bin:
npm i -D hugo-binA seguir, no seu arquivo package.json, adicione o seguinte comando de script:
"scripts": {
"build": "hugo",
"create": "hugo new",
"serve": "hugo server"
}Agora, você pode enviar seu código para o seu repositório Git. Uma vez que o repositório esteja pronto, siga estas etapas para implantar o seu site estático na Kinsta:
- Faça login ou crie uma conta para visualizar o seu painel MyKinsta.
- Autorize a Kinsta com o seu provedor Git.
- Clique em Sites Estáticos na barra lateral esquerda e depois clique em Adicionar site.
- Selecione o repositório e a branch de onde deseja implantar.
- Atribua um nome único ao seu site.
- Adicione as configurações de build no seguinte formato:
- Comando de build:
npm run build - Versão do Node:
18.16.0 - Diretório de publicação:
public
- Comando de build:
- Por fim, clique em Criar site.
E é isso! Agora você tem um site estático ao vivo e totalmente funcional criado com Hugo.
Se você marcou a opção Implantação automática ao implantar o seu site, sempre que editar o site e enviar as alterações para o repositório Git, seu repositório acionará automaticamente uma nova build e implantação na Kinsta sem qualquer intervenção manual.
Como alternativa à Hospedagem de Site Estático, você pode optar por implantar o seu site estático com a Hospedagem de Aplicativos da Kinsta, que oferece maior flexibilidade de hospedagem, uma gama mais ampla de benefícios e acesso a recursos mais robustos. Por exemplo, escalonamento, implantação personalizada usando um Dockerfile e análise abrangente que engloba dados em tempo real e históricos.
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!
Brian has been a WordPress user for over 10 years, and enjoys sharing his knowledge with the community. In his free time, Brian enjoys playing the piano and exploring Tokyo with his camera. Connect with Brian on his website at brianli.com.
Deixe um comentário