Github Pages, o cómo no pagar servidores chafas para alojar tu sitio web

Así como era de vital importancia tener algún apartado dentro de la Sección Amarilla, la web, en su omnipresente poder, vendría fungiendo como el directorio unánime al que toda persona que busque darse a conocer al exterior debería usar en todo su potencial. Ésto es con un sitio web. Si eres ilustrador, animador, poeta, escritor, músico, programador, freelancer o algún tipo de artista en general, tener un sitio donde mostrar tu trabajo es indispensable.

Hay varias maneras de tener un sitio web hoy en día. De hecho, maneras sumamente sencillas que automatizan el trabajo por ti. Pero el automatizar es mecánico, genérico, aburrido. Darle click a algo y que mediante algoritmos sumamente complejos te de algo personalizado es, si bien rápido, parcialmente tuyo. Existe una plétora de plantillas que puedes tomar y voilá, tu súper sitio web listo para ser ignorado.

En lo personal, intenté con varios servidores de alojamiento, pero resultó que todos son mierda y caros, además de innecesariamente confusos de administrar. Por éso decidí hacer todo yo desde cero.

Si eres un purista como yo y odias ser como los demás, aquí te explico cómo podrás:

  1. Usar un sitio de alojamiento gratuito (en este caso Github Pages).
  2. Aprender Git (con 3 simples comandos que todo bebé puede aprender).
  3. Comprar un dominio personalizado.

Bueno, let’s start.

Óscar A. Montiel Animanoir GitHub

Sitio de alojamiento gratuito

Existen varios sitios que te permiten alojar tu sitio web de manera gratuita, entre ellos: Firebase de Google, Tumblr, Wix, Cargo Collective. Sin embargo, como había mencionado ya, realmente detesto la sobrecomplicación. Uno sólo quiere meter y sacar, y ya; la burocracia que muchas veces tiran encima tendrá su significado y beneficio, pero la cuestión aquí es tener algo listo para mostrar as soon as possible. Además, siendo gratuitos (en cursiva) quiere decir que tendrás varias restricciones que, a la larga, te convencerán de pagar por el servicio premium, lo cual está bien, claro, pero puedes ahorrarte mucho dinero si conoces más alternativas. Aunando, para un sitio estático, éstas suelen estar sobrecalificadas. ¿Para qué pagar por algo que ni usarás realmente?

Por ello, tras conocer el anuncio de GitHub Pages, decidí darle una oportunidad, y hasta ahora me ha funcionado de maravilla. La cuestión con GitHub Pages es que debes tener cierta familiaridad con GitHub en general. Para aquellos que no lo conozcan, GitHub es un repositorio de texto/código en línea. Algo así como un tipo de almacenamiento virtualmente ilimitado para el código fuente de software. Programadores profesionales son los que más lo utilizan ya que está basado en el sistema de versionado Git. Sistema de versionado es, en pocas palabras, un ctrl-z sofisticado.

Si eres programador, hazte el favor de aprender de una maldita vez Git.

Si alguna vez tomaste clases de diseño web, recordarás que, para armar una, requieres por lo menos 2 archivos: index.html y style.css.


index.html

Este archivo vendría siendo la primer página que accederá una persona a la hora de ingresar a tu sitio. Ésto es un estándar. De facto. Imagina que es un tipo esqueleto de tu fetito de sitio web.

style.css

Este archivo son las reglas donde podrás establecer la apariencia de tu index.html. Con apariencia me refiero a colores, fuente, fondos, etc. No es necesario, realmente, así como no es necesario que tengas piel, capicci ¿?


Cabe aclarar que HTML/CSS no son lenguajes de programación. Diseñar una página web no es programar. Éso vendría siendo el frontend y backend. Tras haber estructurado tu index.html y añadirle estilo por medio de style.css ya tienes tu sitio web. ¡Enhorabuena! Pero el quid de este post es evitar el uso de servidores de cuestionable calidad (yo no confío en cocodrilos).

