This is an automatic translation generated by artificial intelligence. May contain errors.

New version of OfiLibre website with Hugo template

We have renewed OfiLibre website using a modern Hugo template called Navigator. This template has allowed us to maintain the essence of the previous site while improving design, accessibility, and overall performance. Below, we detail step by step how we did it.

Objective

Migrate the old OfiLibre site to a new Hugo template, preserving the content structure (menu, sections, language) but improving usability and aesthetics.

Template used

The chosen template has been navigator-hugo, which offers:

7+ pre-designed pages
Multilingual support (we added Spanish and English)
Integrated Bootstrap
Speed optimization
GDPR consent
Contact forms
Compatible with Google Analytics and Open Graph

Steps taken

1. We cloned the template

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

The original template came with a menu that did not correspond to our content. So, we replaced it with the sections from the previous site:

Home
Ofilibre
Actions
Resources, with Guides, Sheets, Presentations and more
Blog
Contact

Additionally, we added a new language, English.

# 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 = "Catalog of free teaching materials"
  url = "catalogo/"
  weight = 1

  [[nav]]
  parent = "recursos"
  name = "Guides"
  url = "guias/"
  weight = 2

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

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

  [[nav]]
  parent = "recursos"
  name = "OfiLibre Code"
  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 = "search"
url = "buscar/"
weight = 7

# Footer actions 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. We customized the home page

We modified the Home Page structure to display information more directly and accessibly.

We reorganized the visible sections
We inserted an informational video at the very beginning
We increased contrast, typography and visual hierarchy
We optimized for SEO and performance

4. We configured multilingual support

Within the config.toml file, which is the site configuration, we defined the two available languages. It is explained in more detail in this guide

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

# Languages
[languages]

Conclusion

With this migration we have achieved a more modern and accessible website, maintaining the previous structure and content. Additionally, multilingual navigation has been added and performance has been improved.

In case of doubts with the code, it can be consulted in this GitLab repository.

Change of theme on a website developed with Hugo