Taller de edición y creación de webs estáticas con Hugo

rosa.frama.io/diapos/taller_web

rosa.frama.io/teknokasa

Aprender a crear y editar webs estáticas generadas con Hugo y alojadas en GitLab Pages

Índice

Teoría general

¿Cómo funciona Internet?
¿Qué es el desarrollo web?
Web estática VS Dinámica

Teoría específica

Hugo
Markdown
Git y GitLab

Guías

Editando una web ya creada

Desde un navegador usando un:
- gestor de contenido
- editor de código con interfaz web
En local usando git

Guías

Creando una nueva web estática

Generación de una página web con Hugo
Despliegue con Gitlab Pages
Añadir un gestor de contenido a tu web estática

Teoría general

¿Cómo funciona Internet?

¿Qué es el desarrollo web?

<!DOCTYPE html>
<html>
    <head>
        <title>Mi página web</title>
    </head>
    <body>
        <h1>Hola , mundo!</h1>
        <p>Es mi primera web.</p>
        <p>Contiene un
             <strong>título principal</strong> y un <em> párrafo </em>.
        </p>
    </body>
</html>

body {
  background-color: lightblue;
}
title{
  text-align: center;
}
p {
  text-align: center;
  color: red;
}

ACAB

  <button onclick="document.getElementById('bombilla').src='../gifs/pic_bulbon.gif'">Enciende la luz</button>

  <img id="bombilla" src="../gifs/pic_bulboff.gif" style="width:100px">

  <button onclick="document.getElementById('bombilla').src='../gifs/pic_bulboff.gif'">Apaga la luz</button>

Qué se puede hacer con JavaScript?

JavaScript puede cambiar atributos del HTML

En este caso, JavaScript cambia el valor del atributo src (fuente) de una imagen.

Recogiendo lo anterior y como resumen básico de componentes necesarios hasta ahora:

La arquitectura cliente-servidor sigue siendo parte fundamental hoy en día de Internet.
Un cliente == navegador web
Los servidores web y los servidores de aplicaciones son las tecnologías que permiten el intercambio de datos y servicios a través de Internet. Cuando visita un sitio web o una aplicación, su navegador (como cliente) solicita datos de un servidor remoto y muestra la respuesta.
- Servidor web
  - es una tecnología que aloja el código y los datos de un sitio web
  - los servidores web ofrecen contenido estático, como texto, imágenes, videos y archivos. Los servidores de aplicaciones ofrecen contenido dinámico, como actualizaciones en tiempo real, información personalizada y atención al cliente.
- Servidor de aplicaciones
  - amplía las capacidades de un servidor web, pues admite la generación de contenido dinámico, la lógica de la aplicación y la integración con varios recursos
  - Proporciona y ejecuta programas. Estos incluyen servicios como autenticación, transacciones, directorios o bases de datos
Comentar que se ha desdibujado la línea entre los servidores web y los servidores de aplicaciones, sobre todo porque el navegador web ha surgido como el cliente de aplicaciones preferido

Web estática VS Dinámica

Web estáticas

Ventajas

Más ligeras
Más seguras
Infraestructura más simple y mejor rendimiento

Desventajas

Sin contenido personalizado a distintes usuaries
No ideales para webs con muchas actualizaciones o muchos datos

Web dinámicas

Ventajas

Experiencias personalizadas y únicas
Posibilidad de actualizar y cambiar el contenido automáticamente

Desventajas

Infraestructura más compleja
Costoso mantenimiento
Más vulnerables

Teoría específica

Hugo

Es un generador de páginas estáticas escrito en Go

Markdown

Es un lenguaje de marcado de texto y se usa como una forma sencilla de agregar formato a textos web

Git

Git es un sistema de control de versiones distribuido, rápido y escalable que permite gestionar y rastrear cambios en el código fuente de un proyecto

GitLab

GitLab es una plataforma de gestión de proyectos y control de versiones que utiliza el sistema de control de versiones Git

Instancias de GitLab

Framagit.org es una instancia mantenida por Framasoft

0xacab.org es una instancia mantenida por Riseup

Gitlab.com es la instancia mantenida por Gitlab Inc

Framasoft es una asociación francesa sin ánimo de lucro dedicada a la promoción del software libre, la cultura libre y los servicios éticos en línea

Riseup es un colectivo que proporciona herramientas de comunicación online para gente y grupos que trabajan en un cambio social libertario

GitLab es una compañía de núcleo abierto y la principal proveedora del software GitLab

El modelo de núcleo abierto (open-core model) es un modelo de negocio para la monetización de software de código abierto producido comercialmente. Implica principalmente ofrecer una versión “básica” o con funciones limitadas de un producto de software como software gratuito y de código abierto, mientras que ofrece versiones “comerciales” o complementos como software propietario. Wikipedia, Modelo de núbleo abierto: https://es.wikipedia.org/wiki/Modelo_de_n%C3%BAcleo_abierto

GitLab CI / CD

Es herramienta que implementa las metodologías de integración, entrega e implementación continua con el objetivo de realizar actividades como el desarrollo, prueba y publicación de softwares

GitLab Pages

Es una funcionalidad del software de GitLab que permite el alojamiento de páginas estáticas gratuitamente y fácil de configurar y fácil de configurar.

Se encarga de compilar el código y publicar el resultado de páginas estáticas

Práctica I

Edición de una web con Decap CMS / Sveltia CMS

Práctica II

Edición de una web existente

Mediante la interfaz gráfica de GitLab
En local con línea de comandos

Requisitos:

Cuenta en la instancia de GitLab donde se aloja la página web
Conocimientos básicos de la sintaxis de Markdown y la estructura de directorios de Hugo

Guías para editar una web

Práctica III

Generación de una nueva web

Guía de cómo crear una página web con Hugo