Lo que hace para mí tan bueno GitHub Pages es la completa ausencia de su asistencia. Casi todo te lo dejan a ti, control casi absoluto. Y es que GitHub no es una compañía dedicada a alojar sitios web, pero te permiten y alienta a hacerlo. Y mucho más ahora que puedes tener tu dominio propio con un certificado de seguridad (y libre de costo). En jerga SEOtica, tener ésto (https) aumentará tu ranking en Google.

GitHub Pages tiene el tutorial básico para poder hacerlo.


Aprender Git en un 1 x 3 = 3 + 1 = 4

Óscar A. Montiel Animanoir Git Logo

Git, en lo personal, es una obra maestra en cuanto a ingeniería de software se refiere. Un programa cuya utlidad es inmesurable, y su facilidad increíble. Su papá es Linus Torvalds.

Me sorprende en demasía conocer personas que se denominan así mismos “artesanos del código”, pero no tienen una puta idea de qué es git y cómo usarlo. Es como llamarse así mismos Dr. en neurocirugía cuando no saben ni diagnosticar una gripe.

Arriba en el post linkeé hacia un tutorial bastante simple y ameno para poder utilizar Git. Yo realmente sólo llego a usar tres comandos básicos, aunando el inicializador (git init) en mi carpeta:

  1. git add .
  2. git commit -m “descripción de cambios”
  3. git push origin master

Mi modus operandi es el siguiente, usando la consola de comandos (el famoso cmd):

  1. git init en la carpeta donde quiera usar git.
  2. git add . para añadir todos los archivos que tengo dentro de esa carpeta al índice de git (digamos que quiero subir mi página a GitHub, tendría en ese caso un .html y un .css)
  3. Modifico mis archivos (añado, modifico, quito líneas de código).
  4. git commit -m “mensaje descriptivo de los cambios”, aquí añado como un registro único (con un nombre críptico cómo 26fc5f5f716f9fdf1fa312d3422968806df5b4c0 que se genera automáticamente) los cambios que hice al programa en general.

Ahora, para subir los cambios a GitHub, debes linkearlo por medio del link que ellos mismos te proporcionan desde tu repositorio y usar el comando mágico:

git add remote origin (link de tu repositorio en GitHub)

Probablemente te pedirá tus credenciales de acceso. Una vez que accedas, podrás visitar tu sitio vía

(tu nombre de usuario)/github.io

¡Tarán! Tu sitio web libre de costo :~)… Pero, las apariencias importan tanto como el tamaño. ¿Acaso no os buscáis un dominio personalizado?


Dominio personalizado

Las apariencias han importado desde el comienzo de la vanidad (hace aproximadamente unos 10,000 años). La primera impresión es la que más cuenta; el primer atisbo que define lo que las otras personas codificarán dentro de sus mentes acerca de uno. Si conoces alguien mientras apestas a pun, te conocerán como ‘la persona que lee ésto, la que huele a pun’. Nunca falla. Manipulación pura.

GitHub Pages te regala por default un dominio que termina en github.io, el cual se ve cool, es cierto. El siguiente paso es crearte uno completamente tuyo.

Recuerdo cuando los dominios .com costaban caro. Hoy en día son los más baratos, por éso el mío termina en .com. La primera vez que compré uno fue con Namecheap, el cual me dio buenos resultados, o sea, nunca me falló. Pero regresé con mi ex de toda la vida, Google, cuando sacó su servicio Google Domains. Siendo de Google, es de fiar, pero lo mejor de todo era la posibilidad de tener fácilmente un correo personalizado gratuitamente. O sea, que en vez de que sea @gmail, @hotmail, sea @tudominio.com. Por éso lo transferí a Google sin dudar.

Una vez que compraste o transferiste tu dominio, tienes que añadir un archivo llamado CNAME a tu carpeta de tu página y subirlo a GitHub. Dentro de CNAME escribirías simplemente el nombre que adquiriste.

Tras ello, debes configurar los servidores a los que redirigue ese dominio. Es la parte más culebrona al principio, pero es simplemente copiar y pegar ciertas IPs desde tu cuenta de Google Domains. La guía de GitHub explica cómo hacerlo.


¡Y listo! Tras seguir estos pasos, ya tendrás un sitio web sin pagar servidores chafas y abusivos con un dominio personalizado.

Cualquier duda o sugerencia es bienvenida.