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.

1. Site estático e Opções de
Hospedagem Gratuita
Por: Danilo Pinotti
Marcelo Vichar

2. Introdução

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)

4. Marcelo Vichar
- github.com/MarceloVichar
Graduando em Sistemas para Internet
(UTFPR, formação em Julho/2024)
Desenvolvedor na empresa Let’s Sistemas
(Agosto 2022 - Atualmente)

5. Estamos Contratando!

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

7. Sites
Estáticos

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

13. Geradores de sites estáticos

14. Implementação

15. My Blog
https://bit.ly/sw2-blog
https://github.com/MarceloVichar/nuxt3-content
Prática

16. Deploy

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 é?

18. - VPS (Virtual Private Server) + FTP (File Transfer Protocol)
- VPS + Git
- VPS + …
- Containers ou Pods (Docker / Kubernetes)
- Serverless
Deploy: Principais Métodos

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

22. Opções
gratuitas para
hospedagem

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/

28. Dúvidas?

29. Obrigado!
Danilo Pinotti
- danilopinotti.com.br
- github.com/danilopinotti
Marcelo Vichar
- github.com/MarceloVichar