Curso Básico de Criação de Sites

Do Zero ao Site no Ar

MÓDULO 4

Conteúdo: – Publicar o site de graça

Seu site no ar para o mundo inteiro ver!.
 (da publicação gratuita até o domínio próprio profissional)

Opção 1 – GitHub Pages (recomendada para iniciantes) – Eu, particularmente, prefiro esta. De imediato, parece complicado, mas depois de usar algumas vezes se torna bem fácil. Não é igual a um Servidor Profissional (pago) mas vai servir muito bem para nosso propósito.

– Criar repositório

– Subir arquivos

– Ativar GitHub Pages

– Domínio personalizado grátis com Freenom(*) ou domínio pago

Opção 2 – Vercel (mais moderna e rápida)

Opção 3 – Netlify

(*) – Freenom – Registro de domínios gratuitos: Permite criar sites com extensões alternativas sem custo inicial.

──────────────────────── 

Vídeo 1: Como usar o Git e o Github

Vídeo 2 : Usando o GitHub + Criando a conta

“OLÁ, MEUS FUTUROS DONOS DE SITE NA INTERNET!!!. 

Hoje é o dia mais esperado do curso inteiro. 

Aquele site lindo que você fez nos módulos anteriores… 

hoje vai sair do seu computador e vai morar na internet de verdade, 

pra qualquer pessoa do Brasil ou do mundo poder abrir no celular e falar: 

“Nossa, que site lindo! Quem fez isso?”

E você vai poder responder, com o peito estufado: 

“Fui eu… com a ajuda do Luiz!”

Vamos fazer isso de 3 jeitos diferentes (do mais simples até o profissional):

1. Publicação 100 % gratuita (GitHub Pages ou Vercel) → em 10 minutos 
2. Domínio próprio + hospedagem baratinha (Napoleon Host)
3. Como funciona tudo por trás (DNS, propagação, SSL verdinho) → explicado como se eu estivesse tomando café na sua casa.

────────────────────────

PARTE 1 – Publicação gratuita  (GitHub Pages) (passos mostrados nos vídeos anteriores)

1. Abra o GitHub (aquele que criamos no Módulo 0) 
2. Clique no “+” no canto superior direito → New repository 
3. Nome do repositório: exatamente o seu nome de usuário + .github.io 

  Exemplo: se seu usuário é joao1958 → joao1958.github.io  

4. Marque “Public” → Create repository 
5. Agora arraste a pasta inteira do seu site (index.html, style.css, imagens…) pra dentro dessa página do GitHub . (esta é outra maneira de fazer)
6. Clique em “Commit changes” 
7. Espere 30 segundos… pronto!. 
8. Abra no navegador: https://joao1958.github.io 

   → Seu site está no ar para o planeta inteiro ver!

“Olha isso, gente… em menos de 10 minutos o seu site saiu do seu computador e foi morar na internet.  

Dá pra mandar o link pros filhos, pros netos, pra sogra… pro mundo!”

────────────────────────

PARTE 2 – Vercel (ainda mais rápido e moderno)

1. Abra vercel.com → Sign up com a conta do GitHub (1 clique) 
2. Clique em “New Project” → escolha o repositório que você acabou de criar 
3. Vercel já detecta que é um site estático → clica em “Deploy”
4. Em 20 segundos aparece o link lindo tipo: seu-projeto.vercel.app 
5. Copia o link e manda pra todo mundo!.

GitHub Pages = gratuito pra sempre, link meio “técnico” 

Vercel = gratuito pra sempre, link mais bonito e carrega mais rápido

────────────────────────

Vídeo – Como utilizar o Vercel + GitHub

PARTE 3 – Domínio próprio + hospedagem profissional (Napoleon Host)  – (o grande final que todo mundo quer)

“Agora vamos subir de nível de vez e deixar seu site com cara de empresa de verdade.”

1. Acesse: https://painel.napoleon.com.br/aff.php?aff=6173 
2. Escolha o plano “Napoleon Startup” (ou Pro)
3. Opção deletada
4. Preencha seus dados → paga no Pix ou cartão 
5. Em 2 minutos chega e-mail de boas-vindas 
6. Acesse o cPanel → “Instalador de WordPress” → 1 clique 
7. Ou, se quiser manter o site puro HTML/CSS: use o Gerenciador de Arquivos e sobe a pasta toda
8. SSL grátis automático (o cadeadinho verde aparece em 5 minutos)

Resultado final: 

