Prova de Conceito: Um Blog sem Frameworks, apenas HTML, CSS e JavaScript

#HTML
#CSS
#JavaScript

Você já se questionou se é possível criar um Blog Pessoal sem a utilização de Frameworks ou Bibliotecas?

Eu me perguntei isso por alguns dias e, com algum auxílio de IA para organizar as ideias, cheguei a uma conclusão: "Por que não tentar?"

Começou neste momento a caminhada até o deploy do Blog: https://rodrigues-dev-br.vercel.app/

A ideia era criar algo minimalista, sem "helpers", recorrendo apenas ao bom e velho kit fundamental da web: HTML para estruturação, CSS para estilização e JavaScript puro para dar dinâmica às páginas.

Definindo os Requisitos

Sabendo quais tecnologias utilizar, comecei a definir alguns requisitos para o funcionamento do Blog:

Dinamismo sem repetição: O principal requisito era não ter que criar uma nova página .html toda vez que eu quisesse adicionar uma nova postagem.
Estrutura unificada: Eu teria uma página HTML principal (index.html) que conteria o cabeçalho, o rodapé e um "corpo" principal. Este corpo seria atualizado dinamicamente para exibir a lista de posts ou um post específico.
O toque pessoal: E, claro, eu finalmente teria um site no ar com meu sobrenome e a frase: "Todos os direitos reservados".

A Estrutura: HTML

Com os requisitos definidos, a estrutura base do index.html ficou limpa e focada. Ela serve como um "template" principal para todo o site.

HTML

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  </head>
<body>
  <header class="header">
      <div class="container">
          <h1 class="logo"><a href="/">Rodrigues.Dev</a></h1>
      </div>
  </header>

  <main class="container">
      <section id="posts-list" class="posts-list">
          </section>
  </main>

  <footer class="footer">
      <p>&copy; 2025 Rodrigues.Dev. Todos os direitos reservados.</p>
  </footer>

  <script src="js/main.js"></script>
</body>
</html>

A segunda parte importante é a página de Postagem. Ela reutiliza a mesma estrutura de cabeçalho e rodapé, alterando apenas o conteúdo da tag <main> para exibir o artigo selecionado:

HTML

<main class="container">
  <article id="post-content">
      </article>
</main>

A Dinâmica: JavaScript e a Fetch API

Partindo para a tecnologia responsável pela "mágica", temos dois arquivos JavaScript principais. O "trabalho duro" em ambos é feito pela Fetch API, nativa dos navegadores.

main.js (Página Inicial): Responsável por cuidar da listagem de postagens na home. Ele busca os dados e os renderiza dinamicamente dentro da <section id="posts-list">.
post.js (Página de Post): Responsável por identificar qual post está sendo requisitado (geralmente via parâmetro na URL) e, em seguida, buscar e renderizá-lo dentro do <article id="post-content">.

O "Banco de Dados": Arquivos JSON

Neste momento, você deve estar se perguntando: "E como as postagens são armazenadas?"

Para manter a simplicidade e evitar um banco de dados complexo, a maneira mais simples que encontrei foi utilizar arquivos JSON.

O projeto conta com um diretório data/ onde os arquivos JSON (as postagens em si) estão guardados. Além deles, existe um arquivo crucial: posts.json.

Pense no posts.json como uma "lista telefônica" ou um índice. Ele contém uma lista com metadados de todos os posts (como título, data e o nome do arquivo JSON correspondente). É a partir dele que o main.js constrói a lista da home e sabe qual arquivo de postagem específico o post.js deve buscar quando o usuário clica em um post.

Chegar ao deploy deste projeto foi uma jornada de redescoberta dos fundamentos da web. Muitas vezes, no mundo da tecnologia, somos levados a acreditar que precisamos de frameworks complexos para qualquer tarefa. Este blog prova que, para muitos casos, o "kit básico" (HTML, CSS e JS) não é apenas viável, mas incrivelmente eficiente.

A utilização da Fetch API para criar um sistema de Single Page Application (SPA) rudimentar, combinada com arquivos JSON atuando como um banco de dados leve, mostrou-se uma solução robusta e de fácil manutenção.

Para quem está estudando desenvolvimento, construir um projeto assim "do zero" é um exercício fantástico. A simplicidade, aqui, não foi uma limitação, mas uma escolha consciente pela performance, controle e, acima de tudo, pelo aprendizado.