Criando uma Busca em Sites Estáticos

Sites Estáticos, como esse Blog que você está lendo, normalmente não tem um Banco de Dados, ou seja, buscas normalmente não seriam possíveis. Mas, tem algumas formas de implementar essa ferramenta nesse tipo de site, e entre elas, há o Pagefind.

O Pagefind é um sistema de busca criado especificamente para sites feitos em Geradores de Site Estático, como o Hugo. Ele faz isso sem precisar de um Banco de Dados, com o Índice dele sendo gerado depois de gerar o site.

Como implementar

Para implementar o Pagefind, primeiro temos que definir onde ele irá fazer a indexação. Pessoalmente, prefiro fazer isso apenas pelo conteúdo das postagens, então o arquivo a ser editado é o /layouts/_default/single.html.

Como quero indexar apenas o conteúdo da postagem, eu tenho que envolver o {{ .Content }} com um <main data-pagefind-body> e fechar com um </main>.

{{ define "main" }}
		(...)
		<main data-pagefind-body>
			{{ .Content }}
		</main>	
		(...)
{{ end }}

E é isso que fará com que o Pagefind indexe apenas o conteúdo do Post. Com isso, tem que montar a Barra de Busca. Eu optei por montar ela num Partial separado, então se deve criar um arquivo em /layouts/partials/, e criei com o nome de search.html…

<div class="search-wrapper">
	
    <link href="/pagefind/pagefind-ui.css" rel="stylesheet">
    <script src="/pagefind/pagefind-ui.js"></script>
    
    <div id="search"></div>
    
    <script>
        window.addEventListener('DOMContentLoaded', () => {
            new PagefindUI({ 
                element: "#search", 
                showImages: true,
translations: {
    placeholder: '{{ T "searchPlaceholder" | default "Search..." }}',
    clear_search: '{{ T "searchClear" | default "Clear" }}',
    load_more: '{{ T "searchLoadLore" | default "Load More" }}',
    zero_results: '{{ T "searchZeroResults" | default "No results found for [SEARCH_TERM]" }}',
    many_results: '{{ T "searchManyResults" | default "[COUNT] results found" }}',
    one_result: '{{ T "searchOneResult" | default "1 result found" }}',
    searching: '{{ T "searchSearching" | default "Searching..." }}'
}
            });
        });
    </script>
</div>

… e depois, implementei uma página de Busca separada, com esse outro template em /layouts/_default/search.html.

{{ define "main" }}
	
	<div class="postList">
		<main>
			<h1>{{ i18n "searchPage" | default "Search Content" }}</h1>
			<div class="searchContent">
				{{- partial "search.html" . -}} 
			</div>
		</main>	
	</div>
{{ end }}

E depois, criei um arquivo search.md em /content com o seguinte conteúdo:

---
title: "Buscar Conteúdo"
layout: "search"
outputs:
  - html
sitemap:
  disable:
---

Isso fará com que a página de busca seja criada com o leiaute que definimos anteriormente e que essa paǵina não vá para o sitemap. E assim, o Pagefind está implementado. Mas, ainda temos que baixar ele e criar os arquivos necessários.

Como instalar e usar

Há três formas para instalar (e usar) o Pagefind: Pelo npm, pelo pip ou com o binário pré-compilado.

Pelo npm: Para aqueles que já usam os pacotes do NodeJS, via npm, pode instalar (e usar) o Pagefind com esses comandos:

hugo --minify
npx pagefind --site "public"

Pelo pip: Para aqueles que usam o ambiente de desenvolvimento do Python, há a opção de instalar o Pagefind com esse comando…

python3 -m pip install 'pagefind[extended]'

E depois de instalado, usar essa dupla de comandos:

hugo --minify
python3 -m pagefind --site "public"

Usando o Binário: Para aqueles que querem instalar o Pagefind manualmente, tem a opção de baixar o binário do Pagefind. Basta baixar de acordo com o Sistema Operacional que você utiliza, e executar ele por linha de comando.

hugo --minify
./pagefind --site "public"

E assim, o Pagefind irá gerar os arquivos necessários para o uso dele no site. E para testar, pode colocar um && hugo server para poder testar a busca em seu Blog. Por exemplo, no binário, o comando ficaria assim:

hugo --minify && ./pagefind --site "public" && hugo server --renderToDisk

Concluindo…

Criar uma busca em um site estático é possível e não precisa ser uma dor de cabeça. O Pagefind é um bom meio termo, em que entrega uma pesquisa muito rápida com a velocidade de um site estático. Com isso, esse é o resultado da página de Busca separada:

E para a pesquisa, apenas digite a palavra, que o Pagefind irá exibir os resultados instantaneamente:

Esse tutorial é para o Hugo, mas acredito que outros SSGs possam se beneficiar desse tutorial.