Geradores de Site Estático

Os sites estáticos não contêm conteúdo dinâmico sendo compostos de arquivos estáticos, como HTML, CSS e JavaScript, que não requerem processamento no lado do servidor ou um banco de dados.

Como os arquivos são pré-criados, não é necessário nenhum processamento adicional quando um usuário visita o site e são necessários menos recursos para executá-lo. Sem scripts ou banco de dados para explorar, a segurança do site também aumenta.

Benefícios dos geradores de sites estáticos

Se você estiver familiarizado com HTML, CSS e JavaScript, poderá criar um site estático usando um editor de texto ou de código. No entanto, você precisa de conhecimento técnico para escrever o conteúdo, ele pode ser pesado e demorado e, à medida que seu site cresce, pode ficar mais difícil de gerenciar e manter.

Os geradores de sites estáticos (SSGs) oferecem uma opção mais eficiente para você criar seu site estático. Eles geralmente incluem várias ferramentas que facilitam a criação, o estilo, a publicação e a edição do conteúdo conforme necessário. Alguns dos principais benefícios de usar um gerador de site estático são:

• Criação de modelos: Um sistema de modelos permite que você defina a estrutura e o layout do seu site usando modelos e componentes reutilizáveis que podem ser usados em várias páginas. Isso significa que você não precisa duplicar ou atualizar elementos comuns em várias páginas manualmente. Isso também separa o seu conteúdo da camada de design e apresentação, para que você possa se concentrar em escrever e atualizar o conteúdo.
• Automação: Se o seu site inclui conteúdo de várias fontes, como arquivos Markdown ou arquivos de dados, um gerador de site estático pode automatizar o processo de conversão do conteúdo em arquivos HTML. Tarefas como minificação, otimização e agrupamento de ativos também podem ser automatizadas. Tudo isso economiza tempo e reduz as chances de erros, pois permite que você crie e otimize seu site sem executar manualmente cada tarefa.
• Controle de versão: Os geradores de sites estáticos integram-se a sistemas de controle de versão como o Git, para que você possa acompanhar as alterações, colaborar com outras pessoas e reverter facilmente para versões anteriores, se necessário.
• Builds Incrementais: Com builds incrementais, quando você faz alterações e gera uma nova saída, apenas os arquivos que mudaram desde o último build são regerados. Muitos geradores de sites estáticos suportam builds incrementais, melhorando o tempo de build para sites maiores e pequenas atualizações.

Uso de um gerador de site estático

Cada gerador de site estático (SSG) tem seus próprios recursos, configurações e sistemas de modelos, mas a configuração para gerar um site que será hospedado com a Hospedagem de Site Estático da Kinsta geralmente envolve o seguinte:

