{"id":44867,"date":"2021-11-29T04:44:33","date_gmt":"2021-11-29T07:44:33","guid":{"rendered":"https:\/\/kinqsta.com\/pt\/?p=44867&preview=true&preview_id=44867"},"modified":"2023-10-18T08:03:59","modified_gmt":"2023-10-18T11:03:59","slug":"site-estatico-hugo","status":"publish","type":"post","link":"https:\/\/kinqsta.com\/pt\/blog\/site-estatico-hugo\/","title":{"rendered":"Como Construir um Site Est\u00e1tico e R\u00e1pido com Hugo"},"content":{"rendered":"

Hugo \u00e9 um gerador de sites est\u00e1tico (SSG) escrito em Go<\/a> (aka Golang), uma linguagem de programa\u00e7\u00e3o compilada de alto desempenho frequentemente usada para desenvolver aplicativos e servi\u00e7os backend.<\/p>\n

Hoje, Hugo \u00e9 capaz de gerar a maioria dos sites em segundos (<1 ms por p\u00e1gina). Isso explica por que Hugo fatura a si mesmo como “a estrutura mais r\u00e1pida do mundo para construir sites”<\/p>\n

Neste artigo, vamos dar uma olhada na hist\u00f3ria do Hugo, o que o torna t\u00e3o r\u00e1pido, e como voc\u00ea pode come\u00e7ar a construir seu pr\u00f3prio site est\u00e1tico com o Hugo.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

O que \u00e9 Hugo? E por que ele \u00e9 popular?<\/h2>\n
\"P\u00e1gina<\/a>
P\u00e1gina inicial do site Hugo<\/figcaption><\/figure>\n

Steve Francia desenvolveu originalmente o gerador est\u00e1tico Hugo<\/a> em 2013, e Bj\u00f8rn Erik Pedersen assumiu a lideran\u00e7a do projeto em 2015. Hugo \u00e9 um projeto open-source, o que significa que seu c\u00f3digo pode ser visto e melhorado por qualquer pessoa.<\/p>\n

Como um gerador de sites est\u00e1tico, Hugo pega arquivos content Markdown, os executa atrav\u00e9s de templates de temas e gera arquivos HTML<\/a> que voc\u00ea pode facilmente distribuir online. E faz tudo isso extremamente r\u00e1pido.<\/p>\n

Em 2021, h\u00e1 dezenas, se n\u00e3o centenas, de geradores est\u00e1ticos. Todo gerador de site est\u00e1tico tem seu apelo<\/a>. Jekyll<\/a> \u00e9 popular entre os desenvolvedores Ruby, e embora n\u00e3o seja t\u00e3o r\u00e1pido quanto outras op\u00e7\u00f5es, foi um dos primeiros geradores de sites est\u00e1ticos a ver a ado\u00e7\u00e3o generalizada. Gatsby<\/a> \u00e9 outro SSG popular que \u00e9 bem adequado para o desenvolvimento de sites estaticamente implant\u00e1veis que s\u00e3o din\u00e2micos em funcionalidade.<\/p>\n

Ent\u00e3o, com tantos SSGs por a\u00ed, o que faz Hugo se destacar?<\/p>\n\n

Hugo \u00e9 r\u00e1pido<\/h3>\n

Em termos de desempenho bruto, Hugo \u00e9 o melhor gerador de site est\u00e1tico do mundo. Comparado com Jekyll, Hugo mostrou ser 35x mais r\u00e1pido<\/a> pelo Forestry. Similarmente, Hugo pode render um site de 10.000 p\u00e1ginas em 10 segundos, uma tarefa que levaria mais de meia hora para ser completada por Gatsby. Hugo n\u00e3o s\u00f3 \u00e9 o SSG mais r\u00e1pido em termos de tempo de constru\u00e7\u00e3o, como tamb\u00e9m \u00e9 r\u00e1pido de instalar.<\/p>\n

Hugo embarca como um execut\u00e1vel independente, ao contr\u00e1rio de Jekyll, Gatsby, e outros SSGs que requerem a instala\u00e7\u00e3o de depend\u00eancias com um gerenciador de pacotes. Isto significa que voc\u00ea pode baixar e usar Hugo imediatamente sem ter que se preocupar com as depend\u00eancias de software.<\/p>\n

A modelagem \u00e9 mais f\u00e1cil com Hugo<\/h3>\n

Na linguagem SSG, “templating” refere-se ao processo de adi\u00e7\u00e3o de placeholders para inser\u00e7\u00e3o din\u00e2mica de conte\u00fado dentro de uma p\u00e1gina HTML. Para acessar o t\u00edtulo de uma p\u00e1gina, voc\u00ea pode usar a vari\u00e1vel {{ .Title }}<\/code>. Assim, dentro de um template HTML Hugo, \u00e9 comum ver o {{ .Title }}<\/code> embrulhado em tags H1 como tal:<\/p>\n

<h1>{{ .Title }}<\/h1><\/code><\/pre>\n
No momento da constru\u00e7\u00e3o, Hugo pegar\u00e1 automaticamente o t\u00edtulo dentro de um arquivo content e inserir\u00e1 o t\u00edtulo entre as duas tags <h1><\/code>. Hugo tem uma variedade de vari\u00e1veis de modelos embutidas, e voc\u00ea pode at\u00e9 mesmo escrever fun\u00e7\u00f5es personalizadas para processar dados em tempo de compila\u00e7\u00e3o. Para templates, Hugo usa as bibliotecas incorporadas html\/template<\/code> e text\/template<\/code>. Isto ajuda a reduzir o incha\u00e7o dos aplicativos porque Hugo n\u00e3o precisa instalar bibliotecas de terceiros para a cria\u00e7\u00e3o de templates.<\/p>\n
Como instalar Hugo<\/h2>\n
Hugo embarca como um execut\u00e1vel compilado, o que significa que voc\u00ea n\u00e3o ter\u00e1 que baixar e gerenciar muitas depend\u00eancias apenas para come\u00e7ar. Ele est\u00e1 dispon\u00edvel para MacOS, Windows e Linux.<\/p>\n