Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Static Websites
Code

Tornando Criação de Sites Legal de Novo Com Hugo

by
Difficulty:BeginnerLength:MediumLanguages:

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Sites estáticos são populares por vários motivos - evitam soluções complicadas e mantem um projeto simples, sem base de dados, dependências ou configurações de servidor (sem PHP, MySQL, .Net, Python, Ruby, etc) facilitando a publicação e tornando-o robusto contra várias possíveis vulnerabilidades, afinal, apenas são páginas HTML servidas ao usuário.

Nesse guia, mostraremos como configurar nosso ambiente de desenvolvimento com Hugo e a criar um site estático com ele.

Uma Nova Abordagem para Sites Estáticos

O lendário acrônimo de design, KISS - Keep it Simple Stupid, pode ser aplicado ao Hugo e como ele chega no espaço dos geradores de sites estáticos.

Criado em Go, Hugo é bem rápido em compilar as páginas estáticas (em frações de milisegundos para um site pequeno - e milhares de páginas em segundos).

Hugo também provê ferramental essencial para fluxo de trabalho de sites estáticos (incluindo ferramentas de publicação e migração), permitindo desenvolvedores e designers focarem nas partes legais - construir um sites e ser criativo. Sem precisar lidar com problemas de configuração / dependência ou considerações arquiteturais.

Por Que Sites Estáticos?

Fundamentalmente, ao criarmos sites de conteúdo, podemos assumir certas generalidades entre todos os sites e Hugo provê um framework para isso, onde podemos pegar qualquer tipo de conteúdo, seja um artigo, categoria, resenha ou produtos, dá-lhes um vidual através de modelos e folhas de estilos. Pensando bem, podemos levá-lo onde quisermos dentro do espaço de sites estáticos em HTML/CSS/JS. E ao pensar pragmaticamente, há um espaço muito grande que permite muita criatividade.

jQuery executará bem e há nada impedindo-nos de usar serviços de terceiros (ou nossos) nas páginas estáticas se precisarmos. Não nos limitemos achando que não podemos integrar outros repos/apps em sites estáticos. Isso não existe e podemos usar qualquer JS existente!

Assim, para poucas páginas de um site brochura de uma empresa, com um link a um formulário do Google Forms para contato (Hugo ainda não processa formulários) ou um link de email, ele será ideal. E se precisarmos mostrar dados de algum algum lugar, podemos usar JavaScript para isso.

Como Ele Funciona para Empresas/Clientes?

Tomemos como exemplo uma pequena loja ou freelancer com alguns produtos ou serviços que não precisa de uma solução de ecommerce completa ainda, com apenas algumas informações de produto e um link para contato. Podemos fazê-lo com Hugo em uma manhã. E uma hospedagem para ele é rápido, já que é só HTML.

Hugo pode ser utilizado desde para empresas que trabalham com tecnologia ou não, que precisam de um site pequeno a lá cartão de visitas - com recursos bem irrisórios; para empresas um pouco maiores, para criação de documentação de projetos de código-aberto; ou até mesmo para startups que precisam de uma presença online "para ontem".

Quais as Limitações de Sites Estáticos?

O Que Hugo não faz é conteúdo dinâmico: formulários com bases de dados, busca ou sistemas de usuários. Se buscamos isso, Hugo não é o que precisamos. Mas sim para outras horas, onde nos perguntamos - podemos criar uma página simples para isso? Geradores de sites estáticos são o melhor, na nossa opinião. Além disso, é bom saber que Hugo não é o único gerador. Existem vários e há tempos. Eis uma lista com os principais.

Para construir blogs ao vivo, como em cobertura de eventos em tempo real, Hugo é uma ótima solução para criar uma página rápida para a cobertura, referenciada no site principal, ficando online em minutos, permitindo continuar adicionando conteúdo e publicando atualizações bem rápido. Mas para criar um site de notícias completo, com busca e vários escritores, não seria apropriado para o Hugo.

O que também falta ao Hugo é o uso de ferramentas mais avançadas para lidar com ativos, como EcmaScript6 e Sass - se quisermos isso, precisamos incluir Gulp ou Grunt, ou apenas CSS e JavaScript puros funcionarão.

Formulários de contato e buscas são obtidos apenas por métodos de terceiros (Google, por exemplo). Alternativamente, nada nos impede de embutir nossa própria solução com nosso próprio serviço.

Nosso Ambiente de Desenvolvimento Local

Hugo é escrito em GO e dá suporte a várias plataformas, para ver todos os lançamentos podemos ir aqui.

Para usuáros do macOS com HomeBrew, instalações podem ser feitas assim:

brew update && brew install hugo

Mais informações sobre instalações no Mac OSX e Windows.

Uma vez instalado, podemos testar sua instalação executando hugo help ou hugo version no terminal.

Criando Primeiro Site Estático Com Hugo

Agora que temos Hugo instalado, podemos começar. Executemos o comando a seguir, substituindo 'your-sitename-here' pelo nome do nosso projeto.

Isso criará o esqueleto do site que podemos visualizar no explorador de arquivos...

Hugos default files

...ou na linha de comando com o comando tree.

Viewing the hugo files with tree in the terminal

