1
0
forked from BgLUG/bglug.it

articolo migrazione-wp-hugo (#212)

Co-authored-by: amreo <amreo0x+github@protonmail.com>
Reviewed-on: BgLUG/bglug.it#212
Reviewed-by: Paolo Asperti <paspo@noreply.libreschool.org>
Co-authored-by: amreo <amreo@noreply.libreschool.org>
Co-committed-by: amreo <amreo@noreply.libreschool.org>
This commit is contained in:
amreo 2024-09-10 06:17:47 +00:00 committed by Paolo Asperti
parent 151cb19b28
commit 32d1815152
8 changed files with 153 additions and 0 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 78 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 81 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

View File

@ -0,0 +1,7 @@
<svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" stroke-width="27" aria-label="Logo" viewBox="0 0 1493 391">
<path fill="#ebb951" stroke="#fcd804" d="M1345.211 24.704l112.262 64.305a43 43 0 0 1 21.627 37.312v142.237a40 40 0 0 1-20.702 35.037l-120.886 66.584a42 42 0 0 1-41.216-.389l-106.242-61.155a57 57 0 0 1-28.564-49.4V138.71a64 64 0 0 1 31.172-54.939l98.01-58.564a54 54 0 0 1 54.54-.503z"/>
<path fill="#33ba91" stroke="#00a88a" d="M958.07 22.82l117.31 66.78a41 41 0 0 1 20.72 35.64v139.5a45 45 0 0 1-23.1 39.32L955.68 369.4a44 44 0 0 1-43.54-.41l-105.82-61.6a56 56 0 0 1-27.83-48.4V140.07a68 68 0 0 1 33.23-58.44l98.06-58.35a48 48 0 0 1 48.3-.46z"/>
<path fill="#0594cb" stroke="#0083c0" d="M575.26 20.97l117.23 68.9a40 40 0 0 1 19.73 34.27l.73 138.67a48 48 0 0 1-24.64 42.2l-115.13 64.11a45 45 0 0 1-44.53-.42l-105.83-61.6a55 55 0 0 1-27.33-47.53V136.52a63 63 0 0 1 29.87-53.59l99.3-61.4a49 49 0 0 1 50.6-.56z"/>
<path fill="#ff4088" stroke="#c9177e" d="M195.81 24.13l114.41 66.54a44 44 0 0 1 21.88 38.04v136.43a48 48 0 0 1-24.45 41.82L194.1 370.9a49 49 0 0 1-48.48-.23L41.05 310.48a53 53 0 0 1-26.56-45.93V135.08a55 55 0 0 1 26.1-46.8l102.8-63.46a51 51 0 0 1 52.42-.69z"/>
<path fill="#fff" d="M1320.72 89.15c58.79 0 106.52 47.73 106.52 106.51 0 58.8-47.73 106.52-106.52 106.52-58.78 0-106.52-47.73-106.52-106.52 0-58.78 47.74-106.51 106.52-106.51zm0 39.57c36.95 0 66.94 30 66.94 66.94a66.97 66.97 0 0 1-66.94 66.94c-36.95 0-66.94-29.99-66.94-66.94a66.97 66.97 0 0 1 66.93-66.94h.01zm-283.8 65.31c0 47.18-8.94 60.93-26.81 80.58-17.87 19.65-41.57 27.57-71.1 27.57-27 0-48.75-9.58-67.61-26.23-20.88-18.45-36.08-47.04-36.08-78.95 0-31.37 11.72-58.48 32.49-78.67 18.22-17.67 45.34-29.18 73.3-29.18 33.77 0 68.83 15.98 90.44 47.53l-31.73 26.82c-13.45-25.03-32.94-33.46-60.82-34.26-30.83-.88-64.77 28.53-62.25 67.75 1.4 21.94 11.65 59.65 60.96 66.57 25.9 3.63 55.36-24.02 55.36-39.04H944.4v-37.5h92.5V194l.02.03zm-562.6-94.65h42.29v112.17c0 17.8.49 29.33 1.47 34.61 1.69 8.48 4.81 14.37 11.17 19.5 6.37 5.13 13.8 6.59 24.84 6.59 11.2 0 14.96-1.74 20.66-6.6 5.69-4.85 9.12-9.46 10.28-16.53 1.15-7.07 3.07-18.8 3.07-35.18V99.38h42.28v108.78c0 24.86-1.07 42.43-3.21 52.69-2.14 10.27-6.08 18.93-11.82 26-5.74 7.06-13.42 12.69-23.03 16.88-9.62 4.19-22.16 6.28-37.65 6.28-18.7 0-32.87-2.28-42.52-6.85-9.66-4.57-17.3-10.5-22.9-17.8-5.61-7.3-9.3-14.95-11.08-22.96-2.58-11.86-3.88-29.38-3.88-52.55V99.38h.03zM93.91 299.92V92.7h43.35v75.48h71.92V92.7h43.48v207.22h-43.48v-90.61h-71.92v90.61z"/>
</svg>

After

Width:  |  Height:  |  Size: 2.5 KiB

View File

@ -0,0 +1,73 @@
---
title: "Wordpress to Hugo migration"
date: 2024-09-09T07:50:41+02:00
draft: false
slug: "2024-09-09-migrazione-wordpress-hugo"
type: post
image: wordpress-to-hugo.png
image_alt: "Image showing an arrow from wordpress to hugo. credits: amreo, CC0"
summary: Storytelling and details of the migration from Wordpress to Hugo.
tags:
- news
categories:
- News
---
We are pleased to announce that the migration from **WordPress** to **Hugo** is now complete, both for this website and for libreschool.org, with the publication of this site.
This project is the result of a long process that began in November of last year, starting with the first commit made by Paolo Asperti on November 26, 2023, for the website [LibreSchool.org](https://libreschool.org), and concluding with the publication of the new bglug.it website, which went live on September 3, 2024, during the first BGLUG evening meeting after the summer break.
This achievement was made possible thanks to the contributions of several people, but the main contributor was undoubtedly **Paolo Asperti**, who handled the technical aspects. It is also important to mention **Omar Lazzari**, who played a significant role in content management.
![Contributions to libreschool.org according to gitea](contributi-libreschool.org.png "Image credits: none, CC0")
![Contributions to bglug.it according to gitea](contributi-bglug.it.png "Image credits: none, CC0")
During the migration, nothing was lost. A tool was used to export the articles from WordPress and convert them into "Hugo format", with manual adjustments made later.
The source code for both websites is public and available [here](https://git.libreschool.org/BgLUG/bglug.it) for BGLUG.it and [here](https://git.libreschool.org/LibreSchool/libreschool.org) for LibreSchool.org.
## What is a static site generator?
Before talking about Hugo, it's important to understand what a static site generator is.
A [Static Site Generator (SSG)](https://en.wikipedia.org/wiki/Static_site_generator), is a software that takes text files (e.g. in markdown or rst format) as input and generates a website consisting of HTML, CSS, JS, images, and other files, but without any server-side executable logic (like PHP or a REST server).
![Diagram showing how a generic SSG works. It illustrates how the generator takes input template files such as head.html, footer.html, and sidebar.html, along with content files like contacts.md, home.md, and product.md, and produces an output file tree containing an index.html file and two directories, each with its own index.html file.
](static-site-generator.png "Image credits: [devPractical](https://devpractical.com/what-are-static-site-generators/)")
## What is Hugo?
![Hugo logo](hugo-logo-wide.png "Image credits: [Hugo](https://gohugo.io/)")
[Hugo](https://gohugo.io/) is one of the many free(as freedom) SSGs available on the market, and probably the most popular one. It was chosen for both of our websites because it is fast, flexible, and has a wide range of themes available. Specifically, we decided to use the [hugo-arcana](https://themes.gohugo.io/themes/hugo-arcana/) theme.
For us, this means that whenever we need to update the website, such as creating a new article, we simply modify the content files according to the instructions in our [wiki](https://git.libreschool.org/BgLUG/bglug.it/wiki) and publish the changes to the official site repository. From there, a series of automations managed by Gitea's CI/CD pipeline runs Hugo and uploads the generated files to the web server. These automations also ensure that the content is properly formatted and that nothing breaks.
One of the advantages of using SSGs is that they allow third parties to propose changes to the website, as long as those changes are approved by us.
## Why did we migrate from WordPress to Hugo?
[Wordpress](https://wordpress.com/it/) is the most popular [content management system](https://it.wikipedia.org/wiki/Content_management_system) and was the system we used before the migration. One of the advantages of a CMS is that it allows dynamic content management, meaning the content can change throughout the day or based on user interactions. CMSs also support features like payments, comments, and advanced user logic.
However, these advantages were not very relevant for us. Instead, the disadvantages of WordPress, such as the need for frequent updates and higher maintenance, slower loading times, and a larger attack surface (PHP + WordPress), were problematic. We had also experienced incidents where unwanted articles appeared on the site.
These were the main reasons we chose to migrate from WordPress to Hugo.
## Benefits of the migration to Hugo for BGLUG
The migration to Hugo has brought numerous benefits for us, including:
- **Faster load times**: The new site is significantly faster than the WordPress-based version, with much shorter load times.
- **Improved security**: Without the need to manage a complex backend like PHP or MySQL databases, the attack surface of the site has been drastically reduced.
- **Simplified maintenance**: Hugo requires less maintenance, eliminating the need for constant plugin and theme updates. We can be relatively confident that the website will still work perfectly even twenty years from now.
- **Simplified archiving**: Archiving is much simpler because it's automatically handled by Git. In ten years, if we want to review the old site, we just need to run *git checkout* and *hugo server* to see it as it was.
Another potential advantage is lower hosting costs, as hosting a static website is much cheaper due to its small size and the ability to host it literally anywhere, like on a CDN. However, for us, nothing has changed since the site continues to run on the same web server, which hosts other services as well.
## We Want You
In conclusion, we would be very happy to receive contributions from external people as well. If you're willing to help us, you're more than welcome! Not only for this project but also for other BGLUG activities.
Here are some useful links to get started:
- Repository of the website on Gitea: [https://git.libreschool.org/BgLUG/bglug.it](https://git.libreschool.org/BgLUG/bglug.it)
- BGLUG chat on Mattermost: [https://chat.bglug.it/](https://chat.bglug.it/)

View File

@ -0,0 +1,73 @@
---
title: "Migrazione da Wordpress a Hugo"
date: 2024-09-08T10:50:41+02:00
draft: false
slug: "2024-09-09-migrazione-wordpress-hugo"
type: post
image: wordpress-to-hugo.png
image_alt: "Immagine che mostra una freccia da wordpress a hugo. credits: amreo, CC0"
summary: Racconto e dettagli della migrazione da Wordpress a Hugo.
tags:
- news
categories:
- News
---
Siamo lieti di annunciare che la migrazione da **Wordpress** a **Hugo** è giunta a termine, sia per questo sito web che per quello di libreschool.org, con la pubblicazione di questo sito.
Questo progetto è il risultato di un lungo percorso iniziato a novembre dell'anno scorso, con il primo commit effettuato da Paolo Asperti il 26 novembre 2023 per il sito web [LibreSchool.org](https://libreschool.org), e concluso con la pubblicazione del nuovo sito web del bglug.it, avvenuta il 3 settembre 2024, durante la prima riunione serale del BGLUG dopo la pausa estiva.
Questo risultato è stato reso possibile grazie all'impegno di diverse persone, ma il contributo principale è stato senza dubbio di **Paolo Asperti**, che si è occupato della parte tecnica. È importante anche menzionare **Omar Lazzari**, che ha dato un contributo rilevante nella gestione dei contenuti.
![Contributi al sito libreschool.org secondo gitea](contributi-libreschool.org.png "Image credits: none, CC0")
![Contributi al sito bglug.it secondo gitea](contributi-bglug.it.png "Image credits: none, CC0")
Durante la migrazione non sì è perso nulla. È stato utilizzato uno strumento per esportare gli articoli da WordPress e convertirli in "formato Hugo", con successivi aggiustamenti manuali.
Il codice sorgente di entrambi i siti web è pubblico e disponibile [qui](https://git.libreschool.org/BgLUG/bglug.it) per BGLUG.it e [qui](https://git.libreschool.org/LibreSchool/libreschool.org) per LibreSchool.org.
## Cos'è un generatore di siti web statici?
Prima di parlare di Hugo, è importante capire cosa sia un generatore di siti web statici.
Un [generatore di siti web statici](https://en.wikipedia.org/wiki/Static_site_generator), o Static Site Generator (SSG), è un software che prende in input file testuali (ad esempio in formato markdown o rst) e genera un sito web composto da file HTML, CSS, JS, immagini e altri elementi, ma senza logica eseguibile lato server (come PHP o server REST).
![Schema che mostra il funzionamento di un generico SSG. Viene mostrato come il generatore prende in input dei file template come head.html, footer.html e sidebar.html, dei file contenuti come contacts.md, home.md e product.md e produce in output un albero di file con dentro un file index.html e due directory contenenti rispettivamente ciascuno un file index.html](static-site-generator.png "Image credits: [devPractical](https://devpractical.com/what-are-static-site-generators/)")
## Cos'è Hugo?
![Logo di hugo](hugo-logo-wide.png "Image credits: [Hugo](https://gohugo.io/)")
[Hugo](https://gohugo.io/) è uno dei tanti SSG liberi presenti sul mercato, ed è probabilmente il più popolare.
È stato scelto per entrambi i nostri siti web web per la sua velocità, flessibilità e l'ampia disponibilità di temi. In particolare, abbiamo deciso di adottare il tema [hugo-arcana](https://themes.gohugo.io/themes/hugo-arcana/).
Per noi, questo significa che ogni volta che dobbiamo modificare il sito web, come per creare un nuovo articolo, è sufficiente aggiornare i file dei contenuti seguendo le istruzioni della nostra [wiki](https://git.libreschool.org/BgLUG/bglug.it/wiki) e pubblicare le modifiche sul repository ufficiale del sito. Da lì, una serie di automazioni gestite da CI/CD di Gitea eseguono Hugo e caricano i file generati sul server web. Queste automazioni controllano anche che i contenuti siano fatti come sì deve e che non spacchino qualcosa.
Uno dei vantaggi degli SSG è che permettono a terzi di proporre modifiche al sito web, purché queste vengano accettate da noi.
## Perché abbiamo migrato da Wordpress a Hugo?
[Wordpress](https://wordpress.com/it/) è il [sistema di gestione contenuti](https://it.wikipedia.org/wiki/Content_management_system) più popolare nonché il sistema che utilizzavamo prima della migrazione. Uno dei vantaggi di un CMS è la gestione dinamica dei contenuti, che possono cambiare durante la giornata o in base alle interazioni degli utenti. Permettono anche di gestire pagamenti, commenti e logiche avanzate per gli utenti.
Tuttavia, questi vantaggi non erano rilevanti per noi. Invece, gli svantaggi di WordPress, come la necessità di aggiornamenti frequenti e maggiore manutenzione, tempi di caricamento più lenti e una maggiore superficie di attacco (PHP + WordPress), erano problematici. Avevamo riscontrato anche episodi di comparsi articoli non voluti.
Queste sono state le principali ragioni per cui abbiamo scelto di migrare da WordPress a Hugo.
## Vantaggi della migrazione a Hugo per il BGLUG
La migrazione a Hugo ha portato numerosi vantaggi per noi, tra cui:
- **Maggiore velocità**: Il nuovo sito è notevolmente più veloce rispetto alla versione basata su wordpress, con tempi di caricamento molto ridotti.
- **Sicurezza migliorata**: Senza la necessità di gestire un backend complesso come PHP o database MySQL, la superficie d'attacco del sito è stata drasticamente ridotta.
- **Manutenzione semplificata**: Hugo richiede meno manutenzione, eliminando la necessità di continui aggiornamenti di plugin e temi. Possiamo essere relativamente sicuri che il sito web funzionerà perfettamente anche tra vent'anni
- **Archiviazione semplificata**: l'archiviazione è molto più semplice perché viene gratis con git. Tra dieci anni se vorremmo rivedere il vecchio sito basta andare indietro con *git checkout* e lanciare *hugo server*.
Ci sarebbe anche il vantaggio dei costi minori in quanto l'hosting di un sito web statico costa notevolmente meno in quanto occupa relativamente poco spazio e può essere messo letteralmente ovunque, come su una CDN. Tuttavia a noi non è cambiato nulla perché continua a girare sullo stesso web server, ove sono presenti altri servizi.
## Vogliamo te
In conclusione, ci farebbe molto piacere ricevere contributi anche da parte di persone esterne. Se hai voglia di aiutarci, sei il benvenuto! Non solo per questo progetto, ma anche per le altre attività del BGLUG.
Ecco alcuni link utili per cominciare:
- Repository del sito su Gitea: [https://git.libreschool.org/BgLUG/bglug.it](https://git.libreschool.org/BgLUG/bglug.it)
- Chat del BGLUG su Mattermost: [https://chat.bglug.it/](https://chat.bglug.it/)

Binary file not shown.

After

Width:  |  Height:  |  Size: 61 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 109 KiB