12 melhores geradores de sites estáticos que você deve usar

30 de abril de 2020 0 458

Existem várias razões pelas quais alguém usaria um gerador de site estático para seu site. Os sites estáticos são mais fáceis de manter (sem bancos de dados, sem scripts do servidor) e são mais seguros, considerando o fato de que os usuários recebem apenas arquivos HTML, CSS e Javascript. Enquanto você pode diretamenteescrever código em HTMLPara criar um site estático, o processo pode ser um pouco árduo, e é aí que os geradores de sites estáticos entram em cena. Os geradores estáticos de sites convertem (ou compilam) vários arquivos de recursos diferentes em um site, o que significa que o conteúdo pode ser mantido separado do código de layout e quaisquer ativos do site, como imagens, também podem ser separados. Portanto, se você está procurando um bom gerador de site estático para o seu site, aqui estão os 12 melhores geradores de site estático que você pode usar em 2020.

Melhores geradores de sites estáticos de 2020

Se você deseja criar um site completo que ofereça recursos como blogs, comércio eletrônico e muito mais, leia nosso artigo em Alternativas ao espaço de quadradosclicando no link. Por outro lado, nossa coleção demelhores sites de portfólioé o local ideal para futuros designers e artistas. Com isso fora do nosso caminho, vamos para a lista.

1. Jekyll

Jekyll>

Sem dúvida, o rei dos geradores de sites estáticos, Jekyll é sem surpresa o gerador de sites estáticos mais usado, pois oferece a maior documentação, a maior comunidade e o melhor suporte existente. Jekyll se orgulha de ter conhecimento de blog e, como resultado, criar um blog estático sobre Jekyll é realmente fácil, exigindo apenas o básico do desenvolvimento da web. Ele realmente brilha, por causa de seus recursos de configuração fácil para iniciantes, ao mesmo tempo em que possui recursos realmente poderosos para quem tem conhecimento para usá-los.

O Jekyll permite criar e usar plugins, tags diferentes e até criar seus próprios conversores para qualquer linguagem de marcação que você deseja usar com o Jekyll. A linguagem de marcação padrão para Jekyll, como a maioria das outras, é Markdown . O Jekyll possui plugins para compilar Less, Stylus, gerar nuvens de tags, páginas de usuários para blogs e muito mais.

O Jekyll é baseado no Liquid Template Engine da Shopify. Ele roda inteiramente no Ruby, por isso é facilmente instalável junto com as dependências usando o rvm ou o bundler. O Jekyll também possui opções fáceis de migração, se você deseja migrar do WordPress, Blogger ou qualquer outro site de blog. Ele supera todos os outros geradores de sites estáticos, por aí, em termos de tamanho do usuário e a melhor parte é que ele está em desenvolvimento ativo.

Para instalar o Jekyll, basta digitar este comando no Ruby: gem install jekyll

Visite Jekyll

2. Hexo

Hexo>

O Hexo é uma estrutura de blog estática leve que se orgulha de sua velocidade de geração rápida de sites. O Hexo é ótimo para blogueiros com grande quantidade de conteúdo que desejam um simples gerador de site estático. Oferece opções fáceis de migração de outras plataformas de blogs como WordPress, Joomla, Jekyll, Octopress e RSS.

Uma das grandes vantagens do Hexo é que você pode usar a maioria dos plug-ins feitos para o Octopress e, por extensão, plug-ins feitos para o Jekyll com modificações muito pequenas.

O Hexo suporta Markdown, YAML para assuntos de frente e configuração . Mantendo sua natureza rápida, o Hexo permite implantar em sites como GitHub, Heroku e Rsync com apenas um comando.

Para instalar o Hexo usando o Node.js, digite este comando : npm install hexo-cli -g

Visitar Hexo

3. Pelican

Pelicano>

Pelican é um gerador de site estático construído em Python . Possui postagem de conteúdo em vários idiomas, destaque de código (sintaxe) e fácil geração de feeds RSS e Atom. A Pelican tem uma ótima seleção de plug-ins, todos hospedados em umrepositório central do GitHub. Ele suporta três formatos de documento por padrão: Markdown, reStructuredText e Ascii Doc.

O Pelican é único, pois é construído em Python. Ele suporta o poderoso Jinja Template Engine, baseado em python, para permitir a criação fácil de belos temas e modelos para o Pelican. Em termos de suporte à migração, a Pelican oferece suporte para WordPress e Tumblr. Em vez dos arquivos YAML habituais para configuração, o Pelican usa um arquivo .py chamado pelicanconf.py para configuração e configurações.

Recentemente, o serviço recebeu uma atualização que introduziu uma série de aprimoramentos, correções e ajustes para melhorar o desempenho. A atualização mais recente inclui um comportamento aprimorado de cópia / link para arquivos estáticos grandes, nova sintaxe estática para vincular ao conteúdo estático, um novo status de rascunho para páginas e melhorias para o importador, entre outras coisas.

Você pode instalar o Pelican usando pip e digitando o seguinte comando : pip install pelican

