O documento discute opções gratuitas para hospedagem de sites estáticos, incluindo Github Pages, Firebase, Cloudflare, Netlify e Vercel. Ele também explica o que são sites estáticos, como desenvolvê-los e como funciona o deploy.
3. Danilo Pinotti
- danilopinotti.com.br
- github.com/danilopinotti
Arquiteto de Software (PUC MINAS, 2022)
Tecnólogo em Sistemas para Internet (UTFPR, 2017)
Desenvolvedor Sênior na empresa Let’s Sistemas
(Atualmente)
Co-fundador e Desenvolvedor Web/IoT na Trigy
(Atualmente)
6. Tópicos
Sites estáticos
- O que é um site estático
- Desenvolvimento de um site estático
Deploy
- Histórico de deploys de sites
- Como funciona a hospedagem para sites estáticos
Opções de Hospedagem gratuita
- Github Pages
- Cloudflare
- Firebase
- Vercel
- Netlify
8. Um site estático é composto por páginas da web que são pré-renderizadas e
armazenadas como arquivos HTML, CSS e JavaScript.
Essas páginas não dependem de um servidor ou banco de dados para gerar
conteúdo dinamicamente em resposta a solicitações do usuário.
Em vez disso, o conteúdo permanece inalterado, a menos que seja
explicitamente atualizado.
Definição
9. Um site estático é aquele com conteúdo estável, onde cada usuário vê
exatamente o mesmo conteúdo em suas páginas.
Já um site dinâmico é aquele em que o conteúdo é carregado de forma dinâmica,
permitindo que ele mude de acordo com o usuário e suas informações.
Site Estático x Site Dinâmico
10. ● Carregamento rápido
● Baixo custo de hospedagem
● Segurança aprimorada
● Desenvolvimento rápido
Vantagens de um site estático
11. ● Blogs;
● Sites empresariais;
● Portfólios e currículos;
● Sites de eventos;
● Landing Pages;
● etc.
Casos de uso
12. ● Geradores de sites estáticos
● Implementação de código
Maneiras de desenvolver um site estático
17. Deploy ou Deployment
No que diz respeito a software e desenvolvimento web significa enviar mudanças
ou atualizações de um ambiente de implantação para outro, podendo ser o
principal (produção) ou algum intermediário.
- Desenvolvimento -> Homologação
- Homologação -> Produção
- etc
Deploy: O que é?
19. Quais ambientes o sistema precisa?
Desenvolvimento
Ambiente que está sempre atualizado com o código mais atualizado de
desenvolvimento. Normalmente instável.
Deploy: Definição dos ambientes
20. Quais ambientes o sistema precisa?
Homologação / Testes / Staging
Ambiente onde outros membros da equipe conseguem acesso para
poderem realizar testes e validações das funcionalidades desenvolvidas.
Este ambiente também pode ser utilizado para homologação de alguma
integração, logo, ocasionalmente, terceiros também têm acesso.
Último ambiente antes de ir para produção
Deploy: Definição dos ambientes
21. Produção
Ambiente de produção, onde, de fato, o sistema será utilizado pelos
usuários reais.
Maior esforço na configuração da infra-estrutura
- Disponibilidade;
- Escalabilidade Horizontal ou Vertical;
- Consistência;
- Segurança;
- Backup.
Deploy: Definição dos ambientes
23. Firebase
Conjunto de serviços de computação em nuvem de back-end e plataformas
de desenvolvimento de aplicativos fornecidos pelo Google
- Banco de dados em tempo real
- Autenticação
- Funções
- Cloud Messages (Push Messages)
- Hospedagem
Link: https://console.firebase.google.com/
24. Github Pages
Hospedagem do próprio Github a partir de um repositório
No plano gratuito, sites ficam associados ao seu nome de usuário:
- Exemplo: https://danilopinotti.github.io/
Link: https://pages.github.com/
25. Cloudflare
O Cloudflare é um pacote de serviços que parte de um CDN, oferecendo além
disso proteção e segurança para sites.
É um “Canivete suiço” de serviços voltados à ambientes cloud, como Proxy,
DNS, Roteamento, otimização, etc.
Além disso, a Cloudflare também fornece um serviço de hospedagem
gratuito para sites estáticos junto com uma integração direta com
repositórios no Github
Link: https://cloudflare.com
26. Netlify
É uma plataforma de computação em nuvem que oferece vários serviços.
Uma das propostas é que você consiga fazer o deploy de uma aplicação de
forma simples, rápida e segura.
Link: https://www.netlify.com/
27. Vercel
Empresa por trás do Next.JS
Integração direta com repositórios no Github
Oferece suporte a aplicativos estáticos e híbridos:
- Serverless
- Banco de dados headless
- Hospedagem de aplicações estáticas
- Hospedagem de sistemas híbridos
Link: https://vercel.com/