1. Escolha seu SSG: Há muitos SSGs disponíveis. Selecionar o que melhor atende às suas necessidades é o primeiro passo. Para construir e hospedar o site com a Hospedagem de Site Estático da Kinsta, escolha um que use Node.js para o processo de build. Abaixo, temos uma lista de SSGs prontos para você usar na Kinsta.
2. Configure um ambiente de desenvolvimento local: Instale as dependências necessárias, incluindo o próprio SSG, todas as linguagens de programação necessárias e um editor de código.
3. Crie seu novo site: Em seu SSG, crie o novo site. Isso gera a estrutura básica de diretórios e os arquivos de configuração necessários para o projeto.
4. Configuração: Defina a configuração do seu site para personalizar a estrutura do site e como o gerador processa os arquivos de origem. Esse arquivo pode conter definições como os diretórios de entrada e saída, caminhos de modelo, metadados, configurações de plugin, etc.
5. Criação de modelos: Crie modelos e layouts que definam elementos e estruturas comuns para suas páginas, como cabeçalhos, rodapés, menus de navegação etc.
6. Adicionar conteúdo e ativos: Crie ou reúna conteúdo existente usando Markdown, ou outros formatos compatíveis. Em geral, cada página corresponde a um arquivo no diretório de conteúdo. Os ativos provavelmente serão armazenados em um diretório separado dos arquivos de conteúdo.
7. Estilo: Modifique o CSS ou os arquivos do pré-processador (por exemplo, SASS ou LESS) para aplicar estilos personalizados ao seu site. Alguns SSGs também têm temas disponíveis que podem ser instalados e personalizados para a criação de estilos.
8. Crie e visualize localmente: Execute o comando build fornecido pelo SSG para criar o seu site. O SSG processa seus modelos, converte seus arquivos de conteúdo em HTML e gera os arquivos estáticos (HTML, CSS e JavaScript). Se aplicável, ele também executará tarefas como minificação, otimização e agrupamento de ativos. Use essa configuração para garantir que tudo tenha a aparência e funcione conforme o esperado.
9. Crie seu repositório Git: Use o Git para criar o repositório e, em seguida, faça o commit e envie o novo site para o novo repositório Git.
   1. Se você for implantar o site na Kinsta sem executar a build na Kinsta, os arquivos que você enviar para o seu repositório precisam ser a saída da build (os arquivos HTML, CSS e JavaScript).
   2. Se o site for construído na Kinsta, os arquivos que você envia para o seu repositório precisam ser o conteúdo, os ativos como imagens ou outras mídias e os arquivos SSG (ou arquivos de configuração que puxarão as dependências para a build).

10. Implante seu novo site estático: No MyKinsta, adicione um novo site estático e conecte ao seu repositório Git para implantar seu site nos 260+ locais do CDN da Kinsta.
11. Manutenção e atualização: À medida que você continua trabalhando em seu site, certifique-se de seguir as melhores práticas para controle de versão, fazer commits regulares das alterações e manter-se atualizado com as últimas versões do SSG e suas dependências. Isso garante um processo de desenvolvimento suave e permite que você aproveite novos recursos e correções de bugs.

Compatibilidade com o Gerador de Site Estático

A Hospedagem de Site Estático da Kinsta é para sites estáticos pré-construídos ou sites construídos com frameworks JavaScript modernas que usam Node.js para construir o site na Kinsta. Landing pages, sites de brochuras e até mesmo alguns blogs pequenos que não são atualizados com muita frequência e não exigem conteúdo dinâmico (como comentários) geralmente são uma boa opção.

Se o seu site atender a qualquer uma das condições a seguir, ele será mais adequado para nossa hospedagem de aplicativos:

• Ele usa uma linguagem diferente do Node.js para criar o site (por exemplo, PHP).
• Requer renderização de servidor para atender parte ou todo o site.
• Requer uma conexão de banco de dados.
• Fornece conteúdo dinâmico.
• Requer sessões ou autenticação gerenciadas no lado do servidor.

Se você não tiver certeza absoluta de qual hospedagem é a melhor para o seu site, recomendamos que implemente o site em ambas para experimentar cada opção e determinar a que melhor atende às suas necessidades.

Existem muitos geradores de sites estáticos disponíveis e o comando build e o diretório de publicação podem variar de um site para outro. A Kinsta detecta automaticamente vários frameworks e preenche os campos de Comando Build e Diretório de Publicação ao adicionar o seu site estático.

A tabela abaixo mostra o comando build e o diretório de publicação a serem usados para diversos geradores de sites estáticos populares compatíveis com a Hospedagem de Sites Estáticos.

* Gridsome ou VuePress 1.x

Isso requer Node 16, ou você pode adicionar o seguinte no package.json para o comando Build:

SET NODE_OPTIONS=--openssl-legacy-provider && vuepress build src

** Hugo

Adicione o seguinte ao seu projeto:

npm install hugo-bin serve --save-dev

Adicione ou substitua o seguinte, dependendo do seu projeto:

{
  "scripts": {
    "build": "hugo"
  }
}