Cómo subir páginas creadas con Claude a internet gratis con GitHub y Cloudflare

Picture of Margot Duek

Margot Duek

En este tutorial mostramos cómo pasar de un archivo HTML creado con Claude a una página web disponible en internet. Aprendemos cómo utilizar GitHub para almacenar los archivos, crear un repositorio y publicar una página utilizando GitHub Pages. Después mostramos cómo conectar el proyecto con Cloudflare Pages para desplegarlo en la nube, agregar dominios personalizados y proteger la información utilizando usuario y contraseña. Este flujo permite transformar dashboards, reportes, landing pages y herramientas creadas con inteligencia artificial en sitios accesibles desde cualquier lugar sin depender de tener el archivo guardado localmente en una computadora.
  • Por qué los archivos HTML creados con Claude necesitan publicarse en internet para poder compartirlos.
  • Cómo utilizar GitHub para almacenar y publicar páginas web creadas con inteligencia artificial.
  • Cómo crear un repositorio nuevo dentro de GitHub paso a paso.
  • La diferencia entre repositorios públicos y privados en GitHub.
  • Cómo subir un archivo HTML creado con Claude a un repositorio.
  • Cómo activar GitHub Pages para convertir un archivo HTML en una página web pública.
  • Por qué el archivo principal debe llamarse index.html para funcionar correctamente.
  • Cómo conectar GitHub con Cloudflare Pages para desplegar proyectos automáticamente.
  • Cómo configurar Cloudflare Pages utilizando un repositorio existente de GitHub.
  • Cómo agregar dominios personalizados a páginas creadas con inteligencia artificial.
  • Cómo proteger una página web creada con Claude utilizando usuario y contraseña.
  • Cómo utilizar variables y secretos en Cloudflare para manejar credenciales privadas.
  • Por qué GitHub es útil para automatizar actualizaciones futuras de dashboards y reportes.
  • Cómo mantener páginas creadas con IA actualizadas sin volver a configurarlas desde cero.
  • Cómo pasar de un archivo local creado con IA a una herramienta accesible desde cualquier lugar.

Una de las grandes ventajas de herramientas como Claude es que ahora cualquier persona puede crear páginas web, dashboards y herramientas internas utilizando inteligencia artificial.

Sin embargo, existe un problema común:

El archivo funciona en tu computadora, pero nadie más puede verlo.

Para compartirlo con clientes, colaboradores o cualquier persona necesitas subirlo a internet.

En este tutorial mostramos cómo pasar de un archivo HTML creado con Claude a una página web funcional utilizando GitHub y Cloudflare.

Del archivo local a una página web pública

Cuando Claude crea una página HTML, normalmente el archivo queda guardado únicamente en tu computadora.

Aunque tengas una URL local, esa dirección solamente funciona dentro de tu propio equipo.

Si envías ese archivo o enlace a otra persona, no podrá abrirlo porque no existe en su computadora.

La solución es publicar ese archivo en un servidor.

Publicar una página con GitHub Pages

GitHub es una plataforma utilizada principalmente por desarrolladores para almacenar código y proyectos.

Para este proceso funciona como un lugar donde podemos guardar nuestro archivo HTML y hacerlo accesible desde internet.

El proceso consiste en:

  • crear una cuenta en GitHub;
  • crear un repositorio;
  • subir el archivo HTML;
  • activar GitHub Pages.

Una vez configurado, GitHub genera una dirección pública donde cualquier persona puede acceder a la página.

Crear un repositorio en GitHub

El primer paso es crear un repositorio nuevo.

Dentro de GitHub podemos definir:

  • nombre del proyecto;
  • descripción;
  • visibilidad pública o privada.

Un repositorio público permite que cualquier persona vea el contenido.

Un repositorio privado limita el acceso solamente a personas autorizadas.

Para proyectos internos o información sensible, es recomendable utilizar repositorios privados.

La importancia de index.html

Uno de los errores más comunes al publicar páginas es no utilizar el nombre correcto del archivo principal.

