Exportar HTML do Notion: Usar com Gerador de Site Estático

Como Funciona a Exportação HTML do Notion e o Que Ela Produz

O Notion exporta seu workspace ou páginas individuais como arquivos HTML. Ao exportar um workspace completo, você obtém um arquivo ZIP contendo um arquivo HTML por página, além de uma pasta chamada assets que armazena imagens, PDFs e outros anexos. Os arquivos HTML usam uma estrutura estrita baseada em divs com estilos inline e classes CSS específicas do Notion, como notion-text, notion-h, notion-list e notion-column.

Essa marcação foi projetada para preservar o layout visual dentro do Notion, não para ser conteúdo web limpo. Por exemplo, um título no Notion se torna <div class="notion-h"><div class="notion-h-title">Texto do Título</div></div> em vez de uma tag <h2> simples. Cada parágrafo recebe um atributo style que define tamanho da fonte, altura da linha e cor. Esses estilos inline sobrescreverão os estilos do tema do seu gerador de site estático e farão suas páginas parecerem inconsistentes.

Antes de usar o HTML exportado do Notion em um gerador de site estático, você precisa remover as classes específicas do Notion, eliminar os estilos inline e converter a estrutura para tags HTML5 semânticas. Você também precisa ajustar os caminhos relativos dos ativos para que imagens e arquivos sejam linkados corretamente no site final.

O Que um Gerador de Site Estático Espera

A maioria dos geradores de site estático, incluindo Hugo, Jekyll e Eleventy, espera arquivos Markdown com front matter ou arquivos HTML limpos. Markdown é o formato preferido porque separa conteúdo da apresentação. Se você quiser manter HTML, o gerador espera tags padrão como <h1> a <h6>, <p>, <ul>, <ol>, <img> e <a> sem estilos inline. O CSS do seu tema cuida de toda a formatação visual. O HTML exportado do Notion não atende a esses requisitos diretamente.

Passos para Exportar Páginas do Notion como HTML e Prepará-las para um Site Estático

Siga estes passos para obter HTML limpo que funcione com Hugo, Jekyll, Eleventy ou qualquer outro gerador de site estático.

1. Exporte seu workspace ou página do Notion
   Abra o Notion e vá em Configurações e Membros > Configurações > Exportar. Escolha HTML como formato de exportação. Selecione Workspace inteiro ou uma página específica. Clique em Exportar. O Notion baixa um arquivo ZIP contendo todas as páginas e uma pasta de ativos.
2. Extraia o arquivo ZIP
   Descompacte o arquivo baixado em uma pasta no seu computador. Você verá um arquivo HTML por página do Notion e uma subpasta assets com imagens e outros arquivos.
3. Remova estilos inline e classes CSS do Notion
   Abra cada arquivo HTML em um editor de código. Use localizar e substituir para remover todos os atributos style="...". Exclua classes CSS que começam com notion- removendo class="notion-..." de cada tag. Substitua <div class="notion-h"> pela tag de título apropriada, por exemplo <h2> para um título de nível 2. Substitua <div class="notion-text"> por <p>.
4. Corrija os caminhos de imagens e anexos
   A exportação do Notion usa caminhos relativos como src="assets/imagem.png". Copie a pasta assets para o diretório static ou public do seu site estático. Atualize os atributos src e href no HTML para apontar para o local correto. Para Hugo, coloque os ativos em /static/assets/ e referencie-os como /assets/imagem.png.
5. Adicione front matter a cada página
   Se seu gerador de site estático usa front matter, adicione-o no topo de cada arquivo HTML. Para Hugo, adicione ---
title: "Título da Sua Página"
date: 2025-01-15
--- antes do conteúdo HTML. Para Jekyll, use o mesmo formato YAML de front matter.
6. Coloque os arquivos no diretório de conteúdo correto
   Mova os arquivos HTML limpos para a pasta de conteúdo do seu site estático. Para Hugo, coloque-os em /content/posts/ ou /content/pages/. Para Jekyll, use /_posts/ com o formato de nome de arquivo YYYY-MM-DD-titulo.html.
7. Faça a build e verifique seu site
   Execute o comando de build do seu gerador de site estático. Para Hugo, execute hugo. Para Jekyll, execute jekyll build. Abra o site gerado em um navegador e verifique se títulos, parágrafos, imagens e links são exibidos corretamente.

Usando uma Ferramenta de Conversão Automatizada

Limpar manualmente dezenas de arquivos HTML é propenso a erros. Use uma ferramenta de conversão para automatizar o processo. notion-to-markdown é um pacote Node.js que converte HTML exportado do Notion em arquivos Markdown limpos. Instale-o com npm install notion-to-markdown. Execute-o nos arquivos HTML extraídos para produzir arquivos Markdown com front matter. Outra opção é notion-export, um script Python que remove estilos inline e converte divs em tags semânticas. Ambas as ferramentas preservam a estrutura do seu conteúdo e lidam com caminhos de ativos.

Problemas Comuns ao Usar HTML Exportado do Notion com Geradores de Site Estático

HTML Exportado Não Tem Front Matter

A exportação do Notion não adiciona front matter como title, date ou tags. Seu gerador de site estático pode ignorar páginas sem front matter ou exibi-las sem um título adequado. Solução: adicione front matter manualmente a cada arquivo ou use uma ferramenta de conversão que gere front matter a partir do título da página e da data de exportação.

Estilos Inline Sobrescrevem Seu Tema

Cada parágrafo e título na exportação do Notion inclui um atributo style com tamanho da fonte, cor e altura da linha. Esses estilos inline têm especificidade CSS maior que os estilos do seu tema. Solução: remova todos os atributos style do HTML antes de colocar os arquivos em seu site estático. Uma expressão regular de localizar e substituir por style="[^"]*" os remove rapidamente.

Caminhos de Ativos Quebram Após Mover Arquivos

A exportação do Notion usa caminhos relativos como assets/imagem.png. Quando você move o arquivo HTML para uma subpasta como /content/posts/, o caminho relativo não aponta mais para o local correto. Solução: copie a pasta de ativos para o diretório raiz static do seu site estático e atualize os caminhos para URLs absolutas como /assets/imagem.png.

Divs Aninhadas Causam Problemas de Layout

O Notion envolve o conteúdo em múltiplos elementos div aninhados. Um parágrafo simples pode estar dentro de três ou quatro divs. Geradores de site estático esperam tags semânticas planas. Solução: achate o HTML removendo divs wrapper. Mantenha apenas as tags de conteúdo mais internas e converta-as para HTML semântico.

HTML Exportado do Notion vs Markdown Limpo para Sites Estáticos

Agora você pode exportar páginas do Notion como HTML, limpar os arquivos e integrá-los em Hugo, Jekyll ou Eleventy. Comece exportando uma única página e executando as etapas de limpeza manualmente para entender a estrutura. Em seguida, configure uma ferramenta de conversão como notion-to-markdown para automatizar o processo em exportações futuras. Para workspaces grandes, considere escrever um pequeno script de build que execute o conversor e copie os ativos para a pasta do seu site estático antes de cada build.