Si has terminado de desarrollar tu aplicacion web o sitio web, usando solo HTML, CSS y Javascript, o usando Frameworks de Javascript de frontend como React, Vue, Angular, Svelte, Solid, Lit, y muchos otros mas, y ahora necesitas subirlo en la nube, en este articulo te dare una lista de sitios en donde puedes hacerlo desde gratuitamente hasta profesionalmente.
Si tienes prisa la lista completa que mencionare es esta:
- Netlify
- Github Pages
- Surge
- CloudFlare
Aunque tambien mencionare otras mas.
Archivos estaticos
Y antes de empezar, dejo en claro que todas las que les menciono tienen planes gratuitos, y su principal proposito es servir archivos estaticos, es decir archivos que no necesitan ser procesados por codigo de servidor y que el navegador puede leer directamente como son los archivos HTML, CSS, Javascript, Imagenes, PDFs, y muchos otros archivos tipicos de Frontend, y esto tambien lo digo porque si tienen una aplicacion hecha en Python, Nodejs, PHP, Java, muchos de estos servicios que les mencionare no sirven para desplegar aplicaciones de servidor sino estan enfocados mucho mas en desplegar aplicaciones Frontend.
asi que con esto dicho empecemos con el servicio mas popular en esta area.
Netlify
Netlify es el Hosting por defecto para despligue de sitios estaticos, es decir aqui puedes desplegar tus proyectos hechos con cualquier framework de frontend de Javascript, ya que al final estos generan archivos HTML, CSS y Javascript. Tambien puedes desplegar sitios que son creados por Generadores de sitios estaticos como Astro, Gatsby, Jekyll, Hugo, y muchos otros mas, con un solo comando de terminal:
netlify deploy —-prod
Y Netlify esta tan enfocado en los sitios estaticos que no solo permite desplegarlos, sino que tambien tiene otros servicios que hacen que un sitio tenga funcionalidades dinamicas sin la necesidad de que tengas que crear codigo de servidor.
Por ejemplo tipicamente si creas un Landing Page, necesitas añadir quizas un formulario de contacto, bueno no tienes que usar codigo de algun lenguaje de Backend, simplemente puedes usar Netlify Forms y este ya añade un formulario a tu simple codigo de HTML y luego cuando tus usuarios te envien mensajes, podras verlo directamente desde tu panel de control y recibirlo en tu correo.
O si necesitas un Login y un Registro para tu sitio tambien esta Netlify Identity que te permite añadir autenticacion a tu simple sitio web, y es manejado tambien por Netlify.
Tambien un servicio llamado Netlify Functions, que son Basicamente pequeñas funciones de backend que sirven para que puedas comunicar Netlify con otras plataformas como base de datos, o metodos de pago por ejemplo, o tambien para poder ejecutar codigo cuando algun evento suceda.
O tambien tiene un servicio personalizado de Seguridad para poder auditar tu aplicacion de Netlify y ver si cumple con varias protecciones ante distintos tipos de ataques
Ademas posee una seccion de Plugins en donde puedes ver una lista de soporte de otras plataformas para poder extender tu sitio con servicios de terceros como Algolia para tener un buscador, Cloudinary para subir imagenes en la nube, o para integrarlo con bases de datos o servicios como Supabase tambien, aunque tambien puedes crear tus propios Plugins para la plataforma.
Y cada nuevo Framework que aparece, trata de soportarlo, para que cuando despliegues tengas que hacer el minimo trabajo, tanto es esto que incluso tienen su propio CMS llamado Decap, que se puede integrar con generadores de sitios estaticos, Es decir si creas un sitio web con Gatsby, Nextjs o Hugo y necesitas añadir un panel de control, puedes usar este CMS y ya tendrias esa parte creadas. Aunque como en un CMS estatico, este no guarda los datos en una base de datos sino que lo que hace es que en cada cambio vuelve a generar todo el sitio estatico, asi que debes tener en cuenta eso.
Y en cuanto al precio, este tiene planes gratuitos para desplegar hasta 500 sitios web, y te da 100GB de ancho de banda para todos tus sitios, por lo que si se consumen puedes pagar un plan de 19$, donde te dan 1TB de ancho de banda ademas de poder tener mas tiempo para ejecutar funcioens serverless,
Todo esto hace que si tu trabajo principal es crear multiples sitios web frontend, como blogs, ecommerce sencillos, landing pages y sitios estaticos de ese tipo. Netlify es una plataforma que hace que te olvides del asunto de despliegue y te enfoques en el desarrollo.
Github Pages
Github muy aparte de permitirte Alojar tu codigo fuente en sus servidores, en algun momento se dio cuenta que muchos desarrolladores tambien necesitaban alojar las documentaciones de sus proyectos de codigo. Y Estas documentaciones no son aplicaciones muy pesadas, ya que en su mayoria son simples archivos estaticos (HTML, Markdown, CSS, Imagenes, etc) asi que Github ofrece gratuitamente un servicio llamado Github Pages el cual permite alojar sitios web, siempre y cuando el codigo fuente del proyecto, este alojado en Github.
Y a pesar que este enfocado en subir documentaciones, muchos desarrolladores aprovechan este hosting gratuito, para poder alojar sus Portafolios web, o subir la demo de sus proyectos Frontend.
Lo unico que necesitas es tener una cuenta de Github, y conocer las bases de Git, la herramienta de control de versiones.
Puedes usarlo para despelgar cualquier tipo de aplicacion Frontend creada con frameworks, ya que estos al final producen archivos estaticos. Tambien te permite colocar un dominio personalizado añádiendo un archivo CNAME en el repositorio.
Documentacioen de muchos herramientas como React, Electron o Bootstrap por ejemplo estan desplegados aqui.
Ahora Basicamente para subir tus proyectos solo tienes que crear una rama mas en tu proyecto llamada gh-pages que aloje los archivos que seran subidos y a partir de alli todo lo que subas a esa rama actualizara tu sitio web.
Aunque para no configurarlo desde cero, en lo personal me gusta usar un paquete de npm, muy util llamado tambien gh-pages, que permite subir con un solo comando tus sitios.
Y Este Hosting es mas para proyectos Open Source o para proyectos de pruebas con que no tengas problemas que sean publicos, es decir que todo el mundo pueda ver el codigo del sitio, asi que si este es tu caso usalo sin problemas, pero si quieres usarlo para desplegar un proyecto de Frontend de un negocio, debes saber que el codigo va a ser publico, ya que Github pages es gratis solo esta disponible publicamente, o te permite tener codigo privado y github pages solo si pagas por Github.
Y finalmente si buscas opciones similares a Github Pages, debes saber que los competidores de Github como lo son Gitlab y Bitbucket, tambien tienen servicios para que puedas desplegar tus archivos estaticos, asi que puedes probarlos tambien:
Cloudflare Pages
CloudFlare es uno de los servicios Proxys mas importantes de la web, practicamente la mayoria de proyectos importantes como redes sociales, y plataformas web lo usan a la fecha. Aunque como estamos hablando de despliegues de archivos estaticos, debemos saber que CloudFlare tambien tiene su propio servicios de Hosting de Archivos llamados CloudFlare Pages
Que es algo similar a Github Pages, solo que este si es para desplegar cualquier tipo de proyectos desde privados hasta publicos, el despliegue es bastante rapido, y se integra muy bien con aplicaciones web Frameworks de Javascript, porque tambien tiene un servicio llamado Functions Pages, que permite subir porciones de codigo de backend para que puedas tener logica de servidor, es decir este es su servicio Serverless.
Cloudflare aprovechará su principal ventaja que es su infraestructura gigange, para ofrecer planes de alojamiento bastante generosos, siendo el primero de ellos de nivel gratuito, donde puedes tener peticiones ilimitadas, ancho de banda ilimitado, y puedes crear proyectos de forma ilimitada, aunque solo puedes hacer build de uno a la vez, asi que si quieres construir varios al mismo tiempo tiene un plan PRO de 20$, aunque si eres un solo desarrollador, el plan basico es mas que suficiente.
Surge.sh
De todos los servicios que te he mencionado y voy a mencionar en este video creo que Surge.sh es el mas sencillo de todos, tanto asi que solo necesitas ejecutar dos comandos para desplegar tu sitio estatico.
El primero es ejecutar el comando en consola:
npm install -g surge
y el siguiente ubicado en tu proyecto, ejecutar:
surge
Y listo tu sitio web estara desplegado instantaneamente.
tambien añadirle un dominio usando tambien un comando de terminal:
surge --domain tudominio.com
echo tudominio.com > CNAME
Este sitio tambien ofrece una cuenta PRO en donde permite añadir configuraciones de CORS, redirecciones o SSL Personalizado, pero el problema es que el sitio parece que no le dan mantenimiento desde hace bastante tiempo, asi que encontraras enlaces caidos, y Documentacion muy simple, asi que esto ya da un mal indicio como para empezar a pagar por el. Asi que si vas a crear algo de prueba usalo porque es Gratis, pero si necesitas un hosting para proyectos serios ve por las otras opciones.
Más Opcioens
Y bueno estos no son los unicos, otros servicios similares son:
- Gatsby Cloud, que este solo esta enfocado a desplegar sitios en Gatsby, un framework de react
- static.app, un servicio que tambien custa 5$ el despliegue
y asi.
Aqui hasta aqui tenemos Hostings que estan enfocados netamente a desplegar sitios estaticos, pero como estos archivos osn muy simples de desplegar realmente hay muchas mas opciones.
Por ejemplo si tienen un Hosting compartido, incluso puedes subir alli tus proyectos de frontend, sobre todo si es una aplicacion interna o algo para muy pocos usuarios esto funciona relativamente bien.
Pero si lo tuyo es crear una web muy rapida, accesible desde cualquier lugar al instante, tambien estan los servicios que ofrecen CDNs, es decir suben tus archivos y los guardan en memoria cache para que la siguiente vez carguen muy rapido, y esto viene por parte delos Servicios de almacenajes de archivo en la nube como:
- Google Cloud Storage
- Amazon S3
- Azure Static Web Apps
los cuales tambien puedes usarlo apra desplegar tus sitios web estaticos.
o Plataformas como:
- Render.com
- Railway.com
- Vercel.com
- Digitalocean App Platform
- Deno Deploy
tambien permiten que subas tus sitios estaticos, sin embargo si vas a desarollar un sitio netamente estatico, no necesitas estos servicios que son mas costosos, ya que estos ultimos estan mas enfocados en desplegar aplicaciones, claro si tienes tu backend deslegados en uno de estos servicios puede que quieras tener tambien alli tu frontend, pero si solo eres un desarrollador front es mas facil usar los que te he mencionado al ser puramente enfocado en este tipo de profesionales.
Conclusion
En fin, como puedes ver hay muchas opciones para poder subir gratuitamente sitios web estaticos. Aunque si tambien quieres saber de otras opciones para subir sitios dinamicos, ya he creado un video en el pasado, acerca de alternativas a heroku que dejare en la descripcion.
Lo ideal es que si vas a buscar un hosting para tus proyectos evalues si vas a desplegar muchos proyectos o solo uno por ejemplo si es para tu propio negocio, o si vas a crear un proyecto open sources como pudiste ver hay opciones gratuitas por lo que no es necesario pagar, y si lo tuyo es tener una empresa de desarrollo con 20$ en promedio puedes tener todas tus aplicaciones en un solo hosting, y con interfaces simples sin necesidad de estar administradolos tu mismo en un VPS o un CPanel.
Al final dejo las opciones alli, asi que ve a sus sitios de cada uno y evalua que es lo que mas te convenga.