Como usar o Hugo Static Site Generator no Linux

Os sites estáticos são fáceis de criar e extremamente rápidos de usar. Se você aprender a usar o Hugo, poderá gerar sites estáticos baseados em temas no Linux. Criar sites é divertido de novo!

O Gerador de Sites Hugo

Um site estático é aquele que não cria ou modifica páginas da web dinamicamente. Não há banco de dados de fundo, processamento de e-commerce ou  PHP . Todas as páginas da web são totalmente pré-construídas e podem ser exibidas aos visitantes muito rapidamente.

Mas isso não significa que um site estático deva ser chato. Eles podem usar tudo o que o HTML fornece, além de folhas de estilo em cascata (CSS) e  JavaScript . Eles também podem ter coisas como carrosséis de imagens e páginas da web deslizando sobre imagens de fundo.

O gerador de sites Hugo funciona com um modelo e qualquer conteúdo que você criou para gerar um site completo. Você pode então colocá-lo em uma plataforma de hospedagem e ter um site ativo imediatamente.

Hugo usa  markdown para as páginas e entradas de blog que você cria. Markdown é a linguagem de marcação mais simples que existe, o que simplifica a manutenção do seu site.

Os arquivos de configuração de Hugo estão em Tom’s Obvious, Minimal Language (TOML) e YAML Ain’t Markup Language (YAML), que são igualmente fáceis. Outro bônus é que o Hugo é extremamente rápido – alguns sites carregam em menos de um segundo. Tem muitos modelos à sua escolha e mais estão sendo adicionados o tempo todo, então é fácil começar. Basta escolher um modelo e adicionar algum conteúdo que o torne seu.

Hugo também atua como um pequeno servidor web direto no seu computador. Você pode ver uma versão ao vivo do seu site enquanto o projeta e cria e sempre que adiciona uma nova postagem. Ele também se atualiza automaticamente sempre que você “Salvar” no editor, para que possa ver imediatamente o efeito de suas alterações no navegador.

Hospedando Seu Site

Quando se trata de hospedar seu site estático, você tem muitas opções. A maioria das empresas oferece hospedagem gratuita para uso pessoal ou de código aberto. Claro, você também pode escolher uma empresa de hospedagem na web regular, como qualquer uma das seguintes:

• Acrobático
• Amazon S3
• Azure
• CloudFront
• DreamHost
• Firebase
• Páginas GitHub
• Vai Papai
• Google Cloud Storage
• Heroku
• Páginas GitLab
• Netlify
• Rackspace
• Surge

Instalando Hugo

Junto com Hugo, você precisa ter o Git instalado. Git já estava instalado no Fedora 32 e Manjaro 20.0.1. No Ubuntu 20.04 (Focal Fossa,) foi adicionado automaticamente como um dependente de Hugo.

Para instalar o Hugo no Ubuntu, use este comando:

sudo apt-get install hugo

No Fedora, você precisa digitar:

sudo dnf install hugo

O comando para Manjaro é:

sudo pacman -Syu hugo

Criando um site com Hugo

Quando pedimos ao Hugo para fazer um novo site, ele cria um conjunto de diretórios para nós. Estes irão conter os diferentes elementos do nosso website. No entanto, este não é o site final que será carregado em sua plataforma de hospedagem. Esses diretórios conterão o tema, os arquivos de configuração, os conteúdos e as imagens que Hugo usará como entrada quando pedirmos para construir o site real.

É como a diferença entre o código-fonte e um programa compilado. O código-fonte é o material que o compilador usa para gerar o produto final. Da mesma forma, Hugo pega o conteúdo desses diretórios e gera um site funcional.

O comando que vamos executar criará um diretório com o mesmo nome do site que você deseja criar. Esse diretório será criado no diretório em que você executa o comando.

Portanto, vá para o diretório no qual deseja que o seu site seja criado. Estamos usando nosso diretório inicial, então digitamos o seguinte:

hugo novo site geek-demo

Isso cria um diretório “geek-demo”. Nós digitamos o seguinte para mudar para esse diretório e executar  ls:

cd geek-demo /

ls

Vemos o arquivo de configuração “config.toml” e os diretórios que foram criados. No entanto, eles estão praticamente vazios, pois são apenas o andaime do site.

Inicializando o Git e adicionando um tema

Precisamos adicionar um tema para que Hugo saiba como queremos que o site concluído fique. Para fazer isso, temos que inicializar o Git. Na pasta raiz do seu site (aquela que contém o arquivo “config.toml”), execute este comando:

git init

Existem centenas de temas que  você pode escolher, e cada um tem uma página da web que o descreve. Você pode executar uma demonstração de um tema e descobrir qual é o comando para fazer o download. Usaremos um chamado Meghna .

Para incorporar esse tema em nosso site, precisamos mudar para nossa pasta “Temas” e executar o git clonecomando:

temas de cd

git clone https://github.com/themefisher/meghna-hugo.git