La mayoría de servidores buscan automáticamente un archivo llamado:

index.html

Si el archivo tiene otro nombre, la página puede no cargar correctamente.

Por eso es importante cambiar el nombre antes de desplegar el proyecto.

Conectar GitHub con Cloudflare Pages

Cloudflare Pages permite publicar sitios web directamente desde un repositorio.

La ventaja de conectarlo con GitHub es que cualquier cambio realizado en el repositorio puede actualizar automáticamente la página.

El flujo sería:

Claude crea la página.

Subes el archivo a GitHub.

Cloudflare detecta cambios.

La página se actualiza automáticamente.

Esto es especialmente útil para dashboards que necesitan renovarse constantemente.

Agregar un dominio personalizado

Además de utilizar el dominio gratuito que ofrecen estas plataformas, puedes conectar tu propio dominio.

Por ejemplo:

  • tudominio.com;
  • reportes.tudominio.com.

La configuración consiste en agregar algunos registros dentro del proveedor donde compraste el dominio.

Proteger páginas con usuario y contraseña

No todos los dashboards o reportes deben estar disponibles públicamente.

Por ejemplo:

  • reportes de ventas;
  • información financiera;
  • datos internos.

Cloudflare permite agregar protección mediante variables y secretos.

Esto permite crear una página donde los usuarios tengan que ingresar:

  • usuario;
  • contraseña.

Las credenciales se mantienen protegidas y no aparecen directamente dentro del código público.

Automatizar reportes creados con inteligencia artificial

Una de las aplicaciones más interesantes de este flujo es crear sistemas automáticos.

Por ejemplo:

Un reporte de Meta Ads que se actualiza cada semana.

Un dashboard de ventas mensual.

Una página interna para clientes.

Una herramienta creada con Claude Code.

Al conectar inteligencia artificial con GitHub y Cloudflare puedes crear procesos donde la información se actualice automáticamente.

La importancia de entender cómo publicar lo que crea la IA

Crear una página con inteligencia artificial es solamente el primer paso.

El verdadero valor aparece cuando puedes convertir ese archivo en una herramienta usable por otras personas.

La combinación de:

  • inteligencia artificial;
  • GitHub;
  • Cloudflare;
  • automatización;

permite crear soluciones digitales mucho más rápido que antes.

Hoy vamos a aprender cómo subir a internet cualquier página que creemos con Claude.

Porque algo que pasa mucho es que hacemos una página increíble con inteligencia artificial, tenemos nuestro archivo HTML, lo abrimos en la computadora y funciona perfecto.

Pero cuando queremos compartirlo con alguien más, no funciona.

La otra persona no puede abrirlo porque solamente existe en nuestra computadora.

Entonces hoy vamos a ver cómo pasar de esto a tener una página disponible en internet.

Vamos a utilizar dos herramientas:

GitHub y Cloudflare Pages.

La primera opción que vamos a ver es GitHub Pages.

GitHub es una plataforma donde normalmente los desarrolladores guardan código, pero también nos sirve para publicar páginas web.

Vamos a crear un repositorio.

Un repositorio es básicamente una carpeta donde vamos a guardar nuestros archivos.

Entramos a GitHub.

Creamos un nuevo repositorio.

Le ponemos un nombre.

Por ejemplo:

“mi-dashboard-claude”.

Podemos decidir si queremos que sea público o privado.

Si lo hacemos público, cualquier persona puede ver el código.

Si lo hacemos privado, solamente las personas autorizadas podrán verlo.

Para esta prueba lo vamos a hacer público.

Creamos el repositorio.

Ahora necesitamos subir nuestro archivo.

Algo importante:

El archivo principal debe llamarse index.html.

¿Por qué?

Porque cuando GitHub Pages busca qué página mostrar, busca automáticamente ese archivo.

Si tienes algo como:

dashboard-final.html

o

pagina-nueva.html

no necesariamente lo va a detectar.

Entonces lo cambiamos a:

index.html.

Ahora vamos a subir el archivo.

Seleccionamos Add file.

Después Upload files.

