Alojar gratis un sitio web en la nube con Páginas de Cloudflare

Actualizado: 21 de febrero del 2023
Por: Norfi Carrodeguas

Cómo usar el servicio sin servidor (serverless) de Cloudflare, para subir y servir los archivos de un sitio estático, con más velocidad y seguridad.

Alojar gratis un sitio web en la nube con Páginas de Cloudflare

En este artículo comparto cómo usar el servicio de Páginas de Cloudflare, para alojar un sitio nuestro sin costo alguno en la red de este poderoso CDN, usando la opción de serverless.
Serverless (sin servidor), es una modalidad nueva que consiste en alojar un sitio web en la nube, sin tener un servidor físico que mantener, o sea no hay que contratar en un servicio de hosting, solo crear los archivos y subirlos a internet.

Alojamiento serverless en la nube, ventajas y beneficios

Cloudflare es una empresa con un poderoso y extenso servicio CDN con servidores repartidos por todo el mundo.
El servicio de Páginas se aloja en esta red global, que se encuentra a menos de 100 ms del 99 % del mundo conectado a Internet y permite entregar contenido casi de forma instantánea a los usuarios finales.
Cloudflare Pages se basa en las funciones Serverless (sin servidor) de Cloudflare Workers y permite a los desarrolladores crear aplicaciones web ligeras y escalables. Emplea JAMstack (JAM es la sigla de "JavaScript, API, Marcado") una metodología para crear aplicaciones web ligeras y de rápido rendimiento.
La opción solo está disponible para sitios estáticos.

¿Qué es un sitio web estático?

Un sitio web estático consta principalmente de archivos HTML (contienen el texto), JavaScript (para agregar funcionalidad) y CSS (para dar estilo y facilitar la accesibilidad).
Además, puede tener archivos multimedia como imágenes y videos.
También otros archivos como PDF se pueden adicionar.
No se puede usar PHP ni otros lenguajes de programación que se ejecutan del lado del servidor.
Estos lenguajes son usados en sitios dinámicos para agregar contenido por parte de los usuarios del sitio y mejorar la interactividad, como en WordPress o Blogger.
Esto no es posible en sitios estáticos.

Ventajas y desventajas de sitios de páginas estáticas

Los sitios web estáticos son usados para publicar información en internet dirigida al usuario, donde no se requiere interacción.
Son usados en negocios, empresas, sitios informativos, escuelas, universidades, etc.
Son mucho más veloces, consumen pocos recursos y sin problemas de seguridad, lo que afecta a los sitios dinámicos
Yo mismo comencé a publicar en este sitio web en el 2010, usando páginas estáticas y parte del sitio aun funciona como tal.

¿Como crear un sitio estático?

Un sitio web estático puede estar formado desde uno a cientos de archivos HTML enlazados entre sí.
Estas páginas pueden crearse de varias formas: con un editor de texto plano como el Blog de Notas, editores HTML en la web, un software profesional WYSWG, modificando plantillas disponibles gratis en internet o con generadores de sitios estáticos como Jekyll, Gatsby, Hugo, Next.js, Eleventy.
Una página hasta puede crearse guardando un documento de texto en Microsoft Word (de Office 365) como un archivo HTML.

Plantilla de sitio estático HTML
Comparto una sencilla plantilla para descargar, que contiene 6 archivos para crear un sitio web estático de ejemplo.
Se trata de dos archivos HTML (la página principal y otra de contenido), el estilo.css (también se puede insertar inline), una imagen, un sitemap.xml, listo para subirlo a Google y un archivo robots.txt.
Para agregar más páginas solo hay que hacer copias de "pagina1.html".
No esperen una plantilla sofisticada, es algo elemental solo para probar. Con el estilo de los 90, pero la plantilla es el 2014 y la convertí ahora de php a html a toda carrera.
Espero les sea de utilidad: Descargar Plantilla HTML para crear un sitio web estático

Crear el sitio web para servirlo en la nube de Cloudflare

Por supuesto, el primer paso es crear los archivos del sitio y asegurarse de que funcione.
Para simular su funcionamiento y ajustarlo, en la computadora podemos instalar un servidor local como Apache, que funciona de forma similar a como lo hace un servidor en internet.
Finalmente, solo resta subirlo a internet y compartirlo.

Subir los archivos del sitio a la nube

