Nueva versión del sitio web de OfiLibre con plantilla Hugo

Hemos renovado la web de la OfiLibre utilizando una plantilla moderna de Hugo llamada Navigator. Esta plantilla nos ha permitido mantener la esencia del sitio anterior, al tiempo que mejoramos el diseño, accesibilidad y rendimiento general. A continuación, detallamos paso a paso cómo lo hemos hecho.

Objetivo

Migrar el sitio antiguo de OfiLibre a una nueva plantilla de Hugo, conservando la estructura del contenido (menú, secciones, idioma) pero mejorando la usabilidad y estética.

Plantilla utilizada

La plantilla elegida ha sido navigator-hugo, que ofrece:

7+ páginas prediseñadas
Soporte multilenguaje (hemos añadido español e inglés)
Bootstrap integrado
Optimización de velocidad
Consentimiento GDPR
Formularios de contacto
Compatible con Google Analytics y Open Graph

Pasos realizados

1. Clonamos la plantilla

git clone git@github.com:gethugothemes/navigator-hugo.git
cd navigator-hugo
npm run project-setup
npm run dev

2. Adaptamos el menú de navegación

La plantilla original venía con un menú que no correspondía con nuestros contenidos. Entonces, lo sustituimos por las secciones del sitio anterior:

Inicio
Ofilibre
Acciones
Recursos, con Guías, Fichas, Presentaciones y más
Blog
Contacto

Además, añadimos un nuevo idioma, Inglés.

# Navbar Menus
[[nav]]
name = "ofilibre"
url = "ofilibre/"
weight = 2

[[nav]]
name = "acciones"
url = "acciones/"
weight = 3

[[nav]]
name = "recursos"
url = "recursos/"
weight = 4
hasChildren = true

  [[nav]]
  parent = "recursos"
  name = "Catálogo de materiales docentes libres"
  url = "catalogo/"
  weight = 1

  [[nav]]
  parent = "recursos"
  name = "Guías"
  url = "guias/"
  weight = 2

  [[nav]]
  parent = "recursos"
  name = "Fichas"
  url = "fichas/"
  weight = 3

  [[nav]]
  parent = "recursos"
  name = "Presentaciones"
  url = "pres"
  weight = 4

  [[nav]]
  parent = "recursos"
  name = "Código OfiLibre"
  url = "https://gitlab.etsit.urjc.es/ofilibre/code"
  weight = 5
  target = "_blank"

[[nav]]
name = "blog"
url = "blog/"
weight = 5

[[nav]]
name = "contacto"
url = "contacto/"
weight = 6

[[nav]]
name = "buscar"
url = "buscar/"
weight = 7

# Footer acciones Menu
[[acciones]]
name = "graphicdesign"
url = "acciones/"
weight = 1
[[acciones]]
name = "webdesign"
url = "acciones/"
weight = 2
[[acciones]]
name = "webdevelopment"
url = "acciones/"
weight = 3

# Footer Quick links Menu
[[quicklink]]
name = "partners"
url = "ofilibre/"
weight = 1
[[quicklink]]
name = "ofilibre"
url = "ofilibre/"
weight = 2
[[quicklink]]
name = "faqs"
url = "ofilibre/"
weight = 3
[[quicklink]]
name = "badges"
url = "ofilibre/"
weight = 4

3. Personalizamos la página principal

Modificamos la estructura de Home Page para mostrar la información más directa y accesible.

Reorganizamos las secciones visibles
Insertamos un video informativo al principio del todo
Aumentamos el contraste, tipografía y jerarquía visual
Optimizamos para SEO y rendimiento

4. Configuramos el soporte multilenguaje

Dentro del archivo config.toml, que es la configuración del sitio, definimos los dos idiomas disponibles. Se explica con más detalle en esta guía

[params]
showLanguageSwitcher = true
logo = "images/logos/banner-urjc.png"
menufixed = true
contacto_form_action = "sendmail.php"
listeLangues = [
  { code = "es" },
  { code = "en" }
]

# Idiomas
[languages]

Conclusión

Con esta migración hemos conseguido un sitio web más moderno y accesible, manteniendo la estructura y contenidos previos. Además, se ha añadido navegación multilingüe y se ha mejorado el rendimiento.

En caso de duda con el código, se puede consultar en este repositorio de gitlab.

Cambio de tema en un sitio web desarrollado con Hugo