Tudo que você precisa saber sobre esse site.
índice
Introdução.
Primeiramente, seja bem-vindo(a) ao meu site e blog pessoal. A ideia do projeto é criar um blog de baixo custo inicial para aqueles que desejam começar a escrever para a internet, seja para criar um portfólio online escrevendo sobre seus conhecimentos ou compartilhá-los com o mundo. Este site utiliza uma "stack" específica para gerenciamento de conteúdo. Para este tipo de aplicação, as tecnologias que serão mencionadas aqui são altamente recomendadas. Claro que existem outras aplicações possíveis, mas esta é uma das principais.
As principais tecnologias são: Next.js, GraphQL e, como gerenciador de conteúdo, a plataforma de CMS Contentful, que disponibiliza uma API para integração com sua aplicação. A plataforma é paga, mas tem um plano gratuito que serve para um site pequeno com poucos usuários. Para mais detalhes, acesse o site da plataforma e documentação.
Esta stack é bem conhecida atualmente como JAMstack e você pode encontrar mais informações e outras ferramentas relacionadas a ela neste site, tem muito contéudo na internet sobre o assunto não vou falar muito pois não e o foco.
Projeto.
Caso queira iniciar um projeto do zero, pode começar pelo site de templates da Vercel. Cada template tem um tutorial "getting started" respectivo no repositório do GitHub e no próprio site da Vercel (que é uma plataforma responsável por criar e manter o Next.js).Temos algumas vantagens em usar esse template. Uma delas é o baixo custo para começar. Se for um projeto do tipo pessoal e não comercial, é possível publicá-lo na Vercel. No caso de projetos comerciais, recomendo a Netlify.O CMS da Contentful tem um bom plano para iniciar, com algumas restrições. Para este site, por exemplo, é um bom jeito de começar e, conforme for crescendo, trocar de plataforma ou até mesmo adquirir um plano. No meu caso, construí dois blogs, o segundo com Strapi, que é outro CMS menor (porém poderoso). Posso falar dele em outros artigos.
Principais vantagens.
Existem algumas vantagens em usar essa stack:
É uma forma rápida e fácil de criar e gerenciar conteúdo com o Contentful;
Tem um baixo custo inicial;
O CMS possui recursos de internacionalização;
Não é necessário provisionar serviços em cloud complicados;
É uma boa oportunidade de aprendizado, principalmente com stacks frontend.
Desvantagens.
É importante lembrar que há algumas desvantagens ao utilizar essa stack, principalmente a longo prazo. Algumas delas são:
O plano gratuito da Contentful tem limitações, e os planos pagos podem ser caros;
Se você quiser trocar de plataforma, é preciso desenvolver seu projeto pensando nessa possibilidade, o que pode demorar para lançar seu projeto;
A plataforma da Vercel também não é muito acessível em termos financeiros, mas é uma excelente opção para publicar projetos e testá-los em produção.
Em resumo, essa stack é uma boa opção para começar um projeto MVP de um blog, mas se o projeto for muito grande ou envolver várias pessoas, pode ser necessário pesquisar por serviços mais acessíveis.
Quais tecnologias usei no projeto.
Aqui estão as decisões e diversas tecnologias que usei para criar o site.
Linguagem(Typescript)
Uso TypeScript profissionalmente com Angular, por isso escolhi utilizá-lo como linguagem principal neste site, devido ao seu poder e por ser utilizado em projetos de grande escala por conta da tipagem, que torna o projeto mais organizado e menos propenso a bugs.
Front end (NextJS, Material UI e Tailwind)
O Next.js tornou algumas tarefas mais simples ao trazer algumas funcionalidades built-in, como o roteamento automático, recursos de otimização e desempenho de imagem e recursos de otimização de SEO além de uma melhor organização do projeto.
As funcionalidades de serverless function do Next.js também ajudam bastante quando precisamos de recursos do backend, mas não queremos criar um do zero. Ajudou na criação do "infinite scroll".
Com o Material UI e o Tailwind, ficou muito mais simples reutilizar componentes, o que ajudou na questão estética do site e na velocidade de criação de layouts bonitos e performáticos.
Graphql (Contentful)
Prefiro usar o GraphQL juntamente com o Contentful. O GraphQL ajuda bastante no fato de que, ao consumir uma API, nem todos os campos de cada requisição são necessários. Isso deixa as chamadas ao backend mais rápidas e leves, além de proporcionar uma organização do projeto melhor.
CMS Headless (Contentful)
Usar um CMS headless torna o gerenciamento de conteúdo um problema a menos. Imagina criar tudo do zero! Isso ajuda bastante na produtividade e na performance. A plataforma responde rapidamente e, mesmo nos planos grátis, oferece "content preview", o que ajuda nos testes antes de publicar os artigos em produção. Simplismente consumimos uma API que se molda dependendo do seu conteúdo.
Conclusão
Em conclusão, este é um projeto inicial que ainda precisa de melhorias e recursos para ajudar na navegação. No entanto, é um bom começo para quem quer escrever e compartilhar seus projetos. Recomendo que você volte a este artigo, já que ele será atualizado constantemente, e visite o blog e me siga nas redes sociais para ficar de olho nas atualizações. Com o tempo, espero adicionar mais recursos e funcionalidades para tornar a experiência do usuário ainda melhor.
Referências
Documentação oficial do Next.js: https://nextjs.org/docs
Documentação oficial do Material UI: https://material-ui.com/
Documentação oficial do Tailwind CSS: https://tailwindcss.com/docs
Documentação oficial do GraphQL: https://graphql.org/learn/
Documentação oficial do Contentful: https://www.contentful.com/developers/docs/
Documentação oficial do TypeScript: https://www.typescriptlang.org/docs/
Documentação oficial do Strapi: https://strapi.io/documentation/developer-docs/latest/getting-started/quick-start.html
Compartilhe nas suas redes sociais.
Copiar