Visitar Pelican

4. Gatsby

Gatsby>

O Gatsby é outra ótima opção para a qual, como o Hexo, é desenvolvido com o Node.js, tornando-o bastante conveniente para desenvolvedores experientes em JavaScript. O serviço utiliza o React, o que significa que tudo é constituído por componentes, permitindo que ele se beneficie da abordagem do React à renderização do DOM.

O serviço também utiliza o GraphQL no momento da criação para recuperar dados e conteúdo das fontes, fornecendo uma interface moderna e consistente que garante que cada página receba os dados exatos necessários ao ser criada. Também é importante notar que o Gatsby cria páginas como aplicativos progressivos de página única , o que significa que todo o site estático é baixado e pode ser navegado imediatamente.

O Gatsby pode ser facilmente captado por desenvolvedores que já trabalharam com o React antes, mas se você não trabalhou com o React antes da curva de aprendizado pode ser um pouco íngreme.

É possível instalar facilmente o Gatsby usando a ferramenta de linha de comando Gatsby e o seguinte comando: npm install –global gatsby-cli

Visitar Gatsby

5. Intermediário

Intermediário>

O Middleman é um gerador de site estático com tecnologia Ruby que segue uma abordagem fácil para criar sites estáticos. Possui recursos poderosos para manter blogs estáticos, como fácil geração de tags, comandos rápidos para listar artigos categorizados e paginação.

Middleman oferece suporte para a maioria das ferramentas modernas de desenvolvimento web, como HAML, Coffeescript, Sass e o restante. Seu mecanismo de modelo padrão é eRb, mas permite alternar para um mecanismo de modelo personalizado de sua escolha. Todos os mecanismos de modelos habilitados para inclinação (a lista completa pode ser encontrada aqui) trabalham no Middleman.

Ele suporta nativamente 2 formatos de configuração – YAML, JSON. O frontmatter do seu conteúdo também deve ser YAML ou JSON, dependendo do formato de configuração que você está usando. Além disso, o Middleman não oferece suporte à migração; portanto, se você deseja tornar estático um blog existente, o Middleman pode não ser a melhor ideia no momento.

Você pode instalar o Middleman usando Ruby usando este comando: gem install middleman

Visitar Middleman

6. Metalsmith

Metalsmith>

O Metalsmith também é uma boa opção se você estiver procurando por um gerador de site estático baseado em plugins. O serviço se orgulha de ser um gerador de site estático extremamente simples e conectável’, que permite aos usuários adicionar plug-ins para basicamente qualquer recurso necessário. O grande número de plugins oferecidos pela Metalsmith supera quase todos os concorrentes, o que lhe confere a versatilidade de ser mais do que apenas um simples gerador de site estático.

Em suas próprias palavras,  “Como tudo é um plugin, a biblioteca principal é na verdade apenas uma abstração para manipular um diretório de arquivos”. O que isso finalmente significa é que você pode usar o Metalsmith com a mesma facilidade que um andaime de projeto, um gerador de e-book, uma ferramenta de criação e muito mais.

O Metalsmith também é baseado no Node.js e pode ser instalado usando o gerenciador de pacotes do nó, usando este comando: $ npm install metallicmith

Visite Metalsmith

7. Hugo

Hugo>

Outro ótimo gerador de sites estáticos de uso geral, Hugo vem com vários recursos decentes, como modelos e suporte a parciais, paginação e ‘taxonomias’, que são basicamente um sistema exclusivo de categorização de conteúdo. Isso permitirá que você classifique as postagens facilmente com base não apenas em tags, mas também de qualquer outra maneira que desejar, como categorias ou séries, diretamente do frontmatter.

Hugo vem com suporte para três tipos de arquivos de dados – YAML, JSON e TOML – dando aos usuários a liberdade de escolher o que mais lhes agradar . Em vez de plugins, Hugo usa ‘códigos de acesso’ que permitem usar conteúdo rico dentro do seu arquivo Markdown.

Hugo está escrito na linguagem de programação Go e oferece arquivos de instalação separados para diferentes plataformas em sua página do GitHub. Você pode seguir estesinstruções de instalação instalar o Hugo no seu dispositivo.

Caso você use o Homebrew, é possível instalar o Hugo e todas as dependências com: brew install hugo

Visite Hugo

8. Octopress

Octopress>

O Octopress é essencialmente um garfo Jekyll modificado, mas devido à sua popularidade, o incluímos nesta lista. O serviço é basicamente o Jekyll para hackers (e desenvolvedores de rails) e pode ser usado para criar facilmente um blog, pois vem com vários plugins por padrão.

Para personalização, o código da Octopress facilita para os usuários modificar e escrever seu próprio código. O que é realmente ótimo é que vários plugins do Octopress são compatíveis com o Jekyll (e vice-versa), para que você possa experimentar os dois serviços sem se preocupar com problemas de compatibilidade.