https://www.seunome.com.br → site lindo, rápido, profissional e seu pra sempre.

────────────────────────

PARTE 4 – Explicação de avô: o que acontece quando alguém digita seu domínio?

Lembra disso?: (casa + lista telefônica + pizzaria)!

1. Pessoa digita www.mariartesanato.com.br 
2. O navegador pergunta pro DNS: “Onde fica essa casa?” 
3. O DNS olha na lista telefônica e responde: “Fica na Napoleon Host, IP 189.38.XX.XX”
4. O navegador vai até a Napoleon Host (servidor) 
5. A Napoleon entrega seus arquivos (index.html, style.css…) 
6. O navegador monta tudo e mostra o site lindo na tela da pessoa

Propagação (tempo corrido desde o momento que se indica o servidor da hospedagem) do DNS: “Pode demorar até 24 h, mas normalmente em 5–30 minutos já funciona.”
 Observação: – somente após a propagação do DNS o site poderá ser acessado normalmente.

────────────────────────

FECHAMENTO DO MÓDULO 4

Olha o que você já conseguiu até agora:

– Criou o site do zero 

– Deixou lindo com CSS 

– Publicou de graça em 10 minutos 

– E agora tem domínio próprio com cara de empresa séria!.

Próximo módulo (5, 6, 7 e 8) vamos deixar esse site voando:

– WordPress com Elementor (pra quem quiser ainda mais facilidade) 

– Backup, segurança, velocidade 

– Projeto final + certificado oficial

Tarefa de casa obrigatória (e deliciosa):

Manda no grupo o link do seu site no ar (seja seja GitHub, Vercel ou já com domínio próprio) com a frase: 

“Luiz, meu site tá no ar graças ao senhor!”

Quero ver esse grupo explodir de links hoje!

Beijo no coração de cada um… 

vocês já são donos de site na internet!!!.

Até a próxima aula, meus campeões!”

────────────────────────

QUESTIONÁRIO – MÓDULO 4  

Tente responder as questões. Anote o seu gabarito. Ao final, envie pelo nosso Whatsapp ou pelo Email de Contato. Envie também as dúvidas que surgiram e procurarei esclarecer. 

1. Qual é o nome exato que você tem que dar no repositório do GitHub para o GitHub Pages funcionar automaticamente?
2. a) qualquer nome 
3. b) meuprojeto.github.io 
4. c) seu-usuario.github.io
5. d) site-pronto

2. Depois que você sobe os arquivos no GitHub Pages, quanto tempo normalmente demora para o site aparecer na internet? 
3. a) 24 horas 
4. b) 5 a 30 minutos 
5. c) 1 semana 
6. d) tem que pagar pra ir mais rápido

3. No Vercel, como você publica o site mais rápido do mundo? 
4. a) Faz upload manual 
5. b) Conecta direto com o repositório do GitHub e clica “Deploy”
6. c) Instala um programa no computador 
7. d) Só funciona se pagar

4. cancelada

5. Quando você compra um plano na Napoleon Host pelo link do curso, o que já vem de graça no primeiro ano? 
6. a) Só hospedagem 
7. b) Domínio .com.br + SSL (cadeadinho verde)
8. c) Só o SSL 
9. d) Tem que comprar separado

6. Quando alguém digita seu domínio (ex: www.mariartesanato.com.br), quem é o “carteiro” que traduz o nome bonito para o número IP do servidor? 
7. a) O navegador 
8. b) O DNS 
9. c) O WordPress 
10. d) O Google

7. Depois de apontar o domínio para a hospedagem, quanto tempo pode levar para funcionar em todos os lugares do mundo?
8. a) Instantâneo 
9. b) Até 24 horas (propagação do DNS)
10. c) 1 semana 
11. d) Só funciona no Brasil

8. Qual dessas opções deixa o site com link mais “bonitinho” e moderno?
9. a) GitHub Pages 
10. b) Vercel
11. c) Napoleon Host 
12. d) As três são iguais

9. O que aparece no navegador quando o SSL está ativo? 
10. a) Um cadeadinho verde
11. b) Um ponto de exclamação vermelho 
12. c) Uma mensagem “site não seguro” 
13. d) Nada muda

10. (Pergunta aberta – a mais gostosa!)

    “Manda aqui o LINK do seu site que já está no ar (GitHub, Vercel ou já com domínio próprio) + uma frase dizendo como você está se sentindo agora que o mundo inteiro pode ver o seu trabalho. 

———————————————————

   FIM DO MÓDULO 4