Experiências para blog pessoal com Next e Angular 18
Criando Blog Pessoal no GitHub Pages
Eu estava à procura de uma solução simples e, de preferência, gratuita para criar um blog pessoal. Inicialmente, pensei em usar Angular como frontend e algum headless CMS para gerenciar o backend. Contudo, apesar de parecer uma solução prática, percebi que não era tão simples quanto eu imaginava. Eu precisava de algo que me proporcionasse total liberdade para escrever e editar o conteúdo das publicações. Foi então que surgiu a ideia de usar Markdown para criar os posts.
Pesquisei na web por ferramentas que atendessem a essas necessidades e encontrei diversas soluções baseadas em Next.js. Decidi, então, criar meu blog com Next.js e comecei a editar os posts diretamente no formato Markdown.
Com o blog funcionando, resolvi tentar algo semelhante, mas utilizando Angular. Experimentei o SSG (Static Site Generation), mas não aprofundei muito. No final, optei por uma solução baseada em SPA (Single Page Application), que, na minha visão, ficou mais simples de gerenciar.
Criei uma estrutura convencional em Angular e utilizei o HttpClient para buscar os arquivos Markdown. Para converter o conteúdo em páginas HTML, uso a biblioteca marked e aplico alguns outros processamentos adicionais.
Também adicionei scripts Node.js com prefixo pre para processar todos os posts antes do deploy. Esses scripts geram um arquivo JSON que auxilia na criação de menus, cards e links para a aplicação. Entretanto, o conteúdo de cada publicação permanece armazenado em Markdown, garantindo a flexibilidade e simplicidade que eu buscava.
Essa abordagem me permitiu criar um blog que é fácil de gerenciar, personalizável e atende completamente às minhas necessidades.
Os links dos respositórios.
Next: https://github.com/emanueldsc/emanueldsc.github.io Aplicação: https://emanueldsc.github.io/
App Angular https://github.com/emanueldsc/lore Aplicação: https://emanueldsc.github.io/lore/
Uma ferramenta interessante para gerar páginas através de markdown com Angular é o Analog.js, onde te permite criar todos os componentes da sua aplicação com Angular, e ainda adicionar conteúdo através de arquivos estáticos Markdown direto da pasta do seu projeto, então ele n precisa buscar nada em um CMS.
Assim como falaram, gosto do Docusaurus, utilizo github para fazer o build (github actions) e o host (github pages).
Caso queira ver um exemplo de como criar, segue um tutorial no meu site. https://code.lucasbaccan.com.br/tutorial/site_docusaurus/introducao
e aí, dev meu último projeto foi exatamente criar um blog/portifólio com postagens em markdown com nextjs, só q fui por um caminho diferente
cara uma dica muito boa é apenas usar o Docusaurus, eu tô usando ele no site que tô criando o harukadev.com e to amando ❤️, ele permite tanto criar um site legal, quanto um blog ou uma documentação.
com certeza vc já viu algum site usando o Docusaurus, ele permite criar páginas usando react ou markdown, também tem suporte para tradução e outras coisas legais
se tú configurar certinho tem como fazer ele integrar com o github actions e o github pages
Entre os geradores de site estáticos, já utilizei o Pelican (https://getpelican.com/) em Python e o Hugo (https://gohugo.io/) escrito em GO.
Para criar um novo post (depois do site configurado) é só criar e editar no próprio github um arquivo Markdown. Além disso, os templates são bem customizáveis, o que deixa o processo bem simples, tudo isso sem back-end e publicável gratuitamente no Github Pages (https://pages.github.com/), na Azure da Microsoft (http://azure.microsoft.com) ou mesmo no huggingFace (https://huggingface.co/).
O meu blog (http://giseldo.github.io) é feito com o Hugo. No início usei o Pelican, mas encontrei poucos templates e recursos. O Hugo atendeu melhor as minhas necessidades.