aularepagil/index.html at main · m0tekferreira-code/aularepagil · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
<!DOCTYPE html>
<html lang="pt-BR">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Aula: Hospedagem, DNS e Cloudflare</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="markdown-body">
        <h1>Aula: Hospedagem, DNS e Cloudflare</h1>
        <p><strong>Programação com IA - 30 minutos</strong></p>

        <div class="alert alert-note">
            <div class="alert-title">🎯 Objetivos da Aula</div>
            <p>Ao final desta aula, você será capaz de:</p>
            <ul>
                <li>Hospedar uma aplicação web</li>
                <li>Configurar um domínio personalizado</li>
                <li>Utilizar o Cloudflare para melhorar performance e segurança</li>
            </ul>
        </div>

        <h2>📚 Parte 1: Hospedagem (10 min)</h2>

        <h3>O que é Hospedagem?</h3>
        <p>Hospedar significa colocar seu site/aplicação em um servidor conectado à internet 24/7 para que qualquer
            pessoa possa acessar.</p>

        <h3>Principais Opções de Hospedagem</h3>

        <h4>1. Vercel (Recomendado para iniciantes)</h4>
        <ul>
            <li>✅ Gratuito para projetos pessoais</li>
            <li>✅ Deploy automático via Git</li>
            <li>✅ Ideal para: React, Next.js, Vue, HTML/CSS/JS</li>
        </ul>
        <p><strong>Como hospedar:</strong></p>
        <pre><code># Instalar Vercel CLI
npm i -g vercel

