MODULO 1.4

🚀 Projeto: Sua Primeira Pagina

Chegou a hora de juntar tudo: terminal, Git e GitHub. Neste projeto final da trilha voce vai criar uma landing page do zero, versionar com Git, publicar no GitHub Pages e ver o seu site no ar com uma URL publica de verdade. Do nada ate um endereco que voce pode mandar para qualquer pessoa.

6
Topicos
45
Minutos
Basico
Nivel
Pratico
Tipo
DO CODIGO ATE O AR 1. CODIGO <html> <h1>Ola</h1> </html> 2. COMMIT git commit 3. PUSH git push 4. PAGES ⚙ build & deploy 5. NO AR 🌐 voce.github.io
1

Criar o Repositorio

Todo projeto comeca com um repositorio: uma pasta versionada pelo Git e guardada no GitHub. Voce pode criar de duas formas: pelo site do GitHub (clicando) ou pelo terminal (digitando). As duas chegam no mesmo lugar. Vamos ver as duas.

🧠 Analogia: O repositorio e uma gaveta com etiqueta

Imagine uma gaveta com o nome do seu projeto na frente. Tudo que pertence ao site entra nela: os arquivos, o historico das versoes, as etiquetas. O GitHub e o movel cheio dessas gavetas, na nuvem. Criar o repositorio e so abrir uma gaveta nova e colar a etiqueta com o nome.

👁 Caminho A: pelo site do GitHub

  • •Entre em github.com logado e clique no botao verde New (ou no + no topo direito > New repository).
  • •Em Repository name, escreva minha-landing (sem espacos, sem acentos).
  • •Deixe como Public (precisa ser publico para o Pages funcionar no plano gratuito).
  • •Marque Add a README file e clique em Create repository.

Caminho B: pelo terminal

Se voce tem o gh (GitHub CLI) instalado, da pra criar tudo de uma vez. Senao, da pra fazer com Git puro e depois conectar.

# Opcao 1: com o GitHub CLI (cria local + remoto de uma vez)

$ gh repo create minha-landing --public --clone

Created repository seu-usuario/minha-landing on GitHub

# Opcao 2: Git puro, criar pasta e iniciar o repositorio

$ mkdir minha-landing

$ cd minha-landing

$ git init

Initialized empty Git repository in .../minha-landing/.git/

# depois de criar o repo vazio no site, conecte o remoto

$ git remote add origin https://github.com/seu-usuario/minha-landing.git

Estrutura de pastas do projeto

Para uma landing page simples, voce so precisa de tres coisas: a pagina, o estilo e uma pasta para imagens. Limpo e direto.

minha-landing/

├── index.html

├── style.css

├── README.md

└── img/

└── foto.jpg

⚠️ Erro Comum

Problema: criou o repositorio como Private e o GitHub Pages nao publica.
Solucao: no plano gratuito, o Pages so funciona em repositorio publico. Va em Settings > General > Danger Zone > Change visibility e troque para Public. Ou crie um repositorio novo ja como Public.

2

HTML Basico: o Minimo Para Funcionar

HTML e a estrutura da pagina: titulos, paragrafos, imagens, links. Cada pedaco fica dentro de uma tag, que abre com <tag> e fecha com </tag>. Voce nao precisa decorar tudo. Com meia duzia de tags ja monta uma pagina que funciona.

🧠 Analogia: tags sao caixas que se encaixam

Pense em caixas dentro de caixas. A caixa <html> guarda a pagina inteira. Dentro dela tem a caixa <head> (informacoes que o navegador le) e a caixa <body> (o que aparece na tela). Cada caixa que voce abre, voce precisa fechar.

Uma index.html completa e simples

<!DOCTYPE html>

<html lang="pt-BR">

<head>

<meta charset="UTF-8">

<title>Meu Site</title>

</head>

<body>

<h1>Ola, eu sou o Joao</h1>

<p>Bem-vindo a minha primeira pagina.</p>

<img src="img/foto.jpg" alt="Minha foto">

<a href="https://automationsai.net">Meu link</a>

</body>

</html>

Para que serve cada tag

  • •<!DOCTYPE html> avisa que e uma pagina HTML moderna.
  • •<head> guarda titulo e configuracoes (nao aparece na tela).
  • •<title> e o nome que aparece na aba do navegador.
  • •<body> e tudo que aparece na tela.
  • •<h1> e o titulo grande; <p> e um paragrafo de texto.
  • •<img> mostra imagem; <a> cria um link clicavel.

