Olá amigos, hoje vamos aprender como criar um site estático do zero e colocá-lo online. Mas antes de começar, eu preciso te explicar algumas coisas antes.

O que é um site estático?

Em resumo, um site estático é aquele site onde todas as páginas já estão montadas em arquivos HTML e a única função do servidor é entregar ao usuário esses arquivos. Para isso, sites estáticos, normalmente não possuem ferramentas de gerenciamento, toda e qualquer alteração é feita no próprio código.

Como benefícios, sites estáticos são mais rápidos e necessitam de uma infraestrutura mais simples do que sites com páginas dinâmicas. Por exemplo, não é preciso se ter um banco de dados para manter um site estático.

Esse tipo de site é indicado para pessoas e empresas que desejam disponibilizar um conteúdo na internet que pouco ou nada é alterado.

Para auxiliar no desenvolvimento de sites estáticos, podemos utilizar o que é chamado de gerador de sites estáticos (static site generator). Com uma rápida pesquisa no Google podemos encontrar vários (Hugo, Next.js, Gatsby, …), nesse post ensinaremos a criar seu site usando Jekyll e depois hospedá-lo no Netlify.

Esse site que você está lendo foi criado com um gerador de site estático chamado Jekyll, ou seja, o HTML dessa página foi criado no momento do deploy desse site e quando você faz uma requisição basta eu lhe entregar o arquivo já montado.

O que é um site dinâmico?

São sites onde as páginas são montadas no momento da requisição de acordo com os parametros enviados, chamadas de server side rendering. Por exemplo, a página de perfil em sistemas Web precisam aprensentar nome, foto, telefone, etc condizente com o perfil que foi solicitado, para isso o servidor monta aquele HTML no momento da requisição.

Sites que utilizam o Wordpress é um exemplo de sites com páginas dinâmicas.

Frameworks famosos atualmente criam sites dinâmicos, por exemplo, Ruby on Rails, NodeJS criam páginas dinâmicas.

Diferentemente de sites estático, o HTML da página vai ser montado no momento da requisição. Esse tipo de processo vai ser mais demorado, mas temos alguns ganhos, por exemplo, nessa requisição podemos saber o nome do usuário e adicionar esse nome na página, coisa que não pode acontecer em sites estáticos.

Como escolher

  • Use site estático para coisas que se alteram com frequência. Por exemplo, postagens de blog é uma excelente exemplo.

  • Use site dinamico para coisas que se alteram com frequência. Sistemas web são exemplos desse cenário, tem sempre algo mudando, nome de usuário, foto do usuário, …

Por hoje é só, até breve!