Aloja tus sitios web estáticos con Surge

Aloja tus sitios web estáticos con Surge

Cat ramen
Cat ramen Jamstack

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

Sitio web alojado en Surge.
Sitio web alojado en Surge.

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:

  1. CNAME | @ | na-west1.surge.sh
  2. 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.

Correo que recibe de parte de Surge. el destinatario de la invitación.
Correo que recibe de parte de Surge el destinatario de 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 chat de Surge no está disponible.
El chat de Surge no está disponible.

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:

El equipo de Chloi Inc, posando para una foto en algún café en ¿Vancouver?
El equipo de Chloi Inc, posando para una foto en algúna cafetería en ¿Vancouver?

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 👇 /