💡 Dica: teste abrindo o arquivo

Antes de publicar, abra o index.html direto no navegador (clique duas vezes no arquivo ou rode open index.html no Mac, xdg-open index.html no Linux). Se aparece certo no seu computador, vai aparecer certo no ar.

⚠️ Erro Comum

Problema: a imagem nao aparece, so um quadrado quebrado.
Solucao: o caminho em src precisa bater com o lugar real do arquivo. Se a foto esta em img/foto.jpg, escreva exatamente isso. Maiusculas importam: Foto.JPG e diferente de foto.jpg no servidor.

3

CSS Basico: Deixar Apresentavel

Se o HTML e a estrutura, o CSS e a aparencia: cores, fontes, espacamento, alinhamento. Voce escreve o estilo num arquivo style.css e o conecta ao HTML com uma linha. Pronto: a mesma pagina sai do "documento sem graca" para uma landing apresentavel.

🧠 Analogia: CSS e a roupa da pagina

O HTML e o corpo: cabeca, tronco, bracos. O CSS e a roupa que voce veste nesse corpo: a cor, o tamanho, o caimento. O mesmo HTML pode usar mil estilos diferentes, do mesmo jeito que voce troca de roupa sem trocar de corpo.

Passo 1: conectar o style.css ao HTML

Dentro do <head> da sua index.html, adicione esta linha:

<link rel="stylesheet" href="style.css">

Passo 2: um style.css de exemplo

/* cor de fundo e fonte da pagina inteira */

body {

background-color: #0f172a;

color: #e2e8f0;

font-family: Arial, sans-serif;

text-align: center;

max-width: 600px;

margin: 40px auto;

}

/* titulo grande verde */