Arrastramos nuestro archivo HTML.

Hacemos commit changes.

Y listo.

Nuestro archivo ya está dentro del repositorio.

Ahora necesitamos activar GitHub Pages.

Nos vamos a Settings.

Después Pages.

Aquí seleccionamos la rama donde está nuestro archivo.

Normalmente es main.

Guardamos.

GitHub empieza a construir nuestra página.

Después de unos segundos nos genera una URL.

Y ahora cualquier persona con ese enlace puede entrar.

Ya no depende de que yo tenga abierto el archivo en mi computadora.

## Segunda opción: Cloudflare Pages

Ahora quiero enseñarles una opción que me gusta mucho más.

Cloudflare Pages.

Cloudflare es una plataforma que nos permite publicar páginas web rápidamente.

La ventaja es que podemos conectar directamente nuestro repositorio de GitHub.

Entonces cada vez que cambiemos algo en GitHub, Cloudflare automáticamente actualiza la página.

Entramos a Cloudflare Pages.

Creamos un nuevo proyecto.

Seleccionamos:

Connect to Git.

Elegimos GitHub.

Autorizamos la conexión.

Seleccionamos nuestro repositorio.

Y Cloudflare empieza a desplegarlo.

Después de unos momentos ya tenemos nuestra página publicada.

La diferencia es que ahora tenemos un flujo automático.

Yo puedo modificar mi archivo.

Subirlo a GitHub.

Y Cloudflare actualiza la versión publicada.

## Agregar un dominio personalizado

Otra cosa interesante es que podemos conectar nuestro propio dominio.

Por ejemplo:

dashboard.miempresa.com

o

reportes.miempresa.com.

Dentro de Cloudflare agregamos el dominio personalizado.

Después necesitamos configurar algunos registros DNS.

Esto depende del proveedor donde tengas comprado tu dominio.

Una vez configurado, nuestra página deja de verse como una dirección genérica y puede tener una dirección profesional.

## Proteger páginas con contraseña

Ahora vamos a algo más interesante.

Muchas veces creamos dashboards o reportes que no queremos que sean públicos.

Por ejemplo:

Reportes de clientes.

Información de ventas.

Datos internos.

Para eso podemos agregar protección.

Cloudflare nos permite utilizar variables y secretos.

La idea es que la contraseña no esté escrita directamente dentro del código.

Creamos una variable.

Por ejemplo:

PASSWORD.

Y ahí guardamos la contraseña real.

Después nuestro código consulta esa variable.

Así la información sensible no queda expuesta.

Cuando alguien entra a la página aparece un login.

La persona escribe usuario y contraseña.

Si son correctos puede ver el contenido.

## Crear herramientas con inteligencia artificial

Aquí es donde empieza lo interesante.

Porque ahora podemos hacer algo como:

Crear un dashboard con Claude.

Subirlo a GitHub.

Publicarlo con Cloudflare.

Conectar un dominio.

Agregar seguridad.

Y tener una herramienta funcional.

Por ejemplo:

Un dashboard de ventas.

Un reporte de campañas.

Una herramienta interna para clientes.

Una página de análisis.

Todo creado mucho más rápido gracias a la inteligencia artificial.

## Automatizar actualizaciones

También podemos automatizar el proceso.

Imagina que tienes un reporte de Meta Ads.

Cada semana se actualizan tus datos.

Claude puede ayudarte a generar la nueva versión.

GitHub guarda los cambios.

Cloudflare publica automáticamente la actualización.

Y tú tienes siempre una versión actualizada del dashboard.

Conclusión

La inteligencia artificial no solamente sirve para escribir textos.

También sirve para crear herramientas completas.

Pero crear el HTML es solamente el primer paso.

El siguiente paso es aprender cómo publicar, compartir y convertir esas creaciones en algo útil.

Con herramientas como GitHub y Cloudflare podemos pasar de una idea creada con IA a una página funcionando en internet.

Espero que este tutorial te haya servido.

Soy Margot Duek y nos vemos en el siguiente video.