Eu não posso acreditar como deve ser para um desenvolvedor apenas aprender sobre o JAMstack e web estática ecossistema.
Para tentar ajudá-los, decidimos sintetizar nosso conhecimento em uma peça abrangente.
Até o final deste post, você poderá encontrar o melhor gerador de site estático (SSG) para qualquer projeto específico.
Veja o que você aprenderá sobre SSGs:
- O que eles são (e porque você deve usá-los).
- Quais são os melhores geradores de site estático, hoje.
- Considerações a ter em mente antes de escolher o único .
1. Geradores de site estático, quais são eles?
Se você está aqui procurando pelo SSG certo, eu suponho que você tenha uma compreensão decente do que eles são. Ainda assim, um pouco de contexto não pode doer.
Sites estáticos não são novos. Eles foram o que usamos para construir o caminho da web antes que o CMS dinâmico (WordPress, Drupal, etc.) assumisse o controle.
O que há de novo, então?
As ferramentas modernas – principalmente geradores de locais estáticos – que surgiram nos últimos anos expandiram as capacidades dos locais estáticos.
Simplificando, um gerador de site estático retira o conteúdo do site, aplica-o a modelos e gera uma estrutura de arquivos HTML puramente estáticos prontos para serem entregues aos visitantes.
Esse processo traz sua parcela de benefícios quando comparado aos CMSs tradicionais.
Por que usá-los?
Ter que extrair informações dinamicamente de um banco de dados toda vez que um visitante acessa uma página em um site com conteúdo pesado pode resultar em atrasos que causam frustração e rejeições.
Os SSGs já fornecem arquivos compilados para o navegador, reduzindo os tempos de carregamento por uma grande margem.
→ Segurança e confiabilidade
Uma das maiores ameaças do desenvolvimento com um CMS dinâmico é a falta de segurança. Sua necessidade de infraestruturas maiores no lado do servidor abre caminho para possíveis violações.
Com configurações estáticas, há pouca ou nenhuma funcionalidade no lado do servidor.
→ Flexibilidade
CMSs tradicionais e complicados são constrangedores. A única maneira de escalar é com os plugins existentes e a personalização é limitada às plataformas temáticas disponíveis. Isso é legal se você é um usuário não técnico, mas os desenvolvedores rapidamente se encontram com as mãos atadas.
Os SSGs podem pedir mais habilidades técnicas, mas recompensarão os desenvolvedores com liberdade. A maioria deles também possui ecossistemas de plug-in, temas e fácil de conectar serviços de terceiros. Além disso, a capacidade de extensão usando sua linguagem de programação principal é ilimitada.
→ Suas fraquezas estão … desaparecendo.
Com um ecossistema cada vez maior em torno do desenvolvimento de sites estáticos, muitos de seus principais problemas estão encontrando respostas por meio de novas ferramentas.
O gerenciamento de conteúdo e as tarefas administrativas podem ser um desafio para os usuários finais que não têm experiência técnica. A boa notícia é que há um número impressionante de CMSs sem cabeça por aí prontos para concluir seu SSG. A diferença entre CMSs sem cabeça e tradicionais é que você usará o primeiro apenas para tarefas de “gerenciamento de conteúdo”, não para geração de conteúdo de templates e frontend. Aposto que você encontrará uma que atenda às suas necessidades.
Alguns CMSs de site estático suportam SSGs diretamente. Por exemplo, Forestry for Jekyll & Hugo ou DatoCMS para muitos deles.
Quanto aos recursos dinâmicos necessários para uma ótima experiência do usuário? Há um monte de serviços incríveis disponíveis:
- Sem servidor ou Webtask para funções de back-end,
- Netlify para implantação,
- Algólia para pesquisa,
- Snipcart para e-commerce,
- Disqus ou Staticman para conteúdo gerado pelo usuário.
Estes são apenas alguns exemplos do que está por aí .
2. Qual gerador de site estático você deve escolher?
Saber o que são geradores estáticos de sites e por que você deve usá-los é uma coisa, saber qual deles adotar é um outro esforço.
Existem mais de 400 deles circulando na web atualmente. Se você está apenas começando com o desenvolvimento da Web estática, o que segue ajudará seu processo de tomada de decisão!
Vou cobrir alguns dos melhores que existem, mas lembre-se que ainda é uma pequena parte de todos os SSGs existentes. Para uma lista completa, sugiro que você visite staticgen.com .
2.1 Melhores geradores de site estático em 2018
Nesta seção, apresento os que considero que você DEVE conhecer e que atenderão às necessidades da maioria dos projetos. Essas escolhas são baseadas na popularidade geral, mas também na experiência de nossa equipe criando dezenas de demos JAMstack .
Ainda é o SSG mais popular, com uma grande base de usuários e um grande diretório de plugins. É ótimo para blogs e também amplamente usado por sites de comércio eletrônico.
Um dos principais pontos de venda de Jekyll para os recém-chegados é sua ampla gama de importadores . Ele permite que um site existente seja migrado para o Jekyll com relativa facilidade. Se você tem um site WordPress, por exemplo, você pode mudar para Jekyll usando um deles.
O Jekyll permite que você se concentre no conteúdo sem se preocupar com bancos de dados, atualizações e moderação de comentários, preservando permalinks, categorias, páginas, postagens e layouts personalizados.
Ele é construído com Ruby e integrado às páginas do GitHub, então há um risco muito menor de ser hackeado. Theming é simples, o SEO é assado, e a comunidade Jekyll oferece muitos plugins para customização.
O Gatsby traz páginas estáticas para pilhas front-end, aproveitando JavaScript do lado do cliente, APIs reutilizáveis e marcação pré-configurada. É uma solução fácil de usar que cria um SPA (Single Page Application) com React.js, Webpack, JavaScript moderno, CSS e muito mais.
Gatsby.js é um gerador PWA (Progressive Web App) estático. Ele puxa apenas o HTML, CSS, dados e JavaScript críticos para que seu site possa ser carregado o mais rápido possível.
Seu rico ecossistema de plugins de dados permite que um site extraia dados de várias fontes, incluindo CMSs sem cabeçalho, serviços SaaS, APIs, bancos de dados, sistemas de arquivos e muito mais.
O Gatsby tem uma ampla gama de aplicativos e é uma opção sólida para sites que precisam utilizar dados de várias fontes. Está a caminho do topo, não se surpreenda se se tornar o SSG número um nos próximos meses.
Ah, e também pode consertar uma das maiores dores de desenvolvimento com SSGs: construções atômicas (longas). Criador Kyle Matthews criou recentemente uma empresa em cima de seu projeto de código aberto. A Gatsby Inc. criará uma infraestrutura de nuvem para sites do Gatsby que possam permitir construções incrementais – uma mudança de jogo para os SSGs.
Um SSG fácil de configurar e fácil de usar que não precisa de muita configuração antes de você colocar o site em funcionamento.
O Hugo é bem conhecido por sua velocidade de construção, enquanto seus recursos de conteúdo baseados em dados facilitam a geração de HTML com base em feeds JSON / CSV. Você também pode escrever seus próprios códigos de acesso e usar os modelos pré-construídos para configurar rapidamente SEO, comentários, análises e outras funções.
Além disso, a Hugo oferece suporte completo ao i18n para sites em vários idiomas, facilitando o alcance de um público internacional. Isso é particularmente útil para comerciantes de comércio eletrônico que desejam localizar seus sites.
Além disso, eles anunciaram recentemente um recurso de tema avançado que oferece uma maneira poderosa de construir sites Hugo com componentes reutilizáveis.
Embora não seja necessariamente um SSG em si, o Next.js é uma estrutura leve para aplicativos React estáticos e renderizados pelo servidor.
Ele cria aplicativos JavaScript universais, o que significa que o JS é executado no cliente e no servidor. Esse processo impulsionou o desempenho desses aplicativos na carga de primeira página e nas capacidades de SEO. O conjunto de recursos do Next.js inclui divisão automática de código, roteamento simples no lado do cliente, ambiente de desenvolvimento baseado em webpack e qualquer implementação do servidor Node.js.
O JavaScript está em toda parte hoje em dia, sendo o React o framework de front-end JS mais moderno até hoje, então definitivamente vale a pena dar uma olhada.
Similar em nome e propósito para Next.js, o Nuxt é uma estrutura para criar aplicativos Vue.js universais. Ele permite a renderização da UI enquanto abstrai a distribuição cliente / servidor. Ele também tem uma opção de implementação chamada nuxt generate para construir aplicativos Vue.js gerados estáticos.
Essa estrutura minimalista para ir sem servidor é direta e simples, mas é indiscutivelmente voltada para a implementação programática, em vez de um andaime DOM tradicional.
Como o Nuxt é um framework Vue, a familiaridade com o Vue é altamente recomendada, mas os desenvolvedores que já trabalharam com o Vue se sentirão em casa. Com a rápida ascensão do Vue.js no ecossistema JavaScript – e considerando o nosso amor coletivo por ele -, não é de admirar que ele termine nessa lista.
2.2 Principais considerações
Esta seção terá uma outra abordagem para ajudar você a descobrir seu SSG de alma gêmea. Você encontrará alguns novos aqui que eu não mencionei na última seção.
Aqui estão algumas perguntas que você deve fazer a si mesmo antes de escolher a ferramenta certa:
1. Você precisa de muitos recursos dinâmicos e extensões prontas para uso?
Existem duas escolas de pensamentos aqui.
- Escolha um gerador de site estático que ofereça um grande número de recursos prontos para uso. Você não vai precisar de muitos plugins ou construir tudo sozinho. Nesse caso, Hugo apresenta um enorme conjunto de funcionalidades internas com as quais você pode ir direto ao trabalho. Gatsby também se encaixa aqui.
- Escolha um SSG que tenha menos recursos, mas ofereça um amplo ecossistema de plug-ins que permita expandir e personalizar sua configuração conforme necessário. Isso provavelmente representa um dos maiores pontos fortes de Jekyll . O fato de ter sido tão popular por tanto tempo se traduziu em uma grande comunidade e uma grande variedade de plugins. Para empurrar essa noção ainda mais, Metalsmithou Spike deixam todas as manipulações para plugins, tornando-os altamente personalizáveis e capazes de construir qualquer coisa. O trade-off aqui é que isso exige um nível mais alto de proficiência técnica para lidar com casos de uso. Mas isso pode ser um forro promissor se você estiver tentando aprender o idioma em que seu SSG está sendo executado!
2. Quão importante é o seu tempo de construção e implantação?
Como já mencionei, os sites estáticos, em geral, são uma grande melhoria para a velocidade, mas alguns SSGs empurram ainda mais a barra.
O vencedor claro aqui é Hugo . É bem conhecido por seus tempos de construção rápidos. Ele pode montar um site simples a partir de marcações e modelos em milissegundos e passar por milhares de páginas em segundos.
Estruturas reativas como o Nuxt também são ótimas para apresentações e propósitos de SEO.
Esta é uma área onde o Jekyll realmente parece ruim – muitos desenvolvedores reclamam da sua velocidade de construção.
3. Qual é o tipo de projeto que você deseja tratar com um SSG?
Considere o objetivo final do seu projeto. Nem todos os geradores são criados para os mesmos resultados, e você economizará muita dor escolhendo um que seja especializado para o que você está tentando alcançar.
→ Blog ou pequenos sites pessoais :
Jekyll é o óbvio para mencionar aqui. Ele se apresenta como um SSG que reconhece o blog, abstraindo tudo o que poderia atrapalhar o que realmente importa em um blog: o conteúdo. O Hexo é outro que você deve considerar para construir uma plataforma de blog simples. No final das contas, a maioria dos SSGs fará o trabalho nessa área.
Também confira: Hugo, Pelican, Gatsby.
→ Documentação :
O GitBook torna fácil escrever e manter documentação de alta qualidade e é facilmente a ferramenta mais popular deste tipo.
Também confira: Docusaurus, MkDocs.
→ Comércio eletrônico :
Você também pode integrar facilmente uma loja na maioria dos geradores de sites estáticos (como visto nos tutoriais anteriores). E-Commerce pode ser complicado, já que muitos aspectos são considerados. Pense nos aspectos relacionados à experiência do usuário, como velocidade e personalização da interface do usuário. SEO também é algo que você não quer desconsiderar ao desenvolver um negócio on-line.
Para lojas maiores, onde você pode precisar de um CMS para gerenciamento de produtos, pergunte a si mesmo qual SSG será o melhor ajuste para o CMS sem cabeça de sua escolha.
Com isso em mente, a partir de nossas próprias experiências, sugerimos olhar para estruturas reativas como Gatsby & Nuxt . Mas isso não significa que você deva deixar de lado opções mais amigáveis, como Jekyll ou Hugo,se precisar manter tudo simples.
→ Site de marketing :
Um que eu ainda não mencionei ainda é Middleman . O que diferencia este do grupo é que ele visa fornecer a flexibilidade de criar qualquer tipo de site, em vez de ser fortemente voltado para um mecanismo de blog. É ótimo para sites de marketing avançados e empresas como a MailChimp e a Vox Media já a usaram por conta própria.
Confira também: Gatsby, Hugo, Jekyll.
4. Se você está disposto a modificar o site e / ou gerar você mesmo, você precisa que ele esteja em um idioma específico com o qual você é bem versado?
Se assim for, aqui é onde você deve olhar para os seguintes idiomas:
- JavaScript : Next.js & Gatsby (para React), Nuxt & VuePress (para Vue), Hexo, GitBook, Metalsmith, Harp, Spike.
- Python : Pelican, MkDocs, Cactus.
- Ruby : Jekyll, Middleman, Nanoc, Octopress.
- Vá : Hugo, InkPaper.
- .NET : Wyam, pretzel.
5. Os usuários não técnicos irão trabalhar neste site?
Depois que a parte de desenvolvimento é feita e o site é construído, quem vai executá-lo e editar seu conteúdo? Na maioria dos casos, isso fica nas mãos de usuários não técnicos que terão dificuldade em navegar por repositórios de código.
Aqui é onde você deve considerar emparelhar seu SSG com um CMS sem cabeçalho. Não apenas a escolha do CMS é importante, mas também é essencial encontrar o SSG correto para anexar no frontend.
A Gatsby levou esse pensamento adiante com um de seus recursos mais recentes, uma implementação do GraphQL . Não vou explicar o que é o GraphQL , mas, em resumo, ele permite consultas de dados mais rápidas e menos inchadas.
6. A comunidade e a ajuda dos colegas são importantes para você?
Nesse caso, considere um dos principais geradores de sites estáticos listados anteriormente. Estes são os mais populares no momento e são apoiados pelas comunidades mais ativas gerando plugins, estudos de caso e recursos de todos os tipos.
Lembre-se de que os sites estáticos modernos e o JAMstack ainda fazem parte de um ecossistema relativamente novo e, se você começar com ferramentas menos conhecidas, descobrirá rapidamente a falta de ajuda disponível.
Pensamentos finais
Não terminarei este post informando qual é o melhor gerador de sites estáticos e qual você deve escolher. Principalmente porque simplesmente não tenho a resposta, mas também porque agora você deve ter informações suficientes para fazer essa ligação sozinho.
Tudo que você precisa fazer agora é sair e explorar todas as possibilidades que pareçam atraentes para você. Uma coisa é certa, é que você deve se divertir fazendo isso, pois os SSGs finalmente dão liberdade e flexibilidade aos desenvolvedores.
Que gerador de site estático você recomendaria? O que vem a seguir para o ecossistema JAMstack? Eu realmente quero ouvir de você, então junte-se à discussão nos comentários abaixo!