# Na pasta do projeto
vercel login
vercel</code></pre>

        <h4>2. Netlify</h4>
        <ul>
            <li>✅ Gratuito</li>
            <li>✅ Drag-and-drop de pastas</li>
            <li>✅ Ideal para: Sites estáticos, SPAs</li>
        </ul>

        <h4>3. Railway / Render</h4>
        <ul>
            <li>✅ Suporta backend (Node.js, Python, etc)</li>
            <li>✅ Banco de dados incluído</li>
            <li>✅ Plano gratuito limitado</li>
        </ul>

        <h4>4. GitHub Pages</h4>
        <ul>
            <li>✅ Totalmente gratuito</li>
            <li>✅ Integrado com GitHub</li>
            <li>✅ Ideal para: Portfólios, documentação</li>
        </ul>

        <h3>🎬 Demo Prática</h3>
        <p>Vamos hospedar um projeto simples no Vercel:</p>
        <ol>
            <li>Criar conta no Vercel</li>
            <li>Conectar repositório GitHub</li>
            <li>Deploy automático</li>
            <li>Projeto no ar em 2 minutos!</li>
        </ol>

        <hr>

        <h2>📚 Parte 2: Domínios e DNS (10 min)</h2>

        <h3>O que é um Domínio?</h3>
        <p>É o endereço do seu site (ex: <code>meusite.com.br</code>).</p>

        <h3>Onde Comprar Domínios?</h3>
        <ul>
            <li><strong>Registro.br</strong> (<code>.com.br</code>) - R$ 40/ano</li>
            <li><strong>Namecheap</strong> - A partir de $8/ano</li>
            <li><strong>GoDaddy</strong> - Várias opções</li>
        </ul>

        <h3>O que é DNS?</h3>
        <p>DNS (Domain Name System) traduz nomes legíveis em endereços IP.<br>
            <code>meusite.com.br</code> → <code>192.168.1.1</code> (servidor)
        </p>

        <h3>Como Apontar um Domínio</h3>
        <p><strong>Registros DNS Principais:</strong></p>
        <table>
            <thead>
                <tr>
                    <th>Tipo</th>
                    <th>Função</th>
                    <th>Exemplo</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>A</td>
                    <td>Aponta para um IP</td>
                    <td><code>185.199.108.153</code></td>
                </tr>
                <tr>
                    <td>CNAME</td>
                    <td>Aponta para outro domínio</td>
                    <td><code>cname.vercel-dns.com</code></td>
                </tr>
                <tr>
                    <td>MX</td>
                    <td>Servidores de email</td>
                    <td><code>mail.google.com</code></td>
                </tr>
                <tr>
                    <td>TXT</td>
                    <td>Verificações e configs</td>
                    <td><code>verification=abc123</code></td>
                </tr>
            </tbody>
        </table>

        <h4>Configuração Típica (Vercel):</h4>
        <p><strong>No painel do provedor de domínio:</strong></p>
        <ol>
            <li>Adicionar registro A:
                <ul>
                    <li>Nome: <code>@</code></li>
                    <li>Valor: <code>76.76.21.21</code></li>
                </ul>
            </li>
            <li>Adicionar registro CNAME:
                <ul>
                    <li>Nome: <code>www</code></li>
                    <li>Valor: <code>cname.vercel-dns.com</code></li>
                </ul>
            </li>
        </ol>
        <p><strong>No Vercel:</strong></p>
        <ol>
            <li>Settings → Domains</li>
            <li>Adicionar domínio customizado</li>
            <li>Seguir instruções de verificação</li>
        </ol>

        <div class="alert alert-warning">
            <div class="alert-title">⏰ Importante</div>
            <p><strong>Propagação DNS:</strong> Pode levar de 5 minutos a 48 horas.</p>
        </div>

        <hr>

        <h2>🚀 Parte 3: Cloudflare (10 min)</h2>

        <h3>O que é Cloudflare?</h3>
        <p>É uma CDN (Content Delivery Network) que fica entre seus visitantes e seu servidor, oferecendo:</p>
        <ul>
            <li>🚀 Performance (cache global)</li>
            <li>🛡 Segurança (proteção DDoS)</li>
            <li>🔒 SSL/HTTPS gratuito</li>
            <li>📊 Analytics</li>
        </ul>

        <h3>Por que usar Cloudflare?</h3>
        <ul>
            <li><strong>Sem Cloudflare:</strong> Visitante → Servidor (pode estar longe, lento)</li>
            <li><strong>Com Cloudflare:</strong> Visitante → Servidor Cloudflare mais próximo → Seu servidor (cache,
                proteção, SSL)</li>
        </ul>

        <h3>Como Configurar Cloudflare</h3>
        <p><strong>Passo 1: Criar conta</strong><br>
            Acessar <a href="https://cloudflare.com">cloudflare.com</a>. Plano Free é suficiente.</p>

        <p><strong>Passo 2: Adicionar site</strong></p>
        <ol>
            <li>Clicar em "Add a Site"</li>
            <li>Digitar seu domínio</li>
            <li>Cloudflare vai escanear registros DNS existentes</li>
        </ol>

        <p><strong>Passo 3: Mudar Nameservers</strong><br>
            No seu provedor de domínio, trocar os nameservers para:</p>
        <ul>
            <li><code>alina.ns.cloudflare.com</code></li>
            <li><code>scott.ns.cloudflare.com</code></li>
        </ul>
        <p>(Os nomes variam, Cloudflare mostra os corretos)</p>

        <p><strong>Passo 4: Configurar no Cloudflare</strong></p>
        <ul>
            <li>SSL/TLS: Deixar em "Full" ou "Flexible"</li>
            <li>Always Use HTTPS: Ativar</li>
            <li>Auto Minify: Ativar (JS, CSS, HTML)</li>
            <li>Brotli: Ativar</li>
        </ul>

        <h3>Recursos Úteis do Cloudflare</h3>
        <ol>
            <li><strong>Page Rules (3 grátis):</strong>
                <ul>
                    <li>Criar regras personalizadas.</li>
                    <li>Ex: <code>meusite.com.br/admin/*</code> → Desabilitar cache → Security Level: High</li>
                </ul>
            </li>
            <li><strong>Firewall:</strong> Bloquear países, IPs, bot maliciosos.</li>
            <li><strong>Analytics:</strong> Ver tráfego, ameaças bloqueadas, performance.</li>
            <li><strong>Workers (opcional):</strong> Código serverless que roda na edge.</li>
        </ol>

        <hr>

        <h2>🎯 Fluxo Completo: Do Código ao Ar</h2>
        <pre><code>1. Desenvolver projeto localmente
    ↓
2. Subir código no GitHub
    ↓
3. Conectar GitHub com Vercel/Netlify
    ↓
4. Deploy automático → URL temporária
    ↓
5. Comprar domínio
    ↓
6. Configurar Cloudflare (opcional mas recomendado)
    ↓
7. Apontar domínio para hospedagem
    ↓
8. Site no ar com domínio próprio!</code></pre>

        <hr>

        <h2>💡 Dicas Importantes</h2>

        <div class="alert alert-tip">
            <div class="alert-title">✅ Boas Práticas</div>
            <ul>
                <li>Sempre use HTTPS (SSL)</li>
                <li>Configure redirects de www para domínio raiz (ou vice-versa)</li>
                <li>Teste o site em diferentes dispositivos após deploy</li>
                <li>Configure variáveis de ambiente corretamente</li>
                <li>Use <code>.gitignore</code> para não subir senhas/chaves</li>
            </ul>
        </div>

        <div class="alert alert-warning">
            <div class="alert-title">⚠ Erros Comuns</div>
            <ul>
                <li>Esquecer de fazer build antes do deploy</li>
                <li>Variáveis de ambiente não configuradas no servidor</li>
                <li>Caminho de arquivos incorreto (case-sensitive em Linux)</li>
                <li>Não aguardar propagação DNS</li>
                <li>Configurar SSL como "Strict" sem certificado no servidor</li>
            </ul>
        </div>

        <h2>🔧 Comandos Úteis</h2>

        <h3>Vercel CLI</h3>
        <pre><code>vercel login          # Login
vercel                # Deploy
vercel --prod         # Deploy em produção
vercel domains        # Gerenciar domínios
vercel env            # Gerenciar variáveis de ambiente</code></pre>

        <h3>Netlify CLI</h3>
        <pre><code>netlify login         # Login
netlify init          # Configurar projeto
netlify deploy        # Deploy preview
netlify deploy --prod # Deploy produção</code></pre>

        <hr>

        <h2>📖 Recursos Adicionais</h2>
        <h3>Documentação</h3>
        <ul>
            <li><a href="#">Vercel Docs</a></li>
            <li><a href="#">Netlify Docs</a></li>
            <li><a href="#">Cloudflare Learning Center</a></li>
        </ul>

        <h3>Ferramentas de Teste</h3>
        <ul>
            <li><strong>DNS Checker</strong> - Verificar propagação DNS</li>
            <li><strong>GTmetrix</strong> - Testar performance</li>
            <li><strong>SSL Labs</strong> - Testar configuração SSL</li>
        </ul>

        <hr>

        <h2>🎓 Exercício Prático</h2>
        <div class="alert alert-note">
            <div class="alert-title">Desafio para os estagiários:</div>
            <ol>
                <li>Criar um site simples (HTML/CSS/JS)</li>
                <li>Fazer deploy no Vercel ou Netlify</li>
                <li>Configurar domínio próprio (pode usar subdomínio grátis primeiro)</li>
                <li>(Bônus) Adicionar Cloudflare</li>
            </ol>
            <p><strong>Tempo estimado:</strong> 20-30 minutos</p>
        </div>

        <hr>

        <h2>📤 Entrega de Projeto</h2>
        <p>Preencha formulário abaixo para registrar a conclusão do seu desafio.</p>

        <div class="form-container">
            <form id="project-form">
                <div class="form-group">
                    <label for="name">Nome Completo</label>
                    <input type="text" id="name" name="name" class="form-control" placeholder="Seu nome" required>
                </div>

                <div class="form-group">
                    <label for="email">E-mail</label>
                    <input type="email" id="email" name="email" class="form-control" placeholder="seu@email.com"
                        required>
                </div>

                <div class="form-group">
                    <label for="url">URL do Projeto (Vercel/Netlify)</label>
                    <input type="url" id="url" name="url" class="form-control"
                        placeholder="https://seu-projeto.vercel.app" required>
                </div>

                <button type="submit" class="btn btn-primary">Enviar Projeto</button>
            </form>
            <div id="success-message" style="display: none;" class="alert alert-tip">
                <div class="alert-title">🎉 Projeto Recebido!</div>
                <p>Seu projeto foi registrado com sucesso. Parabéns!</p>
            </div>
        </div>

        <hr>

        <h2>❓ Perguntas Frequentes</h2>
        <p><strong>P: Preciso pagar por hospedagem para aprender?</strong><br>
            R: Não! Vercel, Netlify e GitHub Pages são gratuitos para projetos pessoais.</p>

        <p><strong>P: Quanto custa um domínio?</strong><br>
            R: .com.br = ~R$ 40/ano | .com = ~$10-15/ano</p>

        <p><strong>P: Cloudflare é obrigatório?</strong><br>
            R: Não, mas é altamente recomendado (e grátis!).</p>

        <p><strong>P: Posso hospedar backend (Node.js, Python)?</strong><br>
            R: Sim! Use Vercel (serverless functions), Railway, ou Render.</p>

        <p><strong>P: Como faço para atualizar o site?</strong><br>
            R: Faça commit no GitHub. O deploy é automático!</p>

        <hr>

        <h2>📝 Resumo de 3 Pontos</h2>
        <ol>
            <li><strong>Hospedagem:</strong> Vercel/Netlify para frontend são gratuitos e fáceis</li>
            <li><strong>Domínio:</strong> Compre onde preferir, aponte com registros A/CNAME</li>
            <li><strong>Cloudflare:</strong> Acelera, protege e adiciona SSL gratuito</li>
        </ol>

        <h2>🎤 Encerramento</h2>
        <p>Agora vocês têm todo conhecimento necessário para colocar projetos no ar!</p>
        <p><strong>Próximos passos:</strong></p>
        <ul>
            <li>Experimentem hospedar um projeto hoje mesmo</li>
            <li>Testem diferentes plataformas</li>
            <li>Compartilhem seus projetos no ar!</li>
        </ul>
        <p><em>Dúvidas? Vamos para a prática!</em></p>
    </div>
    <script src="script.js"></script>
</body>

</html>