O Git exibe algumas mensagens à medida que avança. Quando terminar, usamos lspara ver o diretório que contém o tema:

ls

Os temas de Hugo incluem um site de exemplo de trabalho. Você deve copiar esse site padrão para os diretórios do seu site.

Primeiro, volte ao diretório raiz do seu site. Estamos usando a opção -r(recursiva) cppara incluir subdiretórios e a -fopção (forçar) para substituir quaisquer arquivos existentes:

cd ..

cp themes / meghna-hugo / exampleSite / * -rf

Lançando seu site localmente

Fizemos o suficiente para lançar um novo site localmente. Ele ainda conterá o texto e as imagens do espaço reservado, mas essas são apenas alterações cosméticas. Vamos verificar se as partes técnicas funcionam primeiro.

Dizemos ao Hugo para executar seu servidor web e usar a -Dopção (rascunho) para garantir que todos os arquivos que possam ser marcados com “rascunho” sejam incluídos no site:

servidor hugo -D

A imagem abaixo mostra a saída do nosso  hugocomando.

Fomos informados de que Hugo construiu o site em 142 milissegundos (dissemos que era rápido, certo?). Ele também nos diz para pressionar Ctrl + C para parar o servidor, mas deixá-lo em execução por enquanto.

Abra seu navegador e vá para localhost:1313 para ver seu site.

Modificando o conteúdo padrão do site

Enquanto está funcionando assim, Hugo está servindo as páginas da web de memória. Ele não criou o site no disco rígido, mas sim uma cópia de trabalho na RAM. No entanto, ele está monitorando os arquivos e imagens no disco rígido. Se algum deles for alterado, ele atualiza o site em seu navegador – você nem precisa pressionar Ctrl + F5.

Abra outra janela de terminal e navegue até o diretório raiz do seu site. Abra o arquivo “config.toml” em um editor. Altere o “baseURL” para o domínio no qual seu site será hospedado e altere o “título” para o nome do seu site. Salve suas alterações, mas deixe o editor aberto.

Hugo detecta que houve mudanças no arquivo “config.toml”, então ele as lê, reconstrói o site e atualiza o navegador.

Agora você deve ver o nome que escolheu para o seu site na guia do navegador. Obter feedback visual imediato sobre as alterações salvas acelera significativamente o processo de personalização de um site.

Todos os temas são diferentes, mas descobrimos que aqueles que costumávamos eram bastante simples de seguir. As diferentes seções do site têm nomes óbvios, assim como as configurações em cada seção, então é sempre óbvio o que você está mudando.

E, novamente, assim que você salva uma alteração, você vê o que alterou em seu navegador. Se você não gostar, basta reverter a alteração e salvar novamente.

Os vários arquivos de configuração que controlam o site são cada um dedicado a um único trabalho e rotulado de forma significativa. Rastreá-los não é difícil, pois não há muitos lugares onde eles possam estar no diretório. Normalmente, eles estão na pasta “Dados”.

Como estamos usando um modelo bilíngue, nossos arquivos de configuração em inglês estão no subdiretório “En”.

Se você abrir o arquivo Data> En> banner.yml em um editor, verá a coleção de configurações que regem a área de banner do site.

Ao alterar as configurações de “Título” e “Conteúdo”, você altera o texto na página do banner.

Também alteramos a configuração “Rótulo”, para que o texto do botão diga “Saiba mais”. Para o seu site, provavelmente você também desejará alterar a imagem.

Assim que salvar suas alterações, você as verá em seu navegador.

Alteração de outros elementos de um site

Você pode alterar todos os outros elementos de maneira semelhante. Basta rastrear o arquivo de configuração apropriado e alterar as configurações e o texto para atender às suas necessidades.

Você também vai querer mudar as imagens. A imagem padrão será referenciada no arquivo de configuração. Você pode facilmente encontrar e dar uma olhada na imagem original para ver quais são suas dimensões.

As imagens são colocadas no diretório “Static> Images” com subdiretórios para as diferentes seções do site. Coloque quaisquer favicons e logotipos diretamente no diretório “Estático> Imagens”.

Adicionando Novo Conteúdo do Blog

Até agora, vimos como mudar o que já está lá. Mas, como adicionamos uma nova postagem no blog? Hugo usa um conceito chamado “Arquétipos” para criar novos conteúdos. Se não criarmos um arquétipo para nossas entradas de blog, um arquivo padrão será criado para nós cada vez que pedirmos a Hugo para criar uma nova entrada de blog.

Isso é bom, mas com um arquétipo, podemos nos poupar algum esforço e garantir que o máximo possível do assunto inicial seja inserido para nós com antecedência.

Neste tema, as entradas do blog estão localizadas em Conteúdo> Inglês> Blog. Se abrirmos uma entrada de blog existente em um editor – como “simple-blog-post-1.md” – podemos ver o assunto inicial.

Precisamos copiar essa seção, editar as entradas atuais para que possam ser usadas como um modelo de arquétipo e, em seguida, salvá-lo na pasta “Arquétipos”. Se o chamarmos de “blog.md”, ele será usado automaticamente como modelo para novas entradas de blog.

Em gedit, podemos fazer isso da seguinte maneira:

gedit content / english / blog / simple-blog-post-1.md

Realce a seção superior incluindo as duas linhas tracejadas e pressione Ctrl + C para copiá-la. Pressione Ctrl + N para iniciar um novo arquivo e, a seguir, Ctrl + V para colar o que você copiou.

Agora, faça as seguintes alterações e certifique-se de deixar um espaço após os dois pontos (:) em cada linha:

• Título: mude para "{{ replace .Name "-" " " | title }}" (inclua as aspas). Um título para cada nova postagem do blog será inserido automaticamente. É formado a partir do nome do arquivo que você passa para o hugo newcomando, como veremos.
• Data: mude para {{ .Date }}. A data e a hora em que o blog é criado serão inseridas automaticamente.
• Image_webp: este é o caminho para a imagem do cabeçalho do blog  no formato webp . Se o tema não conseguir encontrar um, ele usará a imagem da próxima linha.
• imagem: este é o caminho para a imagem do cabeçalho do blog no formato JPEG . Você também pode deixar estes apontando para as imagens padrão. Então, todas as postagens do blog terão uma imagem temporária, mesmo antes de você localizar, redimensionar ou salvar uma imagem personalizada. Depois de fazer isso, você pode editar facilmente o nome do arquivo para corresponder ao da sua imagem personalizada.
• Autor: Mude para o seu nome.
• Descrição: Você digita uma breve descrição de cada postagem aqui. Se você alterar para uma string vazia ( ""), poderá digitar uma descrição para cada novo blog sem precisar editar o texto antigo.

Salve esse novo arquivo como “archetypes / blog.md” e feche gedit. Hugo agora usará esse novo arquétipo sempre que quiser criar uma nova entrada de blog.

Observe que nosso arquivo deve ter uma extensão “.md” porque usaremos markdown para escrever nossa entrada de blog:

hugo novo blog / first-new-blog-post-on-this-site.md

Agora, queremos abrir nossa nova entrada de blog em um editor:

gedit content / english / blog / first-new-blog-post-on-this-site.md

Nossa nova postagem do blog é aberta em gedit.

Todas as seguintes peças do assunto inicial foram adicionadas para nós:

• Título: deduzido do nome do arquivo. Se precisar de algum ajuste, você pode editá-lo aqui.
• Hora e data:  são adicionadas automaticamente.
• Imagem padrão:  provavelmente você desejará encontrar uma imagem relevante e livre de royalties. Solte-o em Estático> Imagens> Blog. Você terá que digitar o nome do arquivo real da imagem aqui.
• Autor: Seu nome é adicionado automaticamente.
• Descrição: Isso foi editado.

Escreva o blog usando marcação e use a marcação padrão para títulos, negrito, itálico, imagens, links e assim por diante. Cada vez que você salva seu arquivo, Hugo reconstrói o site e o atualiza em seu navegador.

A imagem abaixo mostra como nossa nova entrada de blog aparece na página inicial.

A imagem abaixo mostra a aparência da nova entrada do blog em sua própria página.

Depois de terminar de escrever sua postagem no blog, salve as alterações e feche o editor. Você também pode fechar seu navegador porque vamos parar o servidor Hugo.

Na janela do terminal em que o servidor Hugo está sendo executado, pressione Ctrl + C.

Construindo o site

No diretório raiz do seu site, emita o seguinte comando para construir o seu site:

hugo

Hugo constrói o site e lista o número de páginas e outros componentes que ele criou. Demorou 134 milissegundos para criar o nosso.

Hugo cria um novo diretório chamado “Público” no diretório raiz do seu site. No diretório “Público” você encontrará todos os arquivos que você precisa para transferir para sua plataforma de hospedagem.

Observe que você deve fazer upload dos arquivos e diretórios dentro do diretório “Público” para sua plataforma de hospedagem, não para o diretório “Público” em si.

Agora você conhece o básico

Cada tema exigirá um pouco de exploração para descobrir como você pode fazer com que ele tenha a aparência desejada, mas essa é a parte divertida! Dada a capacidade de Hugo de renderizar alterações imediatamente em uma janela do navegador, nada demora muito.

Você provavelmente descobrirá que escrever seu texto e localizar e recortar imagens são as partes do processo que demoram mais.

O site de documentação do Hugo também é útil , mas extenso. Esperançosamente, este passo a passo básico será suficiente para você começar.

Se você usar o Git e  Github , gitlab , ou BitBucket , há também integrações disponíveis para essas plataformas. Eles observam seu repositório Hugo remoto e reconstroem seu site ativo sempre que você envia alterações nele.