El principal requisito para subir sitio a la nube sin costo alguno, es tener una cuenta en el servicio de Cloudflare.
Solo es necesario una dirección de email para registrarse en la opción gratuita.
Hay 3 formas de subir el sitio creado al servicio de Pages de Cloudflare.
Las explico:

1- Wrangler, solo para usuario avanzados funciona mediante la línea de comandos y requiere tener Node.js en la computadora.
2- Creando e implementando un repositorio en GitHub. Es el recomendado. Solo se necesita registrarse gratis y descargar e instalar GitHub Desktop.
Lo explico detalladamente más abajo.
3- Mediante carga o subida directa. Es el mas sencillo, consiste en arrastrar y soltar una carpeta con los archivos en una página de Cloudflare.

Para experimentar no, pero si se piensa crear un sitio funcional, se recomienda tener un dominio, que se puede comprar a Cloudflare.
Los que posean un dominio con un sitio funcionando, pueden situar el nuevo sitio en un subdominio.
Este sitio está situado en el subdominio llamado ideas. Cloudflare se encarga de crear automáticamente el subdominio y agregar la entrada CNAME a la configuración DNS del sitio, si ya usa este servicio.

Subir y publicar un sitio estático en Páginas de Cloudflare mediante carga directa

Sigue los siguientes pasos:

1- Después de registrarte en Cloudflare, entra y en el menú lateral escoge "Pages".
2- Presiona el botón "Crear un proyecto" y a continuación: "Carga directa".
3- Asigna un nombre corto al proyecto y sube los archivos.

Es todo, usa la dirección asignada para visitar el nuevo sitio.
Es opcional posteriormente crear un dominio personalizado, para que las personas puedan acceder con más facilidad al sitio.
Lamentablemente, para agregar contenido al sitio publicado, editar alguna página o realizar cualquier cambio, es necesario volver a subir todos los archivos. Es la desventaja de este método.

Publicar y actualizar un sitio en Páginas de Cloudflare desde GitHub

Este es el método recomendado para subir y actualizar los archivos de un sitio.

1- Si aun no la posees, crea una cuenta gratis en GitHub.
2- Descarga una copia de la aplicación GitHub Desktop a tu computadora e instálala.
3- Crea un nuevo repositorio.
Se llama repositorio a un proyecto que conta de varios archivos. Puede ser un sitio web o una aplicación.
Para crearlo en el menú Archivo escoge: "Nuevo repositorio".
Dale un nombre corto que será el de tu sitio web, sin espacios, ni caracteres especiales y una descripción (opcional).
En "Local path" indica la ruta a la carpeta en la computadora que contiene los archivos del sitio creado.
Para crearlo presiona el botón: "Create repository".
Para subirlo a Github presiona el botón "Publish repository".

A partir de este momento después de hacer cualquier cambio o edición en el contenido del sitio local, abre GitHub Desktop y verás en la pestaña History los cambios realizados. Presiona "Commit to main" después de darle un nombre descriptivo para guarda la versión con los cambios y súbelo a Github usando el botón: "Push origen".

4- Entra a Páginas de Cloudflare, crea un nuevo proyecto y selecciona: "Conéctese a un Git".
5- Conecta el servicio con tu cuenta de GitHub y allí selecciona el repositorio con los archivos del sitio. Presiona: "Comenzar la instalación" a continuación: "Guardar e implementar".

Al final el proceso, de ser exitoso, recibirás el mensaje que el sitio se ha implementado con la dirección asignada, usando el dominio pages.dev.
Prueba el sitio usando el enlace o presiona "Continuar con el proyecto" para ajustar parámetros de la configuración o signar otro dominio.
Habilita las estadísticas y comparte el proyecto en las redes sociales.
Suerte con tu proyecto.

Mas información sobre las Páginas de Cloudflare

Cloudflare Pages documentation

Otros sitios de internet para alojar paginas estáticas gratis

GitLab Pages
https://www.netlify.com/
https://www.deta.sh/
https://vercel.com/
https://surge.sh/
https://render.com/

Páginas relacionadas

✓ Código para crear una página web
✓ HTML fácil, código, elementos básicos y funcionamiento
✓ Como usar los enlaces, vínculos o anclajes en HTML
✓ Reglas importantes al publicar en un blog o sitio web de internet

Comparta esta página

Facebook

Twitter