O processo de instalação do Octopress pode ser um pouco complicado para iniciantes, no entanto, mas você pode fazer o mesmo seguindo estas etapas:

  • Clone o repositório GitHub
    • clone git
    • git: //github.com/imathis/octopress.get
    • polvo
    • cd octopress
  • Instalar dependências
    • empacotador de instalação gem
    • rbenv rehash ; # Se você usar rbenv, refaça a tarefa de executar o comando bundle
    • instalação do pacote
  • Instale o tema padrão do Octopress
    • instalação de rake

Visitar Octopress

9. Docpad

Docpad>

O Docpad é um gerador de site estático dinâmico que amplia os recursos dos geradores de site estático normal, oferecendo recursos como consulta de banco de dados por meio de um mecanismo de consulta exclusivo, importação de páginas de bancos de dados externos e nova renderização da página da Web em cada solicitação.

O Docpad possui suporte nativo para pré-processadores, como Coffeescript, Stylus e LESS , e usa plug-ins para dar suporte a mecanismos de modelos, pré-processadores e linguagens de marcação, para que você possa escolher as combinações desejadas usando o plug-in necessário. O Docpad também suporta a importação de páginas de fontes externas como Tumblr, GitHub e Dropbox através de plugins.

O Docpad é uma plataforma rica em recursos, com muitos plugins e ótima documentação, e é construída no Node.js para interações com o servidor.

Para instalar o Docpad, use o seguinte comando usando o npm: npm install -g npm; npm install -g[protegido por email] 

Visite o Docpad

10. Harpa

Harpa>

O Harp é outro ótimo gerador de site estático que vem com pré-processamento embutido para Jade, Markdown, LESS, Sass, Coffeescript, EjS e Stylus sem nenhuma configuração extra. O serviço permite usar layouts / paradigma parcial com Jade e EjS, que precisa de plugins especiais em outros geradores de sites estáticos.

O Harp também é construído no Node.js e pode trabalhar em conjunto com as plataformas Harp, que permitem criar páginas da web a partir da pasta Dropbox. O serviço também pode compilar páginas para uso nas páginas do GitHub, PhoneGap e Heroku.

Para instalar o Harp, use o npm e execute o seguinte comando:  sudo npm install -g harp

Visitar Harpa

11. NUXT

NUXT>

Baseado em uma arquitetura modular avançada, o Nuxt é um dos melhores geradores de sites estáticos. Embalado com mais de 50 módulos , está totalmente equipado para acelerar seu desenvolvimento. Outra característica notável deste gerador de site estático é que ele otimiza idealmente seu aplicativo para que ele possa ser executado sem problemas em várias plataformas. Com um analisador de pacotes , garante que você possa ajustar seu aplicativo, eliminando todas as falhas.

Mas o que dá ao Nuxt.js uma vantagem sobre muitos outros rivais é a capacidade de gerar um site estático conforme o aplicativo Vue . Como resultado, você não precisará de um servidor independente, mas poderá usufruir dos benefícios do SEO, pois o Nuxt não apenas pré-renderizará todas as páginas, mas também consistirá em HTML essencial. Além disso, também permitirá implantar a página resultante nas páginas Netlify ou GitHub com facilidade. Em termos de instalação, é bastante claro graças à ferramenta de andaimes . Mas, para isso, você precisará ter o npx (vem por padrão desde o NPM 5.2.0) instalado.

Para instalar o NUXT, verifique se você instalou o NPX e execute o seguinte comando: $ npx create-nuxt-app

Visitar NUXT JS

12. MkDocs

MkDocs>

Se suas necessidades justificarem um simples gerador de site estático, o MkDocs pode ser a resposta certa para suas necessidades. Com ferramentas fáceis de usar, torna a documentação do projeto livre de problemas . Como os arquivos de origem da documentação sãoescrito em Markdowne configurado com um único arquivo de configuração YAML, você pode gerenciá-los com facilidade. Por tudo simples, o MkDocs está à altura da tarefa em termos de eficiência. Você pode usá-lo para criar sites HTML completamente estáticos que podem ser hospedados no Amazon S3, GitHub e em outras plataformas.

Um dos meus recursos favoritos do MkDocs é uma sólida coleção de temas. Dependendo das suas necessidades, você pode escolher entre os temas internos e os de terceiros, que podem dar a aparência desejada à sua documentação. Com o prático servidor embutido em mãos, você pode visualizar facilmente sua documentação. Quanto à instalação, é bastante simples. Mas verifique se você tem o Python e o gerenciador do Python Pip instalado no seu sistema.

Instale o pacote mkdocs usando pip: pip install mkdocs

Visite MKDocs

Experimente estes geradores de sites estáticos imediatamente

Bem, isso completa nossa lista dos 12 melhores geradores de sites estáticos que você deve experimentar. A lista consiste em uma variedade de opções diferentes, cada uma delas oferecendo um conjunto exclusivo de recursos para diversos casos de uso. Dependendo do projeto em questão, você pode escolher qualquer um dos geradores de sites estáticos mencionados acima e criar sua página estática da Web rapidamente. Tem alguma sugestão? Informe-nos nos comentários abaixo e atualizaremos a lista de acordo.

Dev