Quando a “World Wide Web” foi revelada ao público pela primeira vez em 1991, todos os sites eram coleções de documentos HTML estáticos, cada arquivo contendo a marcação necessária para renderizar uma página inteira em um navegador da web. Quase imediatamente, os desenvolvedores pioneiros da web começaram a trabalhar em maneiras de gerar sites dinamicamente, montados por código executado em servidores web e extraindo conteúdo de sistemas do banco de dados.

Embora os sites estáticos não tenham desaparecido completamente enquanto os CMSs passaram a dominar, uma abordagem moderna ao conceito de site estático agora é popular entre aqueles que valorizam velocidade e segurança.

Na plataforma de Hospedagem de Site Estático da Kinsta, os sites são de fato rápidos e seguros. E também são gratuitos.

Vamos dar uma olhada mais de perto nos sites estáticos e como a Kinsta pode ajudá-lo a implantar o seu em servidores Edge ao redor do mundo.

Um site estático é ideal para o seu projeto web?

Um site estático serve arquivos HTML, CSS, JavaScript e de mídia pré-criados.

“A vantagem de ter conteúdo estático é que ele é rápido e eficiente”, diz Michael Fuller, desenvolvedor JavaScript na Kinsta e membro da equipe que ajudou a lançar a plataforma de Hospedagem de Site Estático da Kinsta. “Em vez de um servidor ter que construir a página consultando o banco de dados, ele apenas envia para os usuários seus arquivos pré-fabricados.”

“Em vez de criar arquivos estáticos totalmente à mão, existem vários geradores de sites estáticos“, diz ele. “São kits que facilitam o processo de build e atualização de um site estático, transformando os arquivos que você fornece em um site funcional.”

Quais tipos de projetos podem ser transformados em sites estáticos?

“Se você não tiver páginas que exijam que alguém faça login, nenhum banco de dados ou qualquer outra coisa que exija conteúdo dinâmico, provavelmente é um bom candidato para ser um site estático”, diz Fuller. “Isso pode incluir coisas como portfólios, páginas de marketing ou até mesmo um blog, se você estiver satisfeito em escrever novos artigos usando um gerador de site estático.”

E quando um site não tem um servidor ou banco de dados para se conectar, ele oferece menos caminhos para violações de segurança.

“Para casos mais avançados, você pode ter uma abordagem mista”, diz Fuller. “Você pode criar um site estático que usa um framework JavaScript para se comunicar com um servidor gerenciado separadamente. Dessa forma, você obtém os benefícios de velocidade nos tempos de carregamento inicial, combinados com a flexibilidade de um site dinâmico.”

Uma visão geral da hospedagem de sites estáticos na Kinsta

Aqui está o que você obtém gratuitamente na plataforma de hospedagem de site estático da Kinsta:

  • 100 sites estáticos por empresa
  • 1 build simultânea por site
  • 1 GB de tamanho de imagem de build por site
  • 600 minutos de build por mês por empresa
  • 100 GB de largura de banda por mês por empresa

E, assim como nas plataformas de hospedagem de aplicativos e hospedagem gerenciada de WordPress da Kinsta, há certificados SSL gratuitos, suporte para nomes de domínio personalizados e uma API opcional para gerenciamento de sites.

A Kinsta constrói e envia o conteúdo do site estático para os 260+ centros de dados na rede global Cloudflare – a mesma plataforma que dá suporte ao CDN da Kinsta e ao Edge Caching para sites WordPress.

Implantando um site estático na Kinsta

A primeira etapa na implantação de um site estático na Kinsta é conectar seu provedor Git preferido à sua conta no MyKinsta.

“Atualmente, oferecemos suporte a três dos principais provedores de Git: BitBucket, GitHub e GitLab“, diz Fuller. “Isso significa que, além dos benefícios de servirmos seu site, você pode usar o rastreamento de versão e as ferramentas deles.”

Escolhendo um provedor Git no MyKinsta.
Escolhendo um provedor Git no MyKinsta.

Depois de autorizar o acesso do MyKinsta ao seu provedor Git, você pode começar a adicionar seu primeiro site estático selecionando seu repositório e branch:

Adicionando um site estático no MyKinsta.
Adicionando um site estático no MyKinsta.

Acima, selecionamos Implantação automática no commit, o que significa que a Kinsta reimplantará o site quando as alterações forem enviadas para a branch no provedor Git.

Em seguida, o MyKinsta tentará determinar as configurações de build necessárias para o seu projeto:

Configurações de build detectadas para um projeto que usa Nuxt.js para gerar um site estático.
Configurações de build detectadas para um projeto que usa Nuxt.js para gerar um site estático.

“Se conseguirmos detectar o gerador e o gerenciador de pacotes que você está usando, preencheremos esses campos com as convenções padrão usadas para eles”, diz Fuller. “Por exemplo, o comando para builds com Node.js geralmente é yarn build ou npm run build, e o diretório de publicação geralmente é algo como build, dist, public ou out.”

“Você também pode especificar suas próprias variáveis de ambiente se o processo de build fizer uso delas.”

“Na versão inicial da Hospedagem de Site Estático, oferecemos suporte apenas ao Node.js para a criação de sites”, diz Fuller, “mas estamos trabalhando para trazer mais plataformas no futuro.”

No entanto, você ainda pode implantar muitos sites estáticos que não dependem de ferramentas Node.js para construção. Como exemplos, descrevemos como implantar um site Jekyll e um site Hugo — nenhum dos quais tem builds alimentados por Node.js. Em ambos os casos, os ativos do site são construídos fora da plataforma Kinsta e adicionados a uma pasta ou branch em um repositório Git para implantação como um site estático.

Você também pode implantar ativos estáticos que não têm nenhuma etapa de build, por exemplo, sites HTML simples.

“Se você não está usando um gerador, nenhum comando de build precisa ser especificado e assumimos que seu repositório contém arquivos pré-fabricados”, diz Fuller.

Quando uma implantação é acionada, ela é adicionada à fila de criação do site.

“Quando a implantação começa, criamos uma instância de build no Google Cloud Platform e puxamos o código do seu repositório”, diz Fuller. “Se um comando de build foi especificado, usamos uma imagem baseada na plataforma especificada — Node.js por enquanto — para executar esse comando. Depois disso, verificamos o tamanho do arquivo de tudo no diretório de publicação para confirmar que está dentro dos nossos limites.”

“A etapa final é o upload, em que enviamos seus arquivos para um bucket R2 do Cloudflare.”

Detalhes da nova implantação do site estático.
Detalhes da nova implantação do site estático.

Otimizando a velocidade com implementações incrementais

O processo de implantação da Hospedagem de Sites Estáticos otimiza os tempos de build fazendo o upload para os servidores da Cloudflare apenas dos arquivos que realmente foram alterados.

“Mantemos os arquivos previamente enviados ao longo de múltiplas implantações, então, se você optar por implantar novamente uma versão anterior, o número de arquivos que precisam ser reenviados é quase nulo”, diz Fuller. “Para fazer isso, renomeamos os arquivos para o valor hash do seu conteúdo e mantemos um registro dos caminhos originais. Armazenamos isso em um arquivo de mapa para essa implantação, com o caminho como chave e o novo nome como valor.”

“Quando uma solicitação é enviada para o site, usamos o mapa da implantação atual para direcionar para a versão correta do arquivo.”

A infraestrutura por trás da hospedagem de site estático da Kinsta.
A infraestrutura por trás da hospedagem de site estático da Kinsta.

Resumo

A plataforma de Hospedagem de Site Estático da Kinsta oferece entrega de conteúdo extremamente rápida em uma rede de servidores de borda de primeira classe, respaldada pelo painel MyKinsta que torna a implantação um processo fácil.

E tudo isso é gratuito.

Você pode começar a trabalhar rapidamente com a Hospedagem de Site Estático na Kinsta conferindo nossa biblioteca de exemplos de início rápido que abrange vários geradores de sites estáticos. Os exemplos incluem repositórios Git que você pode copiar para iniciar seus próprios projetos.

Steve Bonisteel Kinsta

Steve Bonisteel is a Technical Editor at Kinsta who began his writing career as a print journalist, chasing ambulances and fire trucks. He has been covering Internet-related technology since the late 1990s.