Os sites estáticos se tornaram uma alternativa poderosa aos sites dinâmicos, especialmente com o número de geradores de sites estáticos (SSGs) disponíveis. Os desenvolvedores podem facilmente criar um site estático completo sem muito esforço, graças aos SSGs.
Neste post, vamos cobrir Hugo, um poderoso SSG conhecido por sua velocidade. Aprenderemos quais benefícios Hugo oferece, por que é um dos melhores SSGs para usar e como criar um aplicativo de blog simples com rapidez e eficiência.
O que são sites estáticos e geradores de sites estáticos?
Ao criar sites estáticos, o conteúdo não é gerado dinamicamente, o que significa que é codificado. Isso pode parecer muito trabalhoso, mas é útil.
Os sites dinâmicos eliminam a repetição desnecessária de arquivos HTML individuais em todas as páginas e postagens, mas geralmente são lentos e não são adequados para pequenos e a maioria dos projetos de médio porte.
É aqui que entram os SSGs e o Hugo.
Os SSGs fornecem páginas HTML estáticas baseadas em dados brutos-geralmente em Markdown-e uma estrutura de modelo. Eles geralmente criam páginas rápidas e amigáveis para SEO e são boas alternativas para sistemas de gerenciamento de conteúdo (CMSes), que usam sites dinâmicos.
SSGs também ajudam a automatizar a escrita de páginas HTML individuais. Simplesmente fornecendo os dados, o SSG gera páginas HTML para servir em uma página da web usando o modelo predefinido.
O que é Hugo?
Hugo é um dos muitos geradores de sites estáticos disponíveis. No entanto, Hugo é o gerador de sites estáticos mais rápido que existe. É escrito em Go e tem simultaneidade integrada .
Com o Hugo, os usuários podem definir o conteúdo no Markdown, como muitos SSGs, e gerar arquivos HTML automaticamente a partir do Markdown.
Benefícios do uso do Hugo
Velocidade
Por padrão, sites estáticos são mais rápidos do que sites dinâmicos; sites estáticos são gerados durante o tempo de compilação, e o HTTPS lida com o resto, ao contrário de sites dinâmicos em que cada solicitação é atendida de um servidor sempre que uma solicitação é feita a um recurso.
Hugo continua sendo o SSG mais rápido por causa de seu multi-threading embutido; atualmente leva menos de 8 milissegundos para fazer e servir uma mudança, que revisaremos mais tarde neste post.
Baixo ou nenhum código
Hugo também é incrivelmente simples de usar e faz não requer amplo conhecimento técnico, especialmente após a instalação e configuração, que abordaremos mais tarde neste post.
E, com a capacidade de usar Dropbox Paper ou readme.so , os desenvolvedores podem criar visualmente o conteúdo desejado e exportá-lo para um projeto Hugo, eliminando a necessidade de uma compreensão profunda de Markdown e estilo.
Não há necessidade de configurar servidores e infraestruturas, permitindo que os desenvolvedores coloquem qualquer projeto pequeno em execução sem usar tecnologias e pilhas que são simplesmente exageradas.
Baixo custo
Infraestruturas de back-end não são necessárias ao implantar o Hugo, fornecendo uma maneira barata de gerenciar um blog ou site.
Porque todos os arquivos HTML são gerados durante o tempo de construção , não há necessidade de configurar servidores ou bancos de dados, eliminando os contratempos financeiros que costumam representar.
Basta usar um dos muitos serviços gratuitos, como páginas do GitHub, Netlify ou Vercel, para implantar um blog ou site.
Segurança
Os sites e aplicativos da Hugo são virtualmente impossíveis de hackear. Como não há banco de dados anexado a um site do Hugo, tudo está disponível estaticamente.
Os desenvolvedores não precisam se preocupar com injeções de SQL que podem chegar a um banco de dados por meio de campos de formulário ou uma violação de segurança. O Hugo oferece não apenas velocidade, mas também é seguro.
Hugo compensa
Embora o Hugo seja fácil de aprender e usar, com benefícios que vão desde a velocidade ao baixo custo, ele tem algumas vantagens e desvantagens.
Prepare-se para compensar a dinâmica pela estática. Hugo oferece velocidade, mas fazer as coisas manualmente em um SSG pode ser complicado, como trabalhar com funções, variáveis e escopo.
Outra desvantagem a considerar antes de usar o Hugo é a falta de uma interface gráfica do usuário para gerenciar conteúdo de uma maneira mais atraente visualmente. No entanto, isso pode ser resolvido usando CMSs de terceiros como Netlify CMS ou Dato CMS como fontes de dados.
Construindo um aplicativo com Hugo
Vamos agora ver Hugo em ação configurando criando e construindo um aplicativo de blog.
Instalando o Hugo
Para começar, devemos instalar o Hugo; escolha o sistema operacional correspondente para instalar o pacote .
Embora eu tenha usado o Linux para este projeto, qualquer O sistema operacional que pode executar a ferramenta de compilação Go pode instalar o Hugo em uma máquina local.
Confirme a instalação concluída verificando se a versão do Hugo é a mais recente. Execute o seguinte no terminal:
hugo version
Em seguida, execute o seguinte para ver uma lista de comandos e sinalizadores disponíveis:
hugo help
Por causa da pequena lista de comandos de Hugo e sinalizadores, a experiência de desenvolvimento é muito mais fácil.
Agora que confirmamos que a instalação do Hugo foi um sucesso, vamos criar um site do Hugo. Comece navegando até um local desejado e execute o seguinte comando:
hugo new site mysite
Isso cria uma pasta mysite que contém o modelo de projeto Hugo. Agora podemos abrir a pasta mysite em um editor de texto, como o Visual Studio Code, para ver sua estrutura.
Adicionando um tema
A próxima coisa a fazer é para adicionar um tema. Podemos até construir nosso próprio tema, no entanto, por causa deste guia, vamos usar os temas disponíveis em https://themes.gohugo.io/.
Decidi usar Ananke para este tutorial; baixe este tema como um arquivo zip do GitHub .
Extraia o gohugo-theme-ananke-master pasta para a pasta de temas no projeto Hugo. Renomeie a pasta extraída para ananke para simplificar.
Abra o config.toml no diretório raiz do projeto Hugo e adicione a seguinte linha:
theme=’ananke’
Para verificar se tudo está configurado corretamente, vamos construir o aplicativo e testá-lo na web. Comece executando o seguinte:
hugo server-D
O sinalizador-D é adicionado se você pretende mostrar o conteúdo no modo de rascunho. Este comando é usado apenas em desenvolvimento.
Se tudo correr bem, devemos ver o aplicativo criado e servido em http://localhost: 1313/.
Esta é apenas a aparência padrão do tema sem adicionar conteúdo.
Adicionando conteúdo
Para adicionar conteúdo ao nosso blog, podemos adicioná-lo manualmente ou por meio da linha de comando usando o seguinte:
hugo new posts/my-first-post.md
A vantagem de adicionar conteúdo por meio da linha de comando é que ele fornece um clichê no Markdown, como o seguinte:
—título:”Minha primeira postagem”data: 2021-08-13T13: 06: 28 + 01: 00 rascunho: verdadeiro—
Isso então cria o seguinte dentro da pasta de conteúdo:
Para o propósito deste tutorial, vamos adicionar alguns dados aleatórios e imagens:
—título:”J Cole Story”Featured_image:”/jcole.jpg”data: 2021-08-13T13: 06: 28 + 01: 00 rascunho: falso—Jermaine Lamarr Cole (nascido 28 de janeiro de 1985) conhecido profissionalmente como J. Cole, é um rapper, cantor, compositor e produtor musical americano. Cole é considerado um dos rappers mais influentes de sua geração. [5] Nascido em uma base militar na Alemanha e criado em Fayetteville, Carolina do Norte, [6] Cole inicialmente ganhou reconhecimento como rapper após o lançamento de sua mixtape de estreia, The Come Up, no início de 2007. Com a intenção de prosseguir na carreira musical, ele lançou duas mixtapes adicionais, The Warm Up (2009) e Friday Night Lights (2010), ambas com aclamação da crítica, após assinar com o selo Roc Nation de Jay-Z em 2009. Cole lançou seu primeiro álbum de estúdio, Cole World: The Sideline Story, em 2011. Estreou no número um na Billboard 200 dos EUA. [7] Seu próximo álbum, Born Sinner (2013), também chegou ao topo da Billboard 200. Movendo-se para temas mais conscientes, 2014 Forest Hills Drive (2014) liderou a Billboard 200 e rendeu a Cole uma indicação de Melhor Álbum de Rap no Grammy Awards 2015. [8] Seu quarto álbum influenciado pelo jazz, 4 Your Eyez Only (2016), estreou no número um na Billboard 200. [9] O quinto álbum de Cole, KOD (2018), tornou-se seu quinto álbum número um na Billboard 200 e apresentou um recorde de seis sucessos simultâneos no Top 20 da Billboard Hot 100, empatando com os Beatles. [10] Seu sexto álbum de estúdio, The Off-Season, foi lançado em 14 de maio de 2021.! \ [Jcole \] (/jcole.jpg) Autodidata no piano, Cole também atua como produtor junto com sua carreira de rap, produzindo singles para artistas como Kendrick Lamar e Janet Jackson, além de cuidar da maior parte da produção em seus próprios projetos. [11] Ele também desenvolveu outros empreendimentos, incluindo Dreamville Records, bem como uma organização sem fins lucrativos chamada Dreamville Foundation. [12] O álbum de compilação do Dreamville, Revenge of the Dreamers III (2019), estreou no número um na Billboard 200 e foi nomeado para Melhor Álbum de Rap no 2020 Grammy Awards. Em janeiro de 2015, Cole decidiu abrigar mães solteiras sem pagar aluguel na casa de sua infância em Fayetteville, Carolina do Norte. [13]
O Markdown produz o seguinte:
Observe que, ao adicionar uma imagem a uma postagem, ela é acessada por meio da pasta estática. Qualquer ativo colocado na pasta estática está disponível globalmente ou no nível raiz, independentemente do diretório do projeto em que estamos.
É importante notar que o nome do arquivo Markdown é uma rota no aplicativo, o que significa que a primeira postagem está localizada em http://localhost: 1313/posts/my-first-post/.
Além disso, sempre nomeie os arquivos Markdown descritivamente para fins de SEO.
Eu fui em frente e criou dois arquivos Markdown adicionais para o blog , incluindo informações básicas sobre alguns rappers de que gosto, para adicionar mais conteúdo.
Nosso blog está agora ganhando forma.
Benchmarking
Lembra-se de quando falamos inicialmente sobre a velocidade como um dos principais motivos para escolher Hugo em vez de outros geradores de sites estáticos?
Benchmar king acontece sempre que o servidor Hugo detecta uma alteração; leva menos de 8 milissegundos para reconstruir e veicular a mudança imediatamente em nosso navegador.
Isso é incrivelmente rápido, independentemente da máquina que está criando o aplicativo. Este é o sistema a partir do qual este projeto é servido:
Vamos adicionar mais oito postagens, incluindo uma imagem em destaque e uma imagem. Agora, vamos ver quanto tempo levará para construir.
Esta construção específica para aproximadamente 397 milissegundos; nem mesmo por um segundo! Agora, imagine se precisássemos adicionar 100 ou 1000 posts; levaria muito menos tempo usando o Hugo do que usando outro SSG ou páginas da Web dinâmicas.
Vamos ver quanto tempo leva para essas 11 postagens serem compiladas ao implantar no Vercel.
Demorou 83 milissegundos; isso realmente é incrivelmente rápido!
Implementação
Antes de implementar, queremos garantir que o URL base no arquivo config.toml esteja configurado para o URL que queremos implementar.
Já implantei isso no Vercel, que você pode acessar aqui .
Este é o URL base, e embora não afete realmente o desenvolvimento local, ele gera uma pasta pública enquanto constrói o projeto onde todos os arquivos HTML gerados estaticamente são colocados e atualizados. Isso pode causar a quebra de links de imagem se o URL base não estiver correto.
Agora, queremos primeiro enviar nosso código a um repositório público ou privado do GitHub. Há muitas maneiras de fazer isso, mas simplesmente construiremos o projeto no ambiente de desenvolvimento local executando o seguinte:
hugo server
Em seguida, execute o seguinte:
hugo
Estes geram uma pasta pública, que pode ser implantada em qualquer lugar, como Vercel, Netlify ou hospedagem compartilhada regular. O problema com isso é que se torna muito difícil acompanhar as mudanças.
É por isso que implantaremos no GitHub e, em seguida, conectaremos a conta do GitHub ao Vercel.
Para fazer isso, crie um novo repositório no GitHub. Em seguida, execute os seguintes comandos um após o outro na raiz do projeto:
git init git commit-m”first commit”git branch-M main git remote add origin https://github.com/USERNAME/repository_name.git git push-u origin main
Isso carrega o projeto no GitHub. Uma atualização fornece o seguinte:
Agora, conecte a conta GitHub ao Vercel. Se estiver inscrevendo-se no Vercel , você tem a opção de usar o GitHub como provedor. Caso contrário, use sua conta GitHub existente.
Então, devemos ver o seguinte; clique em Novo projeto .
Em Importar repositório Git , você deve ver todos os repositórios disponíveis em ordem crescente, determinado por seu último commit.
Selecione o repositório que contém o projeto Hugo.
Quando o projeto Hugo é construído pela primeira vez, ele cria um diretório público onde todo o HTML gerado e outros ativos que serão servidos à página da Web residem.
Se não tivéssemos construído nosso projeto em um ambiente de desenvolvimento local, Vercel criaria automaticamente essa pasta para nós. Mas, como existe a pasta pública, o Vercel e outros serviços de hospedagem populares sabem construir e servir a pasta pública.
Conclusão
Parabéns! Você fez isso até o fim. Com a velocidade, simplicidade e natureza estática do Hugo, ele fornece aos desenvolvedores novos e experientes uma experiência de desenvolvimento contínua ao criar e implantar aplicativos.
