Publicando seu Site Gratuitamente no GitHub Pages em 2 Minutos

Publicando seu Site Gratuitamente no GitHub Pages em 2 Minutos — aula do módulo Deploy Gratuito na Nuvem, na trilha Seus Primeiros Projetos Práticos com IA da…

Leitura de aproximadamente 4 minutos.

Módulo: Deploy Gratuito na Nuvem · Curso: Seus Primeiros Projetos Práticos com IA · Formação: Formação Nível Zero: Ferramentas Essenciais e Gratuitas de IA e Código

Publicando seu Site Gratuitamente no GitHub Pages em 2 Minutos

O que você vai aprender

1. Do Seu Computador para o Mundo

Nas aulas do primeiro módulo de projetos, construímos uma landing page completa com HTML5, CSS3 e JavaScript. Até este momento, ela só existe dentro do disco rígido do seu computador — se você fechar o editor ou enviar o caminho do arquivo file:///C:/... para outra pessoa, ninguém conseguirá abrir.

Para que qualquer pessoa no planeta consiga acessar sua página pelo celular ou computador, os arquivos precisam estar hospedados em um servidor web conectado à internet 24 horas por dia.

O GitHub Pages é uma das ferramentas mais fantásticas da engenharia de software moderna: ele transforma qualquer repositório público do GitHub em um site no ar em menos de dois minutos, com custo zero e sem necessidade de configurar servidores.


+-------------------------------------------------------------+
|                 O FLUXO DE DEPLOY NO GITHUB PAGES           |
+-------------------------------------------------------------+
|                                                             |
|  [ 1. SEU COMPUTADOR ] ──> git add . && git commit          |
|                                    │                        |
|                                    ▼                        |
|  [ 2. GITHUB REPOSITÓRIO ] ──> git push origin main         |
|                                    │                        |
|                                    ▼                        |
|  [ 3. GITHUB PAGES BOT ]   ──> Lê index.html e publica      |
|                                    │                        |
|                                    ▼                        |
|  [ 4. URL PÚBLICA HTTPS ]  ──> https://usuario.github.io/site
|                                                             |
+-------------------------------------------------------------+

2. O Que Pode e o Que Não Pode no GitHub Pages

O GitHub Pages é especializado em sites estáticos. Isso significa que ele é perfeito para páginas cujos arquivos consistem em HTML, CSS, JavaScript, imagens e documentos em PDF.

Comparativo de Capacidades

| Tipo de Recurso | Suportado no GitHub Pages? | Exemplos Práticos | |---|---|---| | **Páginas de Conversão (Landing Pages) | Sim (Excelente) | Portfólio, página de captura, apresentação de consultoria | | Documentações e Blogs | Sim (Excelente) | Manuais de produtos, apostilas, sites institucionais | | JavaScript no Navegador | Sim (Excelente) | Calculadoras, formulários com envio por WhatsApp, jogos 2D | | Banco de Dados Relacional (MySQL/Postgres) | Não | Sistemas com login de usuário complexo e tabelas internas | | Scripts Backend (Python/Node rodando no servidor)** | Não | Para isso, usamos plataformas como Render ou VPS |

3. Passo a Passo para Publicar sua Landing Page

Passo 1: Inicializar o Repositório Local

Abra o terminal na pasta onde está sua landing page (meu-site/) e digite os comandos do ciclo Git que você aprendeu no início da formação:


git init
git add .
git commit -m "Publicação inicial da minha landing page"

Passo 2: Criar o Repositório no GitHub

1. Acesse sua conta no GitHub. 2. Clique no botão verde New (Novo Repositório). 3. Dê um nome em letras minúsculas sem espaços (exemplo: minha-landing-page). 4. Deixe o repositório marcado como Public e clique em Create repository.

Passo 3: Conectar e Fazer o Push

Copie os comandos de vinculação exibidos na tela do GitHub e rode no seu terminal:


git remote add origin git@github.com:seu-usuario/minha-landing-page.git
git branch -M main
git push -u origin main

Passo 4: Ativar o GitHub Pages

1. No seu repositório no GitHub, clique na aba Settings (Configurações no topo). 2. No menu lateral esquerdo, clique em Pages. 3. Na seção Build and deployment:

Após cerca de 30 a 60 segundos, o GitHub exibirá uma caixa verde com o link oficial do seu site: https://seu-usuario.github.io/minha-landing-page/.

4. Atualizações Automáticas: A Mágica do Git

Uma vez configurado o GitHub Pages, você nunca mais precisará configurar o site novamente. Cada vez que você fizer uma alteração no seu código local e rodar:


git add .
git commit -m "Ajuste na cor do botão"
git push origin main

O GitHub atualizará sua página pública na internet automaticamente em poucos segundos.

5. Armadilhas Comuns e Como Evitar

[!IMPORTANT]
Nomear o arquivo principal como Index.html ou home.html: O servidor do GitHub Pages busca estritamente pelo arquivo chamado index.html em letras minúsculas. Se você colocar a primeira letra maiúscula (Index.html) ou usar outro nome, o site exibirá o erro 404 Not Found (Página Não Encontrada). Certifique-se de que o arquivo seja rigorosamente index.html.

Exercício Prático

Vamos colocar sua página no ar agora mesmo:

1. Faça o commit e push: Envie os arquivos da sua landing page (index.html, style.css, script.js) para um novo repositório público no GitHub. 2. Ative o GitHub Pages: Siga o roteiro em Settings -> Pages e selecione a branch main. 3. Acesse sua URL pública: Abra o link gerado pelo GitHub no seu navegador. 4. Teste no seu celular: Envie o link para o seu WhatsApp e abra no smartphone para ver seu projeto funcionando ao vivo na internet!

Outras aulas do módulo