Crear el repositorio
Todo proyecto comienza con un repositorio: una carpeta versionada con Git y guardada en GitHub. Puedes crearla de dos maneras: desde el sitio de GitHub (haciendo clic) o desde la terminal (escribiendo). Ambas llegan al mismo lugar. Veamos las dos.
🧠 Analogía: el repositorio es un cajón con etiqueta
Imagina un cajón con el nombre de tu proyecto al frente. Todo lo que pertenece al sitio va ahí: los archivos, el historial de versiones, las etiquetas. GitHub es el mueble lleno de esos cajones, en la nube. Crear el repositorio es simplemente abrir un cajón nuevo y pegarle la etiqueta con el nombre.
👁 Opción A: desde el sitio de GitHub
- •Entra en github.com con la sesión iniciada y haz clic en el botón verde New (o en el + en la parte superior derecha > New repository).
- •En Repository name, escribe
minha-landing(sin espacios, sin tildes). - •Déjalo como Público (tiene que ser público para que Pages funcione en el plan gratuito).
- •Marca Add a README file y haz clic en Create repository.
Opción B: desde la terminal
Si tienes el gh (GitHub CLI) instalado, puedes crear todo de una vez. Si no, puedes hacerlo con Git puro y conectarlo después.
# Opción 1: con GitHub CLI (crea el repositorio local y el remoto a la vez)
$ gh repo create mi-landing --public --clone
Created repository seu-usuario/minha-landing on GitHub
# Opción 2: Git puro, crear una carpeta e iniciar el repositorio
$ mkdir minha-landing
$ cd minha-landing
$ git init
Initialized empty Git repository in .../minha-landing/.git/
# después de crear el repo vacío en el sitio, conecta el remoto
$ git remote add origin https://github.com/seu-usuario/minha-landing.git
Estructura de carpetas del proyecto
Para una landing page sencilla, solo necesitas tres cosas: la página, el estilo y una carpeta para imágenes. Limpio y directo.
minha-landing/
├── index.html
├── style.css
├── README.md
└── img/
└── foto.jpg
⚠️ Error común
Problema: creó el repositorio como Privado y GitHub Pages no publica.
Solución: en el plan gratuito, Pages solo funciona en repositorios públicos. Ve a Settings > General > Danger Zone > Change visibility y cámbiala por Público. O crea un repositorio nuevo directamente como público.
HTML básico: lo mínimo para funcionar
HTML es la estructura de la página: títulos, párrafos, imágenes, enlaces. Cada parte queda dentro de una etiqueta, que se abre con <tag> y cierra con </tag>. No necesitas memorizarlo todo. Con media docena de etiquetas ya puedes crear una página que funcione.
🧠 Analogía: las etiquetas son cajas que encajan
Piensa en cajas dentro de cajas. La caja <html> guarda la página completa. Dentro de ella está el cuadro <head> (información que lee el navegador) y el cuadro <body> (lo que aparece en la pantalla). Cada cuadro que abres, tienes que cerrarlo.
Una index.html completa y sencilla
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Mi sitio</title>
</head>
<body>
<h1>Hola, soy Joao</h1>
<p>Te damos la bienvenida a mi primera página.</p>
<img src="img/foto.jpg" alt="Mi foto">
<a href="https://inema.club">Mi enlace</a>
</body>
</html>
Para qué sirve cada etiqueta
- •
<!DOCTYPE html>avisa que es una página HTML moderna. - •
<head>guarda el título y las configuraciones (no aparece en pantalla). - •
<title>y es el nombre que aparece en la pestaña del navegador. - •
<body>y todo lo que aparece en pantalla. - •
<h1>y es el título grande;<p>es un párrafo de texto. - •
<img>muestra una imagen;<a>crea un enlace en el que se puede hacer clic.
💡 Consejo: prueba abriendo el archivo
Antes de publicar, abre el index.html directamente en el navegador (haz doble clic en el archivo o ejecuta open index.html en Mac, xdg-open index.html en Linux). Si se ve bien en tu computadora, se verá bien en línea.
⚠️ Error común
Problema: la imagen no aparece, solo un cuadrado roto.
Solución: la ruta en src tiene que coincidir con la ubicación real del archivo. Si la foto está en img/foto.jpg, escribe exactamente esto. Las mayúsculas importan: Foto.JPG y diferente de foto.jpg en el servidor.
CSS básico: Dale un buen aspecto
Si el HTML es la estructura, el CSS y la apariencia: colores, fuentes, espaciado, alineación. Escribes el estilo en un archivo style.css y lo conecta al HTML con una línea. Listo: la misma página pasa de ser un "documento aburrido" a una landing presentable.
🧠 Analogía: CSS es la ropa de la página
HTML es el cuerpo: cabeza, torso, brazos. CSS es la ropa que llevas puesta: el color, el tamaño, el ajuste. El mismo HTML puede usar mil estilos distintos, igual que puedes cambiarte de ropa sin cambiar de cuerpo.
Paso 1: conectar el style.css al HTML
Dentro del <head> de tu index.html, agrega esta línea:
<link rel="stylesheet" href="style.css">
Paso 2: un style.css de ejemplo
/* color de fondo y fuente de toda la página */
body {
background-color: #0f172a;
color: #e2e8f0;
font-family: Arial, sans-serif;
text-align: center;
max-width: 600px;
margin: 40px auto;
}
/* título grande verde */
h1 { color: #10b981; }
/* foto redonda */
img { border-radius: 50%; width: 160px; }
👁 Cómo leer un selector
Cada bloque de CSS tiene tres partes:
- •Selector (
h1): a quién aplicarlo. - •Propiedad (
color): qué cambiar. - •Valor (
#10b981): el nuevo valor. Termina con;.
El truco margin: 40px auto con max-width y es la forma clásica de centrar el contenido en pantalla.
✓ Qué HACER
- ✓Mantener el CSS en un archivo separado (
style.css) - ✓Usar pocos colores y una sola fuente
- ✓Cerrar cada bloque con
}
✗ Qué NO hacer
- ✗Olvidar el
;al final de cada línea - ✗Equivocarse en el nombre del archivo en el
href - ✗Llenar la página de colores estridentes
Publicar en GitHub Pages
Esta es la parte mágica: el GitHub Pages toma los archivos de tu repositorio y los publica como un sitio web real, gratis, con una URL pública. Son tres pasos: enviar los archivos (commit + push), activar Pages y verlo en línea.
Commit y push de los archivos
Envía el código de tu máquina a GitHub.
$ git add .
$ git commit -m "primera versión de la landing"
[main 1a2b3c4] primera versión de la landing
$ git push -u origin main
To github.com:seu-usuario/minha-landing.git
Activar Pages
En el repositorio, ve a Settings > Pages.
- •En Source, elige Deploy from a branch.
- •En Branch, selecciona
mainy es la carpeta/ (root). - •Haz clic en Save.
Esperar y verlo en línea
En 1 a 2 minutos, GitHub publica el sitio y muestra la URL.
# la URL final queda en este formato:
https://seu-usuario.github.io/minha-landing/
👁 Qué vas a ver en la pantalla
Después de guardar, la propia página de Pages muestra un recuadro verde:
✓ Your site is live at
https://seu-usuario.github.io/minha-landing/
# Visitar el sitio
Haz clic en Visit site y verás tu landing publicada. Esta dirección es pública: puedes compartirla con cualquier persona.
⚠️ Error común
Problema: abrió la URL y apareció una página 404.
Solución: normalmente es porque el archivo no se llama index.html (Pages busca este nombre), o todavía estás en los primeros segundos de la publicación. Confirma el nombre del archivo, espera 1-2 minutos y actualiza la página con Ctrl+F5.
Dominio personalizado
OPCIONAL
La URL seu-usuario.github.io ya funciona perfectamente. Pero si quieres una dirección propia, como meunome.com.br, puedes conectar un dominio personalizado. Esto es opcional y cuesta lo que cuesta el dominio (unos pocos reales al año). Omite este tema si todavía no quieres gastar.
🧠 Analogía: el dominio es la dirección bonita
GitHub te da una dirección que funciona, pero es larga. Un dominio es como cambiar «Calle 3, Manzana 12, Lote 4» por «Casa de Juan». El lugar es el mismo, solo que el nombre es fácil de recordar y compartir.
Comprar el dominio
En un registrador (Registro.br para .com.br, o Namecheap, Cloudflare, Google Domains para otros). Elige el nombre y paga la tarifa anual.
Apuntar el DNS a GitHub
En el panel del registrador, crea un registro CNAME apuntando tu dominio a la dirección de GitHub.
# Tipo Nombre Valor
CNAME www seu-usuario.github.io
Registrar el dominio en GitHub
En Settings > Pages > Custom domain, escribe tu dominio (ej.: www.meunome.com.br) y haz clic en Save. Marca Enforce HTTPS cuando esté disponible.
Esperar a que se propague el DNS
El cambio de DNS tarda desde unos minutos hasta 24 horas en aplicarse en todo el mundo. Ten paciencia: no es un error, es solo el tiempo de propagación.
💡 Consejo: empieza sin dominio
No necesitas comprar un dominio para completar este proyecto. La URL github.io ya cuenta como "sitio en línea". El dominio propio es una mejora que puedes hacer cuando quieras que la dirección tenga un aspecto más profesional.
Ejercicio final: tu landing en línea
Ahora haces todo junto, desde cero hasta la URL pública. Sigue la lista de verificación en orden. Al terminar, tendrás un sitio real en Internet, hecho por ti, con una dirección propia para compartir.
🎯 Lo que vas a construir
Una landing page personal: título con tu nombre, un párrafo de presentación, una foto y un enlace. Versionada con Git y publicada en GitHub Pages.
Paso 1: crear la carpeta y los archivos
$ mkdir minha-landing
$ cd minha-landing
$ touch index.html style.css
$ mkdir img
Paso 2: escribir el HTML y el CSS
Ábrelo en el editor y pega el contenido de los temas 2 y 3.
$ code .
# escribe el index.html y el style.css, guarda
Paso 3: iniciar Git y el primer commit
$ git init
$ git add .
$ git commit -m "mi landing personal"
[main (root-commit) 1a2b3c4] mi landing personal
Paso 4: conectarse a GitHub y subir
# crea el repo en el sitio (Public) y copia la URL, después:
$ git remote add origin https://github.com/seu-usuario/minha-landing.git
$ git push -u origin main
Paso 5: activar GitHub Pages
- •Settings > Pages > Source: Deploy from a branch.
- •Branch
main, carpeta/ (root), Save.
Paso 6: abrir la URL pública
# espera 1-2 min y abre:
https://seu-usuario.github.io/minha-landing/
Si tu landing aparece en esta dirección, está en línea. Misión cumplida.
✓ Comprueba que tienes
- ✓Repositorio público en GitHub
- ✓
index.htmlestyle.cssconfirmados - ✓Pages activado en la branch
main - ✓URL pública que abre tu página
✗ Si no funciona, revisa
- ✗El repo está Private (debe ser Public)
- ✗El archivo no se llama
index.html - ✗Olvidó el
git push - ✗No esperó a que terminara la publicación
🏆 ¡Felicitaciones, completaste la Ruta 1!
Saliste de cero y pusiste un sitio en línea usando terminal, Git, GitHub y GitHub Pages. Este es exactamente el camino que los profesionales recorren todos los días. En la Ruta 2, subirás de nivel con un deploy moderno: Vercel, base de datos en la nube, APIs y variables de entorno.
📚 Resumen del módulo
Siguiente ruta:
Ruta 2 - Deploy moderno (Vercel, Supabase, APIs y variables de entorno). Terminas la Ruta 1 con un sitio publicado y pasas al deploy de aplicaciones reales.