· 5 min read
Ferramentas para construção de sites com JAMstack
Ferramentas para facilitar o desenvolvimento utilizando JAMstack. CDNs, hospedagens, geradores estáticos, deploy contínuo, automatização e mais.
No último artigo da série sobre JAMstack tivemos uma introdução ao que é essa arquitetura. Se você não leu, confere aqui: JAMstack introdução.
Neste artigo vamos conhecer algumas ferramentas que podemos utilizar para construir sites JAMstack para facilitar as nossas vidas, como os geradores de site estático, CDNs, HTTPS, comentários, formulários e uma alternativa para hospedagem do site.
Geradores de site estático
Vamos conhecer a lista partindo dos mais famosos até os mais novos:
Destas ferramentas eu já utilizei o Hexo, quando migrei de WordPress para geradores estáticos, conheço o Hugo, pois fiz alguns testes antes de migrar para o Jekyll, utilizo o Jekyll neste blog e já mexi com Pelican.
Não vejo diferença na utilização de geradores estáticos, pois é a mesma proposta e no final é a mesma maneira de resolver, só muda a linguagem ao qual foi desenvolvido o gerador o que altera a performance do mesmo, como é o caso do Hugo.
Uma ferramenta que veio para mudar completamente a maneira como utilizamos os geradores estáticos é o Gatsby, que eu ainda não utilizei, porém ele utiliza React como sistema de templates e GraphQL para consulta de dados, o que pode ser muito familiar para quem trabalha com essa stack e bem legal para reutilizarmos componentes já existentes em React. Como ele veio com o ecossistema mais badalado do momento, já possui muitos plugins que podemos utilizar em nossos sites, assim como uma bela documentação. Recomendo fortemente que você dê uma olhada nessa ferramenta antes de bater o martelo sobre qual escolher.
Se você quer criar algo simples e nem se preocupar com hospedagem ou sistema de build, rodar um Jekyll com GitHub Pages é o processo mais rápido. E, caso você não goste de nenhum tema que encontrar para utilizar com Jekyll, pode usar o Dunders, que é uma estrutura prémontada para você criar seu site ou blog com Jekyll.
CDNs
Vamos conhecer a lista dos CDNs que podemos utilizar em nosso site JAMstack:
Destes eu já utilize o CloudFlare, conheço o Cloudfront e atualmente utilizo o Netlify. Para um site simples podemos utilizar o CloudFlare ou Netlify, ambos tem pouco trabalho de configuração e possuem ferramentas e relatórios de todos os tipos, sendo o Netlify o mais recomendado para facilitar nosso dia a dia com um site JAMstack, afinal ele já possui tudo o que precisamos, como invalidação automática do cache e deploy automático.
Para aplicações muito robustas, que demandam maiores configurações e/ou monitoramento, as ferramentas mais corporativas são mais interessantes e, neste caso, eu recomendaria o Cloudfront pelo preço, mas não fiz cálculos ou testes com os do Google e Azure, então não é uma recomendação muito embasada. Vale a pena você conferir os preços nos sites e avaliar qual a melhor opção para o seu caso.
CloudFlare e Netlify são gratuitos para os casos mais simples.
Hospedagem de imagens e vídeos
Caso você queira hospedar imagens com direito a compressão e otimização da rede, podemos usar algumas ferramentas:
Já utilizei as três opções e hoje estou com o Netlify pela facilidade de uso. Eu subo minhas imagens junto com minha aplicação e a plataforma trata de fazer a otimização para mim baseado nas minhas configurações.
O Cloudnary é de longe o mais completo quando falamos de hospedagem de imagens, vídeos e afins, pois possui muitas opções de uso e é bem utilizado pelo mercado.
Caso você possa fazer isso, eu recomendo a utilização do próprio YouTube (ou Vimeo ou outra plataforma) para hospedar os vídeos, pois é menos ferramentas para gerenciar.
HTTPS
Hoje temos várias opções de criação do nosso certificado para garantir a segurança do nosso domínio com HTTPS, dentre eles o mais utilizado e o que eu recomendo é o Let’s Encrypt, pois é gratuito e fácil de gerenciar.
O próprio GitHub Pages e o Netlify nos dão a opção de HTTPS utilizando o Let’s Encrypt.
Envio de formulários
Com um site no ar, muitas vezes vamos precisar de uma ferramenta para envio de formulários de contato ou algo relacionado.
O que eu recomendo é o FORMSPREE, pois é fácil de usar e nunca falhou comigo!
Basta colocar seu email no form que temos tudo configurado, como no exemplo abaixo:
<form action="https://formspree.io/contato@aprendiz.dev" method="POST">
<input type="text" name="name" />
<input type="email" name="_replyto" />
<input type="submit" value="Send" />
</form>
Comentários no blog
Neste caso também temos uma ferramenta que já superou as demais, o Disqus.
Além dele servir para adicionar comentários no blog, ele ainda auxilia a trazer tráfego para o seu conteúdo, assim como possui meios das pessoas darem um “like” nos seus artigos e é totalmente free!
Ainda podemos utilizar ele com vários domínios (até bater uma cota, claro).
Hospedagem do site
Assim como nas outras listas, temos alternativas gratuitas e outras pagas:
- GitHub Pages
- Amazon S3
- E temos Google Cloud e Azure também
Eu recomendo para sites cujo código fonte podem ficar públicos o uso do GitHub Pages, pois é gratuito, direto via GitHub e a ativação é somente uma configuração no repositório ou criar um repositório github.io.
Para opções maiores, as alternativas corporativas são as que mandam e o S3 é o mais utilizado de todos, além de ter um custo baixo também.
Conclusão
Isso é tudo o que precisamos de ferramental para criar nossos sites JAMstack!
Espero que você consiga escolher o melhor para o seu caso com as opções que lhe dei.
No meu caso estou utilizando: GitHub Pages, Google Domains e Netlify e estou bem contente com o resultado final.