Opciones para hacerte tu propia web

Mañana Martes vamos a estar colaborando con la Comunidad de Españoles Científicos en USA (ECUSA) dando un tallercito sobre cómo hacerte tu propia web. Será en inglés, lo único, hay info sobre cómo apuntarse en su publicación de Linkedin. Será un primer acercamiento al mundo de la web, o así lo hemos planteado al menos, con opciones sencillas y básicas para que toda persona que quiera pueda hacerse su propia web.

Para montarlo he estado probando y revisando más de una docena de programas, sistemas, servicios todo-en-uno, etc, y he pensado que podría ser útil hacer una recopilación aquí.

A veces las cosas que no conocemos nos dan más miedo del que debieran, y con la web pasa lo mismo. Mucha gente se pierde en terminologías frikis de sistemas, servidores, lenguajes y herramientas y llega a no plantearse como una opción el hacerse su propia web.

Simplificando mucho, una web es texto en un formato especial que, una vez recibido por nuestro navegador, se interpreta para pintarlo como lo ves. Puedes ver un ejemplo muy básico en la web de w3school. Ese texto puede estar en un fichero en tu ordenador (normalmente en una extensión .html o .htm) o, lo más habitual, en otra máquina de internet.

Como veréis hacia el final, un modo muy sencillo de jugar, probar y aprender, es descargarse una plantilla estática en tu ordenador e ir probando a cambiar cosas y ver cómo se ven.

Vamos a seguir un recorrido de menor interacción con esos ficheros que forman la página a mayor interacción.

Aparte de la web en sí misma, necesitas una máquina que sirva ese contenido a la gente que visita la página (de ahí el nombre de servidor).

Si no quieres andar con la doble preocupación, hay varias opciones de webs como servicio, todo en uno, webflow, wix, unbounce, squarespace, shopify (para comercio electrónico), carrd.

De todo esto, para páginas simples, carrd es una maravilla, muy sencillito de usar, gratis en el plan básico y con una dirección tunombre.carrd.co y luego los planes de pago empiezan en 9$ al año. En su página sincodigo.io, Bosco Soler enseña en un vídeo de media hora a cómo montarte un sistema de preventa para pequeños negocios, con Carrd y Stripe, muy útil para el momento que estamos viviendo.

Para tiendas online Shopify es un referente, hay muchas marcas conocidas a nivel nacional que es lo que usan (la gente de Minimalism, por ejemplo) y te permite centrarte en todo lo que rodea a una tienda online y no es la web (que es mucho).

La principal desventaja de lo comentado arriba, aparte del precio (aunque aquí, como siempre, habría que ver comparación entre pagar por ello y el tiempo de aprenderlo y hacértelo tú), es que si el día de mañana quisieras llevar esa web a otro sitio, no se puede (o no es trivial, depende del caso). Son sistemas todo en uno y, una vez se entra, es difícil salir.

El siguiente paso sería usar un CMS (Content Management System o Sistema para la Gestión de Contenido). Un CMS es un programa que te permite pensar en forma de contenido, artículos de un blog, por ejemplo, y luego traduce todo eso a la página que visualiza la gente. Esa traducción la hace usando una plantilla o tema, de tal modo que el mismo contenido puede pintarlo de formas muy diferentes.

El más usado en el mundo es WordPress, pero hay infinidad, como Ghost, que es el que usamos para este blog. Estos dos son gratuitos, los hay de pago. Lo que no suele ser gratuito es donde alojarlo (la máquina de la que hablábamos antes).

WordPress lo puedes descargar desde su web e instalarlo en un ordenador tuyo o al que tengas acceso, usarlo a través de multitud de compañías de alojamiento web que lo ofrecen pre-instalado  (Siteground, easywp, etc) o incluso usarlo como servicio en Wordpress.com (igual que el resto de servicios del apartado anterior). Este último es gratuito en el plan básico y ofrece direcciones tunombre.wordpress.com, es perfecto para familiarizarse con el sistema.

Si vas a la página de descarga de WordPress, verás que necesitas PHP, MySQL o compatible y que recomiendan Apache o Nginx como servidores web. Suena a muchas cosas, para haber dicho antes que una web era texto con un formato especial.

Como dijimos, el CMS interpreta el contenido y prepara la web que la gente visualiza. Ese contenido se guarda en una base de datos (otro programa, MySQL en el caso de WordPress) y ese ir a buscar el contenido y crear la página, lo hace el programa (programado en PHP en el caso de WordPress), de ahí que se necesiten estas cosas.

Tanto si estás en una situación en la que no puedes instalar cosas en la maquina que servirá tu web (quieres una página para un departamento de una universidad, por ejemplo, y no tienes acceso a instalar cosas en el servidor) o, simplemente, no quieres, quieres probar algo más sencillo o no quieres tener que lidiar con posibles problemas de seguridad, etc (como al CMS se puede acceder para editar y gestionar el contenido, suelen ser foco de problemas si no se protegen bien).

Existen multitud de plantillas gratuitas, estáticas (no necesitas ningún programa especial en el servidor), que solo tienes que editar, cambiar con tu estilo, para funcionar. Pongo por aquí algunos ejemplos: colorlib,  myresponsee, bootstrap. Puedes probar a descargar una de ellas y abrirla directamente desde tu ordenador, verás que se ven y funcionan perfectamente.

Si lo que pensabas hacer era algo tipo blog, o una página que va a estar cambiando a menudo, y preferirías no tener que instalar nada especial en el servidor (u optar a alojarlo gratis, como luego enseñaré), puedes probar los generadores estáticos de webs, que empiezan a estar de moda. Uno de los primeros fue Jekyll, aunque mi preferido es Hugo (hay decenas, cada vez más). Todos son programas que, a partir de un contenido en ficheros de configuración y texto, generan la web estática.

Si, la diferencia es que un CMS (WordPress, Ghost), es un programa que está en el servidor sin hacer nada, hasta que llega alguien, pide una página, entonces el CMS busca en la base de datos (otro programa) el contenido para esa página y genera la página en función de la plantilla que sea, en ese momento. Es decir, todo ocurre en el servidor en el momento en que alguien pide la pagina.

Un generador estático de páginas, como Hugo, es un programa que te descargas en tu ordenador, el contenido lo busca en ficheros de texto en tu ordenador y genera la página estática en tu ordenador, basado en un tema o plantilla que hayas descargado previamente. Luego, esa página habrá que copiarla al servidor en el que se quiera mostrar, pero una vez copiada, es la misma todo el rato hasta que se vuelve a generar una nueva (en tu ordenador) y la vuelves a copiar.

Aprovecho esta última parte de los generadores estáticos de páginas y las plantillas, para dar una opción de alojar páginas estáticas de forma gratuita, incluso con tu propio dominio. Hay varias (Github Pages, Firebase, Netlify), pero por facilidad de uso voy a recomendar Netlify. Puedes arrastrar tu carpeta con tu web estática (o conectar un proyecto de Github) y te creará una dirección loquesea.netlify.app y luego podrás o bien usar esa o apuntar allí un dominio que tengas comprado (las instrucciones son bastante sencillas de usar).

En el último caso que comentaba del generador estático de webs, si no quieres andar copiando siempre al servidor, usando Netlify puedes tener el proyecto de Github sincronizado en tu ordenador y, cada vez que publiques una versión nueva de la página, se suba automágicamente.

Podría seguir escribiendo largo y tendido del tema, pero creo que como primera aproximación es suficiente, cualquier duda, pregunta, sugerencia, como siempre será bienvenida, tanto en nuestras redes sociales como escribiéndonos un correo a hola@softspring.es 🙂