Hugo - Integração de site com Pagefind

Criar um site em Hugo framework é muito fácil e nesse tutorial faremos a integração do site com o Pagefind. Isso deixará nosso site mais interessante e funcional através de um buscador rápido e extremamente eficiente.

Pagefind é uma biblioteca de pesquisa totalmente estática, que faz baixo uso de largura de banda, não precisa de infraestrutura e que tem uma excelente performance, seja em pequenos sites, ou sites de grande porte.

Pré-requisitos:

NodeJS

Caso não tenha instalado, segue o link para baixar e instalar

https://nodejs.org/en/download/package-manager
Site em Hugo

Caso não tenha o site em Hugo, nesse tutorial ensino como criar

https://tiagoscosta.com.br/posts/hugo-framework-criando-o-primeiro-site/

Ou você pode clonar esse repositório, com o submódulo, pois é ele que uso nesse tutorial

git clone https://github.com/tiagotsc/hugo-first-site.git --recurse-submodules

Integração Link para o cabeçalho

Na pasta raiz do seu site, entre na pasta de themes e depois na pasta do tema que está usando.

No meu caso estou usando o tema Ananke.

Copie a pasta layout e cole da raiz do seu site, pois iremos editar e sobrepor o conteúdo existente.

Seu diretório deve ficar mais ou menos assim:

first-site/
├── archetypes/
├── assets/
├── content/
├── data/
├── i18n/
├── layouts/         <-- a pasta que copiamos e colamos
├── public/
├── resources/
├── static/
├── themes/
└── hugo.toml

Abra o arquivo que está em layouts > _default > baseof.html. Dentro da tag main coloque o seguinte conteúdo:

<link href="/pagefind/pagefind-ui.css" rel="stylesheet">
<script src="/pagefind/pagefind-ui.js"></script>
<div id="search"></div>
<script>
    window.addEventListener('DOMContentLoaded', (event) => {
        new PagefindUI({ element: "#search", showSubResults: true });
    });
</script>

Deve ficar da seguinte forma:

Pagefind1-configuração inicial

Depois no terminal, na pasta raiz do seu site, rode:

# para compilar o site (é necessário antes de realizar a indexão)
hugo

# instale, caso não tenha instalado, o Wrapper Node e realiza a indexão das páginas do site
npx -y pagefind --site public

# se o Wrapper Node já estiver instalado, só indexa as páginas
npx pagefind --site "public"

# subo o site para ver o resultado
hugo server -D

Acesse o navegador em http://localhost:1313.

Você verá que tem um campo de busca e ao digitar o que deseja, que no meu caso digitei post, ele retornou alguns resultados.

Pagefind2-resultado busca

Nós só temos uma postagem, mas note que a busca retornou vários resultados. Isso ocorreu porque não configuramos a forma como Pagefind buscar os metadados.

Vamos fazer isso agora!

Abra o arquivo layouts > _default > summary-with-image.html e no h1 coloque o atributo data-pagefind-body, conforme imagem abaixo:

Pagefind3-personalizando busca

Dessa forma estamos restringindo a busca de metadados para indexação somente do título das postagem.

Assim quando formos realizar a busca, o resultado será retornado apenas através do título:

Pagefind3-busca apenas titulo

Agora você já pode usurfruir desse buscador poderoso e eficiente dentro do seu site🙂!

Em breve abordarei mais recursos sobre o assunto.

Comandos úteis

# COMANDOS HUGO

# Compila o site, o resultado fica diponível na pasta public
hugo

# Sobe o site localmente sem exibir postagens de rascunhos (padrão do Hugo)
hugo server

# Sobe o site localmente exibindo postagens de rascunhos
hugo server -D

# Sobe o site localmente deixando-o acesssível de qualquer dispositivo na rede
# Bom para acessar de outra máquina ou visualizar no celular
hugo server --bind 0.0.0.0 --baseURL http://0.0.0.0 --port 1313 -D
Ou
hugo server --bind=0.0.0.0 --baseURL=http://0.0.0.0:1313 -D

# Cria uma nova postagem
hugo new content content/posts/my-first-post.md

# Listar comandos
hugo -h

# Mais detalhes dos comandos na documentação oficial
https://gohugo.io/commands

# Pagefind indexar páginas do site (primeiro compile o site com o comando 'hugo')
npx pagefind --site "public"