Guía de setup — paso a paso

1 · Crear el repositorio en GitHub

El repositorio es la carpeta en la nube donde vivirá tu sitio.

Entrar en github.com (crear cuenta si no la tienes) Click en + → New repository Nombre del repo (ej: mi-sitio), dejarlo Public Marcar "Add a README file" Click en Create repository

2 · Instalar Visual Studio Code

VSCode es el editor de código que usaremos para editar los archivos del sitio.

Descargar desde code.visualstudio.com Instalar (en Mac: arrastrar a Aplicaciones) Abrir VSCode

Orientarse en la barra lateral

La barra lateral izquierda tiene varios iconos. Los importantes por ahora:

usar Explorer — primer icono. Aquí ves y abres los archivos del proyecto.

usar Source Control — icono con ramitas. Desde aquí haces commit y subes cambios.

usar Extensions — cuadraditos. Para instalar extensiones como Live Server.

ignorar Run and Debug, Testing, Accounts, Settings — no los necesitas por ahora.

3 · Instalar y configurar Git

Git es la herramienta que permite subir los cambios al repositorio de GitHub.

Descargar desde git-scm.com (en Mac suele venir preinstalado) Instalar con las opciones por defecto

Configurar identidad

Abrir la terminal en VSCode (Ctrl+Ñ o Cmd+Ñ en Mac) y ejecutar:

git config --global user.name "Tu Nombre"
git config --global user.email "tu@email.com"

Configurar user.name en la terminal Configurar user.email (usar el mismo email que en GitHub)

Para verificar: git config --global --list

4 · Clonar el repo desde VSCode

Clonar = descargar una copia del repositorio a tu ordenador. Desde VSCode es lo más cómodo.

En VSCode, abrir la paleta de comandos: Ctrl+Shift+P (o Cmd+Shift+P en Mac) Escribir Git: Clone y seleccionarlo Pegar la URL del repo (la copias del botón verde Code en GitHub) Elegir dónde guardar la carpeta en tu ordenador (ej: Documentos) Cuando VSCode pida autenticación, iniciar sesión con GitHub a través del navegador

VSCode abre una ventana del navegador para autenticarte con tu cuenta de GitHub. Es más fácil que usar tokens.

Aceptar "Open" cuando VSCode pregunte si abrir la carpeta clonada

5 · Cargar los archivos del sitio

Ahora que la carpeta está abierta en VSCode, toca meter los archivos de la web.

Copiar los archivos del sitio (index.html, CSS, imágenes…) dentro de la carpeta del repo

Puedes arrastrar los archivos directamente al panel Explorer de VSCode, o copiarlos desde el Finder / Explorador de archivos.

Verificar en el Explorer de VSCode que los archivos aparecen correctamente

6 · Probar en local con Live Server

Antes de subir nada, comprobamos que la web funciona bien en tu ordenador.

Instalar la extensión

Click en el icono de Extensions (cuadraditos) en la barra lateral Buscar Live Server → click en Install

Previsualizar el sitio

Click derecho en index.html → "Open with Live Server" Verificar que la web se ve correctamente en el navegador

Live Server abre el navegador y recarga automáticamente cada vez que guardas un archivo.

7 · Primer commit y push

Todo funciona en local — toca subir los archivos a GitHub.

Ir al panel Source Control (icono de ramitas) Los archivos nuevos aparecen listados. Click en + para añadirlos al stage Escribir un mensaje de commit (ej: "primer deploy") Click en el botón Commit Click en Sync Changes (o Push) para subir a GitHub Ir a GitHub y comprobar que los archivos están en el repo

8 · Activar GitHub Pages

Ahora que el código está en GitHub, lo convertimos en un sitio web.

Ir a Settings del repo (pestaña de arriba) En el menú lateral, click en Pages En Source, seleccionar Deploy from a branch Rama: main, carpeta: / (root) → Save Esperar 1-2 minutos y refrescar — aparecerá la URL usuario.github.io/mi-sitio Verificar que el sitio se ve correctamente en esa URL

9 · Configurar dominio personalizado

Si tienes un dominio propio, lo conectamos aquí.

En Settings → Pages, escribir tu dominio en Custom domain Click en Save

"Enforce HTTPS" aparecerá en gris hasta que los DNS estén configurados (paso 10). Volveremos a activarlo al final.

Al guardar el dominio, GitHub crea automáticamente un archivo CNAME en el repo. No lo borres — es necesario para que el dominio funcione.

En VSCode, hacer git pull (o Sync) para traer el archivo CNAME a tu copia local

10 · Configurar Cloudflare y DNS

Cloudflare gestiona los DNS y añade una capa de seguridad y rendimiento a tu sitio.

Añadir el sitio a Cloudflare

