Como criei um campo de comentários para meu Blog

Há bastante tempo venho tentando criar uma “simples” caixa de comentários para os posts do blog. O que parecia ser uma tarefa fácil acabou se tornando uma das maiores desventuras que já enfrentei como coder amador. Passei horas pesquisando possíveis soluções e, na maioria das vezes, encontrava artigos e tutoriais que recomendavam o uso de serviços de terceiros, como Disqus ou o próprio Github. No entanto, como desenvolvi este site do zero, codando linha por linha, minha intenção sempre foi depender cada vez menos de plataformas externas, que acabam se tornando quase “proprietárias” do conteúdo que publico.

Buscando alternativas menos convencionais (e mais desafiadoras), encontrei alguns caminhos interessantes. Percebi que criar a caixa de comentários em si não era o maior obstáculo, mas sim encontrar uma forma de armazenar os comentários em um servidor próprio. Testei soluções como Firebase, Google Script e várias outras, mas falhei miseravelmente em todas. Até conseguia enviar o comentário para o banco de dados, mas ele nunca retornava corretamente. Foi então que, com um bom prompt e muita paciência, recorri ao Gemini e ao Claude para explorar possibilidades e validar, com calma, as melhores opções entre as LLMs.

No fim, encontrei uma solução. Talvez não seja a ideal, mas funcionou. Basicamente, criei um formulário de comentários usando HTML, CSS e JS, e utilizei o Supabase como banco de dados. No Supabase, consegui armazenar e organizar os comentários pelo slug da URL, permitindo que cada post do blog tenha sua própria área de comentários. Como tudo o que faço nasce da curiosidade rs, gosto de compartilhar o que aprendo. Por isso, deixo aqui o caminho que trilhei para criar essa funcionalidade — quem sabe pode ser útil para você também.

Se você quiser ir direto ver o código do projeto, eu deixei ele disponível no Github.

Qual é a pira?

O primeiro passo é configurar o Supabase. A versão gratuita é mais do que suficiente para um projeto como esse, pois a ideia é apenas armazenar conteúdos de texto. Em seguida, a criação do JavaScript, que para mim foi bem pagado, mas rolou. E então, o HTML e o CSS, que foram os mais tranquilos de fazer.

Configurar o Supabase

No Supabase, criei uma conta gratuita e então um "new project". Escolhi um nome simples (você pode colocar o que preferir), criei uma senha e escolhi a região de São Paula, que é a única do Brasil.

No painel esquerdo, em "Table Editor", fui até "Create a new table", nomeei como "comentarios" e desmarquei "Enable row level security". E então adicionei as seguintes colunas: "id" (já vem criada), "post_slug" (text), "nome" (text), "link" (text), "comentario" (text) e "created_at" (já vem criada). Salvei.

Em "Authentication" > "Polices", criei duas políticas: "Enable read acess for all user", que já vinha previamente configurada e "Enable insert acess for all user", a qual tive que criar manualmente. Depois fui em "Settings" > "Data API" e peguei a URL do projeto, algo como: https://xxxxxxxxx.supabase.co e depois em "API Keys" e peguei a chave pública.

Apenas o HTML

O HTML tentei manter o mais simples possível, apenas com os elementos que realmente importam, quem sabe depois eu vou pirar um pouco mais. Veja o HTML aqui.

Então fiz um CSS minimalista, apenas para organizar os elementos e deixar menos feio. O ideal é adicionar ele dentro do seu .css existente, pra puxar o estilo dos elementos que faltam. Veja o CSS aqui.

E O JS?

Por fim, o JavaScript, gerado com a ajuda do Claude, pois eu me perdia o tempo todo. Veja o JS aqui.

E então...

Supabase configura e códigos criados, adicionei tudo em uma página teste chamada "latest-post.html" e rezei para dar certo. O teste foi melhor do que eu esperava! Os comentários foram salvos e carregados corretamente, e o formulário funcionou como deveria. Agora, cada post do blog pode ter seus próprios comentários, organizados pelo slug da URL. É uma solução simples, mas que atende às minhas necessidades e me permite ter controle total sobre os dados.

Por fim, gerei um Python para me ajudar a adicionar o código do campo de comentários nos HTMLs que faziam parte do blog. Eu gosto muito de usar Python para essas tarefas, sei que é um modo ainda meio noob de aproveitar essa linguagem, mas é aos poucos que vamos aprendendo, certo?