Aloja tus sitios web estáticos con Surge
En mi empeño (que roza el fetichismo), por buscar soluciones de alojamiento para sitios web estáticos, me encontré con surge.sh, una plataforma que promete subir tu sitio web, ejecutando únicamente un comando ¿Será así? Vamos a averiguarlo.
¿Qué es surge?
Surge es una plataforma dedicada a la publicación de sitios web estáticos, pero con una «impronta» que es el componente que la diferencia de casi todas las plataformas de este tipo: surge está pensada para ser utilizada desde la línea de comandos.
Esta premisa puede ser una buena noticia, o no, depende de que tanto te guste hacerte el hacker y usar la consola.
En mi caso, me quedó una frase que me dijo un profesor: «usuario con ratón, usuario chambón». Desde entonces…
Cómo subir un sitio estático en Surge
Para empezar, es necesario tener instalado Node.js. Una vez instalado, hay que usar el gestor de paquetes npm:
npm install --global surge
Para hacer la prueba, voy a utilizar un sencillo sitio web desarrollado con el CMS Publii.
Lo primero que tenemos que hacer es posicionarnos en el directorio que tiene el sitio, y luego ejecutar el comando: surge.
La primera vez que ejecutas ese comando, te va a pedir una dirección de correo electrónico y una contraseña.
Esta es la única forma de crear tu cuenta en Surge, dado que no hay ningún tipo de interfaz gráfica para gestionar los datos de tu cuenta.
Ahora que tenemos el usuario, es necesario indicar la ruta al directorio que contiene nuestro sitio web con todos sus archivos (HTML, JavaScript, CSS, imágenes, etc.).
El siguiente paso es establecer el nombre de nuestro sitio. Por defecto, los sitios quedan bajo un subdominio del Surge: NOMBRE.surge.sh. Más adelante, vamos a ver cómo podés agregar tus propios dominios, por el momento, ponemos un nombre y presionamos Enter.
¡Listo! El sitio quedó alojado en los servidores de Surge: collages.surge.sh
Guardando el nombre del dominio
Luego de subir varias veces el sitio, vas a notar que siempre te pide que ingreses el nombre del dominio. Para evitar esto, que es un poco molesto, tenemos dos opciones, a saber: pasarle el dominio en el comando o guardar un archivo con el nombre del dominio. Exploremos ambas opciones.
Pasar el nombre del dominio
Esta opción consiste simplemente en pasar el nombre del dominio como parámetro, algo así:
surge --domain collages.surge.sh
Crear un archivo CNAME
Si no queremos pasar el dominio en la invocación de Surge, podemos crear un archivo que contiene una sola línea: el nombre del dominio.
Este archivo tiene que vivir en el directorio raíz de nuestro proyecto, llamarse CNAME y no tener extensión.
Agregando un dominio personalizado
Surge te permite, en su plan gratuito, asignar tus dominios a los sitios. Para eso, es necesario agregar un par de registros en el DNS a través de la página de tu proveedor de dominios.
A modo de ejemplo, vamos a asignar un dominio que se encuentra en NameCheap.
Ingresamos a Advance DNS, y agregamos los siguientes registros del tipo CNAME:
- CNAME | @ | na-west1.surge.sh
- CNAME | www | na-west1.surge.sh
La documentación de Surge también nos dice que, agregando el siguiente registro, vamos a poder usar subdominios de nuestro propio dominio:
- CNAME | * | na-west1.surge.sh
«Custom domains are pretty important—so you can add yours for free, to any project published on Surge.» Eso te dicen ellos… tienen razón.
Agregar página 404
Por defecto, Surge muestra una página para el código de estado 404 del protocolo HTTP (el «famoso» Not Found).
Podés fácilmente crear tu propia página 404.html y guardarla en el directorio raíz de tu proyecto, para que Surge comience a utilizarla.
En el caso de Publii (al igual que lo hacen otros generados de sitios estáticos, como Jekyll, por ejemplo), genera automáticamente el archivo 404.html.
Algunos comandos útiles
Como la experiencia de usar Surge se basa 100 % en comandos, te dejo acá algunos de ellos, que seguro los vas a necesitar en algún momento.
Listar proyectos
Surge admite multi-proyectos. Por ese motivo, tiene un comando creado especificamente para listar todos tus proyectos:
surge list
Eliminar proyectos
Si en algún momento queres eliminar un proyecto, lo podés hacer; obviamente, a través de la consola ô¿ô:
Lo primero, es verificar que estamos utilizando la última versión disponible de Surge (que al momento de escribir esto es la 0.23.1)
npm install --global surge
Posteriormente ejecutamos:
surge teardown TUDOMINIO.surge.sh
Ignorar directos y archivos
Al igual que Git con su archivo .gitignore, Surge te permite especificar que directorios y archivos queres ignorar durante el despliegue de tu sitio.
Para lograr esto, hay que crear un archivo llamado .surgeignore en el directorio raíz de tu proyecto.
Por ejemplo, si tu proyecto se encuentra en un repositorio Git, es una buena idea excluir lo siguiente:
.git
.*
*.*~
node_modules
bower_components
💡 Podés anular que se ignore un archivo, escribiendo el signo de exclamación delante. Por ejemplo, para evitar que se ignore el directorio psd, agrega lo siguiente: !psd/
URL limpias por defecto
Una URL «limpia» es un concepto sencillo de entender:
- URL «sucia»: socronewton-el-sabio-de-dos-mundos.html
- URL «limpia»: socronewton-el-sabio-de-dos-mundos
La extensión (.html en nuestro ejemplo), «ensucia» la URL.
Surge puede redirigir, de forma automática, las URLs limpias a las URLs sucias. En nuestro ejemplo: https://collages.surge.sh/socronewton-el-sabio-de-dos-mundos muestra el contenido de https://collages.surge.sh/socronewton-el-sabio-de-dos-mundos.html. Así de simple.
✋ Las URLs «limpias» son mucho más que un simple detalle estético. Te lo cuento acá 👉 ¿Qué son las URLs limpias?
Agregando colaboradores
Una opción interesante de Surge, es la posibilidad de agregar colaboradores a tu proyecto. Para eso, ejecuta el siguiente comando:
surge --add correo@mail.com
El destinatario recibe un correo avisándole, en donde deberá presionar el botón «Claim your invite» para proceder a aceptar la invitación.
💡 Podés agregar multiples colaboradores, separando cada email con una coma: surge --add fulano@example.com,mengano@example.com
La versión plus de Surge
En este artículo, vimos cómo funciona la versión gratuita de Surge, pero también tienen una versión paga denominada Plus.
La versión Plus agrega las siguientes funcionalidades:
- Proteger su dominio personalizado con SSL.
- Forzar a HTTP a redirigir a HTTPS de forma predeterminada.
- Agregar protección con contraseña en un sitio.
- Habilitar CORS.
- Agregar redirecciones personalizadas.
Podés ver el precio del plan Plus en la siguiente página 👉https://surge.sh/pricing
El veredicto final
Al igual que hice con otras plataformas similares (tiiny.host y Kinsta), me parece interesante terminar con una especie de evaluación, desde la perspectiva de alguien que desarrolla sitios web estáticos y los aloja en diferentes plataformas.
Qué me gusto de Surge
El aprendizaje es rápido, y más si te gusta trabajar en la consola (¡viva cmder!).
Los comandos son pocos, y por ello, sencillos de recordar. Todo, absolutamente todo, se puede gestionar utilizando únicamente la consola; y en ocasiones se agradece no tener que lidiar con interfaces gráficas entreveradas.
En cuanto a las funcionalidades que provee la versión gratuita. No encontré muchas referencias. En la página de precios, simplemente mencionan que ofrecen:
- Publicación ilimitada.
- Dominio personalizado.
- SSL básico.
No hay referencias a la cantidad de sitios que se puedan desplegar, limitaciones en el ancho de banda, o cuantos dominios podés agregar.
Por otro lado, y a diferencia de algunas plataformas (como es el caso de tiiny.host), no incluyen ningún banner de marca en tus sitios, diciendo que estás utilizando el plan gratuito de Surge; lo cual se agradece.
Otro aspecto que me pareció de utilidad, es la posibilidad de incluir colaboradores, lo que lo hace ideal para proyectos colectivos.
Qué no me gustó
En realidad, podría usar perfectamente la versión gratuita para desplegar, por ejemplo, este blog que estás leyendo (actualmente alojado en Netlify); eso quiere decir, que me parece un servicio muy competente, pero... no sé que tan «vivo» está el proyecto.
Es difícil guiarse por los criterios que voy a utilizar a continuación, pero son los elementos a los cuales tengo acceso en este momento.
La cuenta de twitter (sí, sí, ahora es X), tiene muy poco movimiento. El último tweet es del año 2022 👇
El chat que se encuentra en el sitio de Surge, no está disponible: https://surge.sh/help/chat
El último artículo que fue publicado en la cuenta de Medium de Surge, es del año 2016 👇
Estos elementos, me dicen que, o bien el proyecto alcanzó un nivel de madurez tal que «funciona solo» y no necesita nuevas funcionalidades y/o comunicaciones por parte del equipo de desarrollo, o Surge pasó a ser un proyecto secundario para la empresa, y no tienen planeado invertir más tiempo en él.
No lo sé, son especulaciones, pero es algo a tener en cuenta si vas a confiar en que Surge sea tu proveedor de alojamiento.
¿Quién está detrás del proyecto?
Según lo que dice los Términos de uso de la palataforma, Surge fue creado por la empresa Chloi Inc.
Esta empresa, fue fundada en 2012 por Brock Whitten y Rob Ellis. Ellos son los creadores, nada más y nada menos, que del proyecto Apache Cordova / PhoneGap en el ya lejano 2008.
Han colaborado en muchos otros proyectos influyentes de código abierto, trabajaron en la primera plataforma para alojar aplicaciones Node.js en Joyent y son alumnos del programa WebFWD de Mozilla.
La página de la empresa, tampoco parece estar muy al día: http://chloi.io/about, pero tienen una linda foto del equipo:
En fin. Independientemente del si el equipo de Chloi Inc sigue activo o no, sin duda se agradece que hayan creado Surge.sh y que aún se encuentre funcional. ¡Gracias, muchachos!
/ Súmate al boletín. No es gran cosa, pero es gratis 👇 /