Tabla de contenidos
Sitios estáticos vs dinámicos
¿cuál es la diferencia entre un sitio web estático y un sitio web dinámico?
Son sitios web dinámicos aquellos que permiten al usuario: iniciar sesión; comprar en un e-commerce (acceso al stock del producto, transacción, …); publicar un comentario;… y en general cualquier acción que requiera la interacción con una base de datos.
Un sitio web estático solo contiene HTML, CSS y JavaScript, por lo que solo existe frontend, y no hay tecnologías de servidor como Python o PHP.
Las páginas dinámicas interactúan con el usuario, y se generan dinámicamente en función de las peticiones de este.
Los sitios web dinámicos han mejorado enormemente la experiencia de usuario desde su aparición. La inclusión de las bases de datos y los lenguajes del lado del servidor (PHP, Python, Node) Han permitido realizar consultas sobre datos que por su naturaleza deben estar en una base de datos:
- Ordenación y filtrado. el usuario puede solicitar los posts más recientes, de una fecha concreta, más populares, de la temática que le interesa (P. ej. Medicina, Economía, Política, …);
- El horario de un transporte público a partir de una consulta con fecha y con ubicación origen-destino.
- Reservar una pista de tenis, un vuelo, un hotel, … para una fecha y hora concretas, etc.
… y un largo etcétera.
Es difícil imaginar el poder ofrecer una experiencia adecuada sin la parte del lado del servido, en ocasiones imposible y, sin embargo, algunos generadores de sitios estáticos han proliferado y se han convertido en serias alternativas para muchos.
¿Por qué alguien querría entonces volver a los sitios estáticos, algo que parecía superado y obsoleto?
El principal motivo es la gran velocidad a la que pueden cargar las páginas estáticas. Por útiles que sean las páginas dinámicas, hay situaciones en las que el proyecto web que planeamos no las necesita. Y este es el escenario perfecto para aprovechar la velocidad y seguridad de un sitio estático.
Ventajas:
- Velocidad de carga de las páginas, ya que se suprimen las consultas a las bases de datos, costosas en recursos.
- Seguridad y rendimiento. Disminuye la probabilidad de que ocurran accesos no deseados, ya que no hay accesos a bases de datos.
- Control de versiones para los contenidos. Se puede gestionar la estructura de código de un blog en un repositorio de GitHub, y en cada entrada del blog.
Desventajas o limitaciones:
- No hay posible consulta ni escritura en base de datos, ni el uso de otro elemento que requiera el lado del servidor, como formularios.
- Las posibilidades de estos generadores de sitios estáticos tiene un límite, y no son adecuados para proyectos de gran envergadura.
Recursos
🌐 [tryolabs.com] Building our site: From Django & WordPress to a static generator. Se describe la migración de WordPress y Django a sitio web estático usando Hugo junto con Webpack, los motivos que les impulsan, y el análisis de varias herramientas.
🌐 [ionos.es] Otra descripción bastante completa sobre los generadores de sitios estáticos.
GitHub Pages
GitHub Pages es un servicio de GitHub, que permite alojar un sitio web estático directamente desde un repositorio en GitHub.com.
Esto significa que GitHub convertirá de Markdown a HTML y publicará nuestros documentos para que sean accesibles desde la web, todo ello automáticamente, creando así un auténtico sitio web.
- Dominio personalizado. Podemos enlazar nuestro propio dominio al sitio web creado con GitHub Pages, lo que permite crear y usar nuestra propia marca.
- Compatibilidad con HTTPS y certificado SSL. Sitios con conexiones seguras, que autentican la identidad de un sitio web y habilita una conexión cifrada con nuestro sitio web. Esto es a día de hoy prácticamente imprescindible para generar confianza en usuarios, pero también en motores de búsqueda.
- Compatibilidad con Jekyll, generador de sitios web estáticos), un generador de sitios web estáticos, descrito en el siguiente punto.
Sin embargo, GitHub Pages (igual que Jekyll) no es adecuado para sitios que requieren tecnología de servidor: un e-commerce, o sitios que implementan cualquiera de los ejemplos mencionados para páginas dinámicas.
El generador de sitios estáticos Jekyll
Introducción
Jekyll genera sitios web estáticos completos, ligeros y rápidos, a partir de archivos Markdown o HTML.
Viene con soporte integrado para GitHub Pages, permitiendo alojar un sitio web completo de forma gratuita.
Con una visión más simple que otros CMS como WordPress, Jekyll se ha convertido en una seria alternativa para la creación de sitios web. En este contexto, resulta ideal la combinación de Jekyll y Github Pages, debido a que este último compila automáticamente los sitios estáticos usando Jekyll, y proporciona hospedaje gratuito.
El uso de un sitio estático implica la ausencia de bases de datos. Aparte de las ya mencionadas ventajas y desventajas de cualquier otro generador estático, cabría destacar en cuanto a Jekyll lo descrito en los siguientes títulos.
Ventajas
- Fácil desarrollo, por su simplicidad en el código.
- Buena estabilidad y seguridad, debido a que el servidor web solo entrega archivos de texto.
- Posibilidad de instalarlo autoalojado, o en los servidores de GitHub, de forma gratuita.
El lenguaje de plantillas Liquid
Jekyll utiliza el lenguaje de plantillas Liquid para procesar las páginas y generar contenido basado en datos y plantillas.
Liquid es un lenguaje libre (open source) permite generar contenido a partir de datos almacenados en archivos YAML, JSON y CSV.
Liquid permite además crear variables, sentencias condicionales y bucles, lo que le otorga capacidad de generar páginas dinámicamente a partir de plantillas. Aquí el término dinámicamente, debe entenderse como «a partir de datos y plantillas», y no en el sentido de contenido dinámico que se actualiza en tiempo real desde un servidor, (recordemos que Jekyll es un generador de sitios estáticos).
Uso de Front Matter
Cada página o post en Jekyll puede tener un front matter en la parte superior del archivo, que almacena metadatos en formato YAML. Liquid puede acceder a estos metadatos para generar contenido.
Git, GitHub y GitHub Pages
GIT es el sistema de control de versiones (VCS) más popular que actualmente existe. Por otra parte, GitHub es una plataforma web para alojar repositorios Git, y constituye actualmente el más popular conjunto de herramientas para Git.
Relacionado
Creación de un sitio web con Jekyll y GitHub Pages
Aprenda a crear un sitio web estático, veloz como el viento, completamente suyo y de alojamiento gratuito con Jekyll y GitHub Pages
Markdown: Introducción, guía rápida y sintaxis
Una guía rápida para aprender el lenguaje de marcado Markdown: editores libres, sintaxis ¿Qué es y para qué sirve? ¿Por qué es tan importante, aun existiendo procesadores de texto potentes?
Deja una respuesta