h1 { color: #10b981; }

/* foto redonda */

img { border-radius: 50%; width: 160px; }

👁 Como ler um seletor

Cada bloco de CSS tem tres partes:

  • •Seletor (h1): em quem aplicar.
  • •Propriedade (color): o que mudar.
  • •Valor (#10b981): o novo valor. Termina com ;.

A truque margin: 40px auto com max-width e o jeito classico de centralizar o conteudo na tela.

✓ O que FAZER

  • ✓Manter o CSS num arquivo separado (style.css)
  • ✓Usar poucas cores e uma fonte so
  • ✓Fechar cada bloco com }

✗ O que NAO fazer

  • ✗Esquecer o ; no fim de cada linha
  • ✗Errar o nome do arquivo no href
  • ✗Encher a pagina de cores berrantes
4

Publicar no GitHub Pages

Esta e a parte magica: o GitHub Pages pega os arquivos do seu repositorio e os serve como um site de verdade, de graca, com uma URL publica. Sao tres movimentos: enviar os arquivos (commit + push), ligar o Pages, e ver no ar.

1

Commit e push dos arquivos

Mande o codigo da sua maquina para o GitHub.

$ git add .

$ git commit -m "primeira versao da landing"

[main 1a2b3c4] primeira versao da landing

$ git push -u origin main

To github.com:seu-usuario/minha-landing.git

2

Ativar o Pages

No repositorio, va em Settings > Pages.

  • •Em Source, escolha Deploy from a branch.
  • •Em Branch, selecione main e a pasta / (root).
  • •Clique em Save.
3

Esperar e ver no ar

Em 1 a 2 minutos o GitHub publica e mostra a URL.

# a URL final fica neste formato:

https://seu-usuario.github.io/minha-landing/

👁 O que voce vai ver na tela

Depois de salvar, a propria pagina de Pages mostra uma caixa verde:

✓ Your site is live at

https://seu-usuario.github.io/minha-landing/

# Visit site

Clique em Visit site e veja a sua landing no ar. Esse endereco e publico: voce pode mandar para qualquer pessoa.

⚠️ Erro Comum

Problema: abriu a URL e apareceu uma pagina 404.
Solucao: normalmente e porque o arquivo nao se chama index.html (o Pages procura por esse nome), ou voce ainda esta nos primeiros segundos da publicacao. Confirme o nome do arquivo, espere 1-2 minutos e atualize a pagina com Ctrl+F5.

5

Dominio Personalizado

OPCIONAL

A URL seu-usuario.github.io ja funciona perfeitamente. Mas se voce quiser um endereco proprio, tipo meunome.com.br, da pra conectar um dominio personalizado. Isso e opcional e custa o preco do dominio (poucos reais por ano). Pule este topico se ainda nao quiser gastar.

🧠 Analogia: dominio e o endereco bonito

O GitHub te da um endereco que funciona mas e comprido. Um dominio e como trocar "Rua 3, Quadra 12, Lote 4" por "Casa do Joao". O lugar e o mesmo, so o nome ficou facil de lembrar e de passar para os outros.

1

Comprar o dominio

Em um registrador (Registro.br para .com.br, ou Namecheap, Cloudflare, Google Domains para outros). Escolha o nome e pague a anuidade.

2

Apontar o DNS para o GitHub

No painel do registrador, crie um registro CNAME apontando o seu dominio para o endereco do GitHub.

# Tipo Nome Valor

CNAME www seu-usuario.github.io

3

Registrar o dominio no GitHub

Em Settings > Pages > Custom domain, digite o seu dominio (ex: www.meunome.com.br) e clique em Save. Marque Enforce HTTPS quando ficar disponivel.

4

Esperar o DNS propagar

A mudanca de DNS leva de alguns minutos ate 24 horas para valer no mundo todo. Tenha paciencia: nao e erro, e so o tempo de propagacao.

💡 Dica: comece sem dominio

Nao precisa comprar dominio para concluir este projeto. A URL github.io ja conta como "site no ar". O dominio proprio e um upgrade que voce faz quando quiser deixar o endereco mais profissional.

6

Exercicio Final: Sua Landing no Ar

Agora voce faz tudo junto, do zero ate a URL publica. Siga o checklist na ordem. Ao terminar, voce vai ter um site de verdade na internet, feito por voce, com endereco proprio para compartilhar.

🎯 O que voce vai construir

Uma landing page pessoal: titulo com o seu nome, um paragrafo de apresentacao, uma foto e um link. Versionada com Git e publicada no GitHub Pages.

Passo 1: criar a pasta e os arquivos

$ mkdir minha-landing

$ cd minha-landing

$ touch index.html style.css

$ mkdir img

Passo 2: escrever o HTML e o CSS

Abra no editor e cole o conteudo dos topicos 2 e 3.

$ code .

# escreva o index.html e o style.css, salve

Passo 3: iniciar o Git e o primeiro commit

$ git init

$ git add .

$ git commit -m "minha landing pessoal"

[main (root-commit) 1a2b3c4] minha landing pessoal

Passo 4: conectar ao GitHub e enviar

# crie o repo no site (Public) e copie a URL, depois:

$ git remote add origin https://github.com/seu-usuario/minha-landing.git

$ git push -u origin main

Passo 5: ativar o GitHub Pages

  • •Settings > Pages > Source: Deploy from a branch.
  • •Branch main, pasta / (root), Save.

Passo 6: abrir a URL publica

# espere 1-2 min e abra:

https://seu-usuario.github.io/minha-landing/

Se a sua landing aparece nesse endereco, esta no ar. Missao cumprida.

✓ Confira que voce tem

  • ✓Repositorio publico no GitHub
  • ✓index.html e style.css commitados
  • ✓Pages ativado na branch main
  • ✓URL publica abrindo a sua pagina

✗ Se nao funcionar, confira

  • ✗Repo esta Private (precisa ser Public)
  • ✗Arquivo nao se chama index.html
  • ✗Esqueceu o git push
  • ✗Nao esperou a publicacao terminar

🏆 Parabens, voce fechou a Trilha 1!

Voce saiu do zero e colocou um site no ar usando terminal, Git, GitHub e GitHub Pages. Esse e exatamente o caminho que profissionais usam todos os dias. Na Trilha 2, voce vai subir de nivel com deploy moderno: Vercel, banco de dados na nuvem, APIs e variaveis de ambiente.

📚 Resumo do Modulo

✓
Criar o repositorio - pelo site (New) ou pelo terminal (gh repo create / git init)
✓
HTML basico - doctype, head, title, body, h1, p, img, a
✓
CSS basico - link do style.css, seletores, cores, centralizar
✓
Publicar no GitHub Pages - commit, push, ativar Pages, ver no ar
✓
Dominio personalizado (opcional) - comprar, CNAME, Custom domain, esperar DNS

Proxima Trilha:

Trilha 2 - Deploy Moderno (Vercel, Supabase, APIs e variaveis de ambiente). Voce fecha a Trilha 1 com um site no ar e parte para deploy de aplicacoes de verdade.

← Voltar para Trilha Proxima Trilha →