Netlify for Chileans
¿Qué puedes hacer con un dominio y menos de media hora?
Ya que la gente popular como csslab usa Netlify, me decidí por darle un uso y hacer algo random. Así que de eso salió otra cosa que no spoilearé y me decidí en hacer una demo, por lo cómodo que es usar el servicio de Netlify. Pero por sobre todo que no pillé ningún ejemplo for dummies.
¿Qué es Netlify?
Un hosting para sitios estáticos ya sea en HTML, CSS, JS, Hugo, lo que querai y lo mejor de todo: es gratis. La versión de pago, permite una mejor distribución de roles y eso principalmente, así que si no te da cosa compartir una cuenta, estarás bien. Aunque trabajes con el free tier, los de soporte son súper amorosos.
Dentro de sus características, este permite continuous deployment mediante la integración con Github, Gitlab o Bitbucket.
Aunque simplemente puedes arrastrar una carpeta con un index.html y en un par de segundos, tener tu propio sitio bajo un subdominio en netlify.com.
Cosa de gustos.
Si posees tu propio dominio, Netlify te permite configurarlo y de paso incluye la integración de Let’s Encrypt que te entrega, de nuevo, gratis, el SSL. En caso de querer usar tu propio certificado, puedes hacerlo.
También permite ver previews de branches, poder aplicar rollbacks sobre el versionamiento que este te entrega, optimizar recursos y sobre todo: gratis.
TL;DR: “Net” + “Simplify” = “Netlify”
y es gratis.
Un ejemplo práctico
Ya que me gustó la primera iteración y es súper sencillo (excepto por las pequeñas sutilezas con Hugo, que implica leer la documentación). El proceso de levantar algo random, se puede dividir en:
- Dominio: decidir y comprar algún nombre rimbombante para el sitio.
- Diseño: a falta de skills de front-end, las plantillas no fallan.
- Netlify: se encarga de la mayor parte “pesada” y te hace la cama.
Dominio
Mi objetivo era simple, comprar un dominio barato para divertirme un par de minutos. Luego de un brainstorming sobre posibles nombres y una ardua búsqueda de 30 segundos, llegué a los siguientes resultados:
Plot twist: terminé comprando holi.technology. Aunque personalmente parrot.agency era mi favorito.
El proceso de compra es relativamente rápido y lo sería aún mas de no tener que sacar los adds para el dominio y el “lleve 2 años de dominio y pague 1,98 años”.
Diseño
<!DOCTYPE html>
<html>
<head>
<title>Basic Web Page</title>
</head>
<body>
Hello World!
</body>
</html>Para decorar el sitio de esta demo, era bastante valido usar un “Hello world!”, más cuando el objetivo es hacer algo funcional (feo, pero funcional). Pero sobretodo existe el deber de mantener el estilo e invocar Party Parrots.
Quería algo simple cercano a homerswebpage y googleando, encontré el Party Parrot Conga Cursor Trail — CodePen.
Para descargar o hacer el gist del Conga Cursor, debes estar registrado en CodePen.
Netlify
Pese a que una de las grandes gracias que tiene este sitio, es el continuous deployment, en favor del tiempo tenía dos opciones:
- Hacer el fork o importar el Conga Cursor a un repositorio Git y en base a eso definir los pasos necesarios para ejecutar el deploy.
- Descargar y arrastrar el repo a sites en Netlify.
Es lejos mucho mas simple y práctico usar la integración con Github sobretodo por el manejo de versiones. Pero quería destacar el que se puede arrastrar y subir de una.
Personalmente, encuentro divertido eso de arrastrar el repo, es como lanzar cosas a una licuadora y que salga un sitio funcional.
En general tutoriales como A step by step guide deploying on Netlify y en su mayoría hacen bastante hincapié en la parte de como ejecutar el build dependiendo de las necesidades, así que no se pierden de mucho.
Volviendo al sitio arrastrado, el súper deploy no tarda mas de unos segundos, creando un sitio con un amigable subdominio aleatorio.
Accedemos a ese link y veremos:
Custom domain ✅
Usar angry-saha-64bf4d.netlify.com es poco E N T E R P R I S E, hay que admitirlo. Pero lo bueno es que podemos configurar fácilmente el dominio comprado en GoDaddy, agregándolo desde custom domains:
Editamos la config:
Este nos pedirá actualizar los nameservers utilizados por GoDaddy.
Desde GoDaddy agregas los nameservers de Netlify y ya. Esperas un par de minutos y el dominio será manejado por Netlify DNS.
Falta otro elemento fundamental en algo tan serio como sitio para conga parrot, HTTPS. Esto se logra mediante Let’s Encrypt.
Al darle en Verify DNS configuration le agregará el certificado. Tarda un rato, pero no es mucho.
Ta Dah! ahora con HTTPS todo iba relativamente bien, hasta que noté que no mostraba el 🔒 y a este punto, ya me había resignado de encontrar la causa, pero gracias a Héctor Palma Téllez que se dio cuenta el sitio estaba llamando a las imágenes de Party Parrot con HTTP, lo que provocaba mixed content en el navegador, quitándole el 🔒 debido a la posible degradación de seguridad y calidad de servicio para los usuarios que quisiesen ver parrots.
Luego de modificar las URLs a HTTPS, la demo fue salvada.
En fin, aquí está: holi.technology