Hugo cria 5 sub-pastas e 1 arquivo, usados para criar o site final. Eis uma breve explicação de cada:

  • archetypes: é a definição do nosso conteúdo, onde definimos tags ou categorias padrão, e definimos tipos como artigos, tutoriais ou produtos.
  • config.toml: configuração principal, onde definimos os título, idioma, urls, etc do site.
  • content: as páginas de conteúdo do site são salvas aqui, sub-pastas são usadas para seções, ajudando a organizar o conteúdo. Para produtos, basta criar uma pasta content/products, por exemplo.
  • data: Dados do site, como configurações de localização
  • layouts: layouts para a biblioteca html/template do Go que Hugo utiliza
  • static: quaisquer arquivos estáticos aqui serão compilados no site final, assim, liberdade total para criar qualquer CSS, JS ou imagem por exemplo.
  • themes: criemos ou clonemos temas do GitHub nessa pasta para usá-los no nosso site.

"Hello World" no Hugo

Precisamos adicionar uma publicação para ver o site recém criado. Fazemos isso com esse comando:

Agora, editemos o arquivo content/post/first-post.md. Ele conterá algo parecido com o seguinte, por padrão:

Elementos Pré-Textuais

O conteúdo entre +++ é a configuração TOML da publicação. Também chamada de elemento pré-textual. Ela permite definir a configuração da publicação junto do conteúdo. Por padrão, cada publicção terá as propriedades de configuração visto acima.

Adicionemos algum texto abaixo de +++, assim:

Servindo Dados e Atualização Automática

Para vermos a atualização automática embutida no Hugo, façamos algumas mudanças no site e vejamos o que acontece.

Primeiro, iniciemos o servidor, executando:

Agora, façamos mudanças no arquivo e vejamos Hugo atualizar instantaneamente.

Nosso site estará disponível em http://localhost:1313, mas, espere - ainda veremos uma página em branco, uma vez que não definimos um tema ainda!

Adicionando um Tema

Hugo tem uma biblioteca de tema bem robusta e versátil, já que usa a biblioteca html/template de Go. Temas são fáceis de criar, instalação é tão fácil quanto clonar um repositório na pasta themes do nosso site Hugo.

Hugo não vem com tema padrão, é preciso definir um.

Existem inúmeros temas de código aberto para escolhermos, assim, podemos vê-los em https://themes.gohugo.io/.

Adicionemos vários temas ao site para podermos brincar com todos eles e ver o que preferimos. Façamos isso executando o seguinte no terminal, no diretório do ste em Hugo:

Agora veremos vários temas sendo clonados em nosso site. Existem tantos que podemos descansar um pouco enquanto clona.

A bare amount of themes are available for Hugo

Usando um Tema

Para usar um tema, basta iniciar Hugo com parâmetro -t ou --theme, assim:

Ou podemos adicionar ao config.toml:

ThemeName deve casar com o nome de um diretório dentro de /themes.

Após escolher um tema do diretório, iniciemos o servidor com hugo server --theme=ThemeName e abramos http://localhost:1313.

Eis alguns exemplos de alguns dos temas clonas, onde usamos beg, crisp e cactus. É bom vermos outros e escolher um deles.

The beg theme on your mobile device screen will work great
An example of the crisp theme from Hugos theme repository
An example of testing out a theme in Hugo with your first post

Agora, geramos um site com uma publicação "hello world". O que mais podemos fazer?

Criando um Blog

Criar um blog básica é realmente fácil e possível de fazer em um único dia com Hugo. Primeiro, precisamos definir um arquétivo para a publicação padrão, então criemos o arquivo archetypes/default.md e adicinemos os seguintes elementos pré-textuais:

Definimos aqui algumas tags padrão para um blog sobre casamentos, onde essas tags estarão em todas as publicações. E também criamos uma categoria, posts, só para termos uma ao criarmos uma publicação.

Agora, adicionemos nossa primeira publicação, assim:

Isso criará uma publicação com o arquétipo definido acima. Podemos abrí-lo num editor de textos e começar a escrever direto no formato markdown!

Adicionemos mais publicações...

Para adicionar o conteúdo, basta abrir o arquivo criado pelo Hugo e escrevê-lo após os elementos pré-textuais.

Criando uma Galeria de Fotos

Para criar uma galeria de fotos com Hugo, usaremos a excelente ferramenta hugo-gallery, disponível no GitHub.

Seu uso é assim:

hugo-gallery <source-path> <destination-section> <title> [baseurl]

A ferramenta hugo-gallery criará novos pastas de publicações contendo arquivos markdown para cada imagem no diretório fonte, permitindo um carrossel ordenado. Ele lerá todos os arquivos da pasta source-path e os salvará na pasta estática do site.

Ele criará uma nova pasta dentro da pasta de conteúdo, com base no title dado, por exemplo content/wedding.

Por exemplo:

Visitemos localhost:1313/wedding para ver o conteúdo.

Publicação

Hugo possui várias ferramentas para publicação, como hugomac que é um menu na barra do OSX, permitindo o usuário publicar para um servidor EC2 da Amazon. Nada de linha de comando.

Há o hugodeploy com configuração de SFTP para publicar ou podemos usar publicações automatizadas do próprio Hugo.

Conclusão

Geradores de sites estáticos existem há tempos e Hugo foca bastante nas ferramentas para acelerar e facilitar a criação de sites ou mesmo migrar de sites existentes, como do WordPress. Há muitas ferramentas para Hugo, incluindo editores front-end. Veja-os em https://gohugo.io/tools/.

No futuro, seria muito bom ver mais módulos para Hugo dando suporte a coisas como formulários de contato, galerias ou publicações relacionadas, por exemplo.

O roteiro do Hugo traz muita ideia excitante como dimensionamento dinâmico de imagens; suporte a rsync e importação de imagens de servidores; facilitação de hospedagem na Amazon EC2 e integração com GitHub. Assim, caso não esteja usando Hugo, fique de olho em seu desenvolvimento!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.