COMO INTEGREI MEU BLOG DENTRO DO MEU SITE PESSOAL

    Eu ja tenho meu Portfólio e meu Blog a certo tempo. O Portfólio a cerca de 2 anos e o Blog a cerca de 5 anos, mas uma coisa vinha me incomodando. Ao clicar no item Blog do menu e ser encaminhado para o meu Blog dentro do Blogger da Google, ocorria uma quebra visual muito grande, pois mesmo deixando o mais clean possível, o Blog tinha uma estética muito diferente do meu Portfólio. E eu não queria apenas um link levando para outro lugar, queria que o blog parecesse parte do mesmo sistema do meu site, com o mesmo layout, navegação e identidade visual, mas eu não sabia como fazer isso.

    O problema era que meu blog ja existia no Blogger, enquanto meu portfólio era um site estático feito em HTML, CSS e JS, e hospedado na Vercel. Então veio a pergunta, "Como integrar um blog externo dentro de um site estático, sem precisar criar nada do zero?". Eu não queria ter que fazer um blog novo do zero usando WordPress, ou mesmo fazer um mini CMS para integrar no meu site, queria apenas usar o que ja estava pronto. Aproveitar o que ja existia da forma mais simples possível.

    Pesquisei um pouco e encontrei uma solução, que foi usar RSS e uma função serveless como proxy.

    O Blogger expõe todos os posts através de um feed RSS. RSS é basicamente um arquivo XML que contém o título, data, link e conteúdo do post. Ou seja, em vez de consumir o site do Blogger, eu passei a consumir apenas os dados dele.


    O Blogger continua sendo o CMS onde escrevo e publico os artigos. Uma função serveless na Vercel atua como proxy para buscar o RSS e disponibilizá-lo para o site. Por fim, o front-end do portfólio consome esse feed, faz o parse do XML e renderiza os posts dinamicamente.

    Mantive uma organização bem clean. Os posts são renderizados do mais novo para o mais antigo, e adicionei também uma função search para pesquisa. Dentro do projeto, uma página lista todos os posts, agrupando-os por mês e ano, enquanto outra página funciona como template para exibir o conteúdo completo de cada artigo. Ao acessar o Blog, um script JavaScript busca o feed, converte o XML usando o DOMParser, organiza os dados e gera a lista de posts ordenados do mais recente para o mais antigo.

    Quando o usuário clica em um título, ele é direcionado para a página do post, que novamente consulta o feed, encontra o artigo correspondente e renderiza o conteúdo dentro da página. Dessa forma, todo o conteúdo cotinua sendo publicado e gerenciado no Blogger, mas visualmente, o blog passa a existir dentro do meu portfólio.

    No final, o resultado foi exatamente o que eu buscava. O Blog agora funciona como uma extensão natural do portfólio. Para o usuário, não há mudança de domínio ou interface. Para min, continua sendo possível escrever e gerenciar conteúdo normalmente no Blogger. Não precisei reinventar a roda, ou fazer nada do zero, como criar um mini CMS ou algo do tipo, apenas integrei usando uma ferramenta que ja resolvia esse problema. O Portfólio continua simples, fácil de manter, enquanto o blog se beneficia da infraestrutura que o Blogger ja oferece.

    O resultado é uma solução leve, funcional e integrada, que mantém a experiência do site consistente sem adicionar complexidade desnecessária ao projeto.

    Aproveitei também que ja estava fazendo esses updates, e melhorei a usabilidade do próprio site. Como agora eu teria navegação interna, seria necessário ter algumas animações e melhorias visuais, então aproveitei e adicionei animações de transição na navegação, Algumas animações nos hovers e algumas firulas. Melhorei também a parte de SEO.
    

    No futuro caso o fluxo de acesso aumente, será interessante criar um cache para que a cada x time, seja feito essa requisição do RSS, atualizando o cache e renderizando as informações do cache ao invés de sempre fazer uma requisição a cada acesso. No momento isso é irrelevante devido a quantidade de acessos que tenho.

    Também não sei por mais quanto tempo vou manter esse portfólio. Ele ja tem cerca de 2 anos, e nunca fiquei usando o mesmo Layout por tanto tempo, então mesmo gostando bastante desse Design, pode ser que logo mais eu faça algumas modificações.

Comentários

Postagens mais visitadas deste blog

APRENDENDO A APRENDER - HISTÓRIA DA PROGRAMAÇÃO

UM APP ABANDONADO, UM CLIENTE MESTRE DOS MAGOS

O CLIENTE DESINTERESSADO