Entrar en dash.cloudflare.com (crear cuenta si no la tienes) Click en Add a site, escribir tu dominio Seleccionar el plan Free

Si el dominio se compró en Cloudflare

Los nameservers ya están configurados. Solo necesitas limpiar los registros DNS que vengan por defecto.

Ir a DNS → Records y borrar los registros que vengan por defecto (A, AAAA, CNAME…)

Si el dominio se compró en otro registrador

Hay que apuntar los nameservers a Cloudflare y limpiar los registros importados.

Cloudflare importará registros del proveedor anterior — revisar y borrar los que no necesites Cloudflare te dará 2 nameservers (ej: anna.ns.cloudflare.com) Ir al panel de tu registrador de dominio (donde compraste el dominio) Cambiar los nameservers actuales por los de Cloudflare Esperar propagación (puede tardar hasta 24h, normalmente minutos)

Configurar registros DNS

En Cloudflare → DNS → Records, añadir estos registros:

Tipo	Nombre	Contenido	Proxy
`A`	`@`	`185.199.108.153`	DNS only
`A`	`@`	`185.199.109.153`	DNS only
`A`	`@`	`185.199.110.153`	DNS only
`A`	`@`	`185.199.111.153`	DNS only
`CNAME`	`www`	`usuario.github.io`	DNS only

Importante: el proxy de Cloudflare (nube naranja) debe estar desactivado (DNS only / nube gris) para que el certificado HTTPS de GitHub funcione correctamente.

Añadir los 4 registros A Añadir el registro CNAME para www apuntando a usuario.github.io Verificar que todos los registros tienen proxy desactivado (nube gris)

Verificar HTTPS

Con el proxy desactivado (DNS only), la configuración SSL/TLS de Cloudflare no tiene efecto — el certificado lo gestiona GitHub directamente. Si en algún momento activas el proxy, asegúrate de que SSL/TLS esté en modo Full.

Volver a GitHub → Settings → Pages y marcar Enforce HTTPS

Si aún aparece en gris, espera unos minutos a que los DNS propaguen y refresca la página.

11 · Flujo de trabajo para futuros cambios

A partir de ahora, cada vez que quieras modificar algo en la web:

Abrir la carpeta del proyecto en VSCode Editar los archivos que necesites Guardar: Ctrl+S (o Cmd+S en Mac) Previsualizar con Live Server para comprobar los cambios Source Control → + → mensaje → Commit → Sync Changes

GitHub Pages tarda 1-2 minutos en reflejar los cambios en la web.

12 · Checklist final y problemas comunes

La página se ve correctamente en usuario.github.io/mi-sitio La página carga con el dominio personalizado (tudominio.com) La página también carga con www.tudominio.com El candado HTTPS aparece en el navegador Puedo editar, hacer commit y push desde VSCode

Problemas comunes

"No me aparece la página"

Verifica que GitHub Pages está activado (Settings → Pages)
Comprueba que la rama es main y la carpeta / (root)
Espera 2-3 minutos tras el primer deploy
Revisa en la pestaña Actions si el deploy ha fallado

"El dominio personalizado no funciona"

Comprueba que los nameservers de Cloudflare están activos en tu registrador
Verifica los registros DNS (tabla de la sección 10)
Asegúrate de que el proxy de Cloudflare está desactivado (nube gris)
Comprueba que el archivo CNAME existe en el repo y contiene tu dominio
Espera propagación DNS (hasta 24h)

"Enforce HTTPS está en gris"

Los DNS aún no han propagado — espera y refresca
Verifica que el dominio en "Custom domain" está bien escrito
Comprueba que los registros DNS apuntan a las IPs correctas de GitHub

"No sé si mis cambios se han subido"

Ve a tu repositorio en GitHub y comprueba el último commit
En VSCode, el panel Source Control no debería tener cambios pendientes tras el push
Mira la pestaña Actions en GitHub — ahí verás si el deploy se ha disparado

"Git me pide usuario y contraseña"

GitHub ya no acepta contraseñas. Necesitas un Personal Access Token
Ve a GitHub → Settings → Developer settings → Personal access tokens → Tokens (classic)
Genera un token con permisos de repo
Usa ese token como contraseña cuando Git te lo pida
Alternativa más fácil: en VSCode, usa el botón de Sign in with GitHub que abre el navegador

"VSCode me dice que Git no está instalado"

Cierra y vuelve a abrir VSCode después de instalar Git
En Mac, abre la Terminal y escribe git --version — si no está, instala Xcode Command Line Tools con xcode-select --install

"He borrado el archivo CNAME sin querer"

Ve a GitHub → Settings → Pages
Vuelve a escribir tu dominio en Custom domain y dale a Save
GitHub recreará el archivo CNAME automáticamente
Haz git pull en VSCode para traer el archivo a tu copia local