Arquitetura Front-End: Como Estruturei o Projeto aqgoes_blog

Intradução

Quando tomamos a iniciativa de tirar um projeto do papel e colocá-lo em prática, a empolgação inicial muitas vezes nos faz pular etapas cruciais. Mas para mim, a primeira e mais importante preocupação foi estabelecer uma base sólida: a estrutura do meu projeto.

Neste artigo, vou abrir o capô do aqgoes_blog e mostrar, de desenvolvedor para desenvolvedor, como organizei a arquitetura front-end, quais arquivos compõem o sistema e os motivos técnicos por trás das minhas escolhas de organização e carregamento.

O Desafio da Organização Inicial

Misturar arquivos HTML de conteúdo com estilos CSS e scripts JavaScript na mesma pasta é uma receita para o desastre. O código se torna difícil de ler, a manutenção vira um pesadelo e escalar o projeto fica impossível.

Minha prioridade foi criar uma estrutura que fosse, ao mesmo tempo, simples e didática. Eu precisava saber exatamente onde encontrar cada componente visual, regra de negócio ou arquivo de conteúdo do blog.

Minha Arquitetura de Pastas e Arquivos

O núcleo do aqgoes_blog segue uma hierarquia clara. Decidi centralizar os arquivos de estilo e interatividade para manter a raiz do projeto limpa, contendo apenas as páginas HTML que o usuário final acessa.

Esta é a estrutura final que implementei:

# Raiz do Projeto: aqgoes_blog
|
├── index.html       # Página Inicial (Home)
├── contato.html     # Página de Formulário de Contato
├── sobre.html       # Página 'Sobre Mim' ou o Projeto
├── artigos.html     # Página de Listagem (Índice) de todos os posts
├── posts.html       # O template do corpo de um artigo individual
│
└── assets/          # Pasta Principal de Ativos (Estilos, Scripts, etc.)
    |
    ├── css/         # Subpasta de Estilos
    │   └── style.css # Arquivo principal de regras CSS
    │
    └── js/          # Subpasta de Scripts
        └── script.js # Arquivo principal de interatividade JS

Detalhando as Páginas e Ativos

Como você pode ver na tabela abaixo, cada arquivo tem uma responsabilidade bem definida dentro do sistema:

Arquivo/Pasta	Tipo	Responsabilidade Principal
index.html	Conteúdo	Porta de entrada, apresenta o blog e as últimas novidades.
artigos.html	Conteúdo	Funciona como o índice centralizado de todas as publicações.
posts.html	Conteúdo	Fornece a estrutura onde o conteúdo específico de cada post é carregado.
assets/css/	Estilo	Armazena a identidade visual (style.css), garantindo consistência.
assets/js/	Interatividade	Contém a lógica (script.js) para elementos dinâmicos da interface.

Escolhas Técnicas de Performance e SEO

Para manter o blog leve e rápido, adotei uma stack técnica moderna e semântica. A estrutura HTML utiliza o que há de mais atual no HTML5 para garantir que o site seja acessível e bem compreendido pelos motores de busca.

Dica de Ouro: CDNs vs. Arquivos Locais. Se você está preocupado com o SEO e o Core Web Vitals, considere carregar bibliotecas externas (como Google Fonts ou FontAwesome) via CDN (Content Delivery Network). Os navegadores muitas vezes já têm essas bibliotecas em cache de outros sites, o que acelera o carregamento da sua página e evita penalizações nos mecanismos de busca por lentidão.

Lógica de Interatividade Dinâmica

O arquivo script.js, localizado na pasta assets/js/, foi projetado para lidar com a interatividade de forma eficiente. Ele escuta os eventos da DOM e manipula a interface dinamicamente, permitindo, por exemplo, que eu mantenha um único arquivo posts.html que carrega conteúdos diferentes com base no artigo selecionado.

// Exemplo conceitual simples em assets/js/script.js
document.addEventListener('DOMContentLoaded', () => {
  // Captura o ID do post a partir da URL
  const postId = new URLSearchParams(window.location.search).get('id');
  
  if (postId) {
    // Busca o conteúdo específico e o insere no posts.html
    loadPostContent(postId);
  }
});

Conclusão

A arquitetura do aqgoes_blog não foi criada por acaso. Cada pasta, arquivo e escolha técnica — desde a separação de ativos em assets/ até o carregamento via CDN — reflete uma preocupação com a performance, manutenibilidade e SEO. Uma base sólida é o primeiro passo para um projeto bem-sucedido.

Como desenvolvedor, qual é o seu principal ponto de atenção ao iniciar a estrutura de pastas de um novo projeto front-end? Você prefere uma estrutura mais plana ou mais aninhada? Deixe seu comentário abaixo!