Propuesta de web del hackmeeting implementada con hugo
Go to file
Ales (Shagi) Zabala Alava 226021a203
continuous-integration/drone/push Build is passing Details
Explicar la idea de la web en el readme
2021-11-09 13:01:56 +01:00
archetypes Proponer un sistema básico de necesidades 2021-09-19 13:15:38 +02:00
content Proponer un sistema básico de necesidades 2021-09-19 13:15:38 +02:00
layouts Corregir urls de ficheros estáticos para poder publicar la web en una carpeta en vez de en la raíz 2021-09-17 12:39:22 +02:00
static Corregir urls de ficheros estáticos para poder publicar la web en una carpeta en vez de en la raíz 2021-09-17 12:39:22 +02:00
.drone.yml Publicar la web automáticamente al hacer push a master 2021-09-19 11:53:40 +02:00
.gitignore Maquetación básica, pasamos de la theme, empezar a plantear la estructura del contenido 2021-09-16 13:28:31 +02:00
README.md Explicar la idea de la web en el readme 2021-11-09 13:01:56 +01:00
config.toml Maquetación básica, pasamos de la theme, empezar a plantear la estructura del contenido 2021-09-16 13:28:31 +02:00

README.md

Página web del hackmeeting

La principal ventaja de esta web con respecto a la que hay actualmente es que no necesita mantenimiento, mantiene la posibilidad de editar contenido por varias personas y simplifica el backup.

El flujo de trabajo típico para añadir contenido a la web sería este:

  1. Crear o editar un fichero en la carpeta content
  2. Comprobar en local que la modificación es correcta
  3. Hacer un commit con las modificaciones
  4. Subir el commit al repositorio de git
  5. Compilar la web
  6. Enviar los ficheros al servidor web.

Los pasos 5 y 6 se pueden automatizar con alguna herramienta de integración continua. En este ejemplo se usa drone.io. Para simplificar el resto de los pasos la idea es preparar scripts u otro tipo de programas, que ayuden a generar el contenido de manera más interactiva.

Este proceso puede ser demasiado complicado para personas sin experiencia en git o markdown, sobre todo las integrantes del grupo local, que además no conocen el funcionamiento de esta herramienta. Propongo instaurar el rol de "madrina(s) de grupo local", gente que se encargue de asistir al grupo local y en caso necesario de encargarse de subir los contenidos a la web.

Los datos que son más útiles para el grupo local se guardan en ficheros csv, que es fácil de modificar en una hoja de cálculo, y permite un postpropceso sencillo para obtener datos interesantes. Por ejemplo la cantidad de asistentes que hay apuntados para cenar el sábado.

Crear contenido

Para crear un nodo que se llame nodo1 para el 2019:

hugo new 2019/nodos/nodo1.md -k nodo

Para apuntarse como asistente:

hugo new 2019/asistencia/persona.md -k asistencia

Para crear una página corriente:

hugo new 2019/como-llegar.md

Para empezar un nuevo hackmeeting:

hugo new 2022 -k hm

Mini intro a Hugo

Para probar la web en local hay que instalarse hugo: https://gohugo.io/getting-started/installing/

Para poner en marcha la web en modo desarrollo:

hugo server -D

Para compilar la web ejecutar el comando hugo sin parámetros, luego basta con copiar el contenido de la carpeta public al servidor web.

Todo el contenido de la web está en la carpeta content.

Las plantillas para renderizar el contenido están en la carpeta layouts.

Las plantillas para generar contenido están en la carpeta archetypes.

Los ficheros estáticos están en la carpeta static, se copian tal cual a la carpeta public.

Más información: https://gohugo.io/documentation/

Estructura básica del contenido

Cada año creamos una carpeta nueva dentro de content, usando el archetypes hm. Esta carpeta tiene la página inicial, el manifiesto, el listado de nodos y la página de asistencia.

Shortcodes

Estos son los shortcodes definidos para el hackmeeting:

rawHTML

Renderiza el contenido del shortcode sin procesar, por lo que se puede meter html arbitrario.

Ejemplo:

{{< rawHTML >}}
<table>
    <tr><td>Una tabla</td></tr>
</table>
{{< /rawHTML >}}

csvTable

Renderiza un csv como una tabla HTML. Hay que pasarle dos parámetros, el path del csv relativo a la raíz del proyecto y la clase css que se le asignará a la tabla.

Hay que generar un fichero csv separado por comas.

Ejemplo, para un fichero `content/2019/nodos/parrilla_viernes.csv':

{{< csvTable file="/content/2019/nodos/parrilla_viernes.csv" class="parrilla" >}}