Tempo di lettura stimato: 4 minuti

Vuoi creare un sito web semplice e super veloce? Partiamo da un caso pratico: un giornalista indipendente che vuole presentare i suoi articoli sul suo sito. Ottima idea! Usiamo Hugo, uno strumento che rende tutto più facile. Immagina un sito dove la notizia più importante è grande in prima pagina, sotto ci sono altre tre notizie con un piccolo riassunto, a lato un menu con le notizie in evidenza e in fondo i contatti del giornalista, più i link a pagine come “Copyright” e “Privacy”. Vediamo come fare, in pratica, senza troppi tecnicismi.

Il “cervello” del tuo sito: la struttura e i contenuti

Hugo è un generatore di “siti statici”. Questo significa che, invece di creare pagine ogni volta che qualcuno visita il tuo sito (come fanno i siti più complessi), Hugo prepara tutte le pagine in anticipo, una volta per tutte. Questo rende il tuo sito velocissimo e molto sicuro.

Per Hugo, il cuore di tutto sono i file di testo. Tu scrivi i tuoi articoli in un formato semplice chiamato Markdown (sono file che finiscono con .md), e Hugo li trasforma in pagine web vere e proprie.

Ecco come potresti organizzare le “cartelle” (directory) e i “fogli” (file) del tuo sito:

.
├── content/              # Qui metti tutti i tuoi articoli e le pagine statiche
│   ├── posts/            # La cartella per tutti gli articoli del giornalista
│   │   ├── la-crisi-idrica-globale.md  # Il tuo articolo principale (la "notizia in grande")
│   │   ├── innovazione-agricola.md     # Un altro articolo (secondario)
│   │   └── come-funziona-hugo.md       # Un terzo articolo (secondario)
│   ├── chi-sono.md       # La pagina "Chi sono" del giornalista
│   ├── contatti.md       # La pagina "Contatti"
│   ├── copyright.md      # La pagina "Copyright"
│   └── privacy.md        # La pagina "Privacy Policy"
├── layouts/              # Qui ci sono le "istruzioni" su come far vedere le tue pagine
│   ├── _default/         # Le istruzioni base
│   │   ├── baseof.html   # Il modello fondamentale per ogni pagina
│   │   └── single.html   # Come far vedere un singolo articolo
│   ├── index.html        # Le istruzioni speciali per la pagina iniziale (homepage)
│   └── partials/         # Pezzetti di istruzioni che puoi riusare
│       ├── footer.html   # Le istruzioni per il "piè di pagina" (contatti, copyright)
│       └── sidebar.html  # Le istruzioni per il "menu laterale" (notizie in evidenza)
├── static/               # Qui metti foto, fogli di stile (CSS) e script (JS)
│   ├── images/
│   │   ├── crisi-idrica.jpg    # Foto per l'articolo principale
│   │   └── droni-agricoltura.jpg # Foto per un articolo secondario
├── public/               # Questa cartella è il tuo sito web pronto!
└── config.toml           # Il file con tutte le impostazioni del tuo sito

Scrivere un articolo in markdown: semplice e veloce

Apriamo uno dei file .md per capire come si scrive un articolo. Prenderemo come esempio la nostra “notizia in grande”: content/posts/la-crisi-idrica-globale.md

---
title: "La Crisi Idrica Globale: Un'Analisi Approfondita"  # Il titolo che vedrai sul sito
date: 2023-10-26T10:00:00+02:00    # La data di pubblicazione
draft: false                       # Metti 'false' per pubblicarlo, 'true' per lasciarlo in bozza
description: "Un'indagine dettagliata sulle cause e le possibili soluzioni alla crescente scarsità d'acqua a livello mondiale." # Un piccolo riassunto
image: "/images/crisi-idrica.jpg"  # La foto principale dell'articolo
featured: true                     # UN'IMPOSTAZIONE SPECIALE: dice a Hugo che questo articolo è importante e va in evidenza!
categories:
  - Ambiente
tags:
  - acqua
  - sostenibilità
author: "Nome Cognome Giornalista" # Chi ha scritto l'articolo
---

## La Crisi Idrica Globale: Un'Emergenza Silenziosa

La disponibilità di acqua dolce è una risorsa sempre più critica a livello globale. Mentre molte aree del mondo soffrono già di siccità estreme...

### Le Cause Profonde della Scarsità

Il cambiamento climatico gioca un ruolo preponderante, alterando i cicli delle precipitazioni...

### Soluzioni e Strategie per il Futuro

Per affrontare questa crisi, è necessario un approccio multilivello che includa:

* **Tecnologie innovative:** Desalinizzazione, riutilizzo delle acque reflue...
* **Politiche di gestione sostenibile:** Regolamentazione dell'uso dell'acqua...

Cosa significa ogni parte?

• La parte tra i tre trattini (---): Questa è la parte più importante per Hugo e si chiama Front Matter. È come una serie di etichette che tu attacchi al tuo articolo. Dici a Hugo qual è il titolo, la data, se l’articolo è una bozza o è pronto, una breve descrizione (che può apparire nella lista delle notizie), l’immagine associata e se è un articolo in evidenza (featured: true). Puoi anche aggiungere categorie e tag per organizzare meglio i tuoi contenuti, e il nome dell’autore.
• La parte sotto i tre trattini: Questo è il testo vero e proprio del tuo articolo. Lo scrivi usando la semplice formattazione Markdown:
  • Un # o ## all’inizio di una riga crea un titolo (più #, più piccolo il titolo).
  • Gli asterischi (*) servono per fare gli elenchi.
  • Il testo normale è semplicemente un paragrafo.

---

Come Hugo “disegna” il tuo sito

Una volta che hai scritto i tuoi articoli in Markdown, Hugo usa le “istruzioni” che si trovano nella cartella layouts/ per trasformarli in un sito web.

• Nella pagina iniziale (index.html sotto layouts/), Hugo leggerà il tuo file la-crisi-idrica-globale.md e, vedendo featured: true, lo mostrerà grande e in evidenza. Poi cercherà altri tre articoli (come innovazione-agricola.md) e mostrerà solo il loro titolo e la description che hai inserito.
• Il menu laterale (sidebar.html sotto layouts/partials/) potrà mostrare i link a tutti gli articoli che hai contrassegnato con featured: true.
• Il footer (footer.html sotto layouts/partials/) conterrà le informazioni personali del giornalista e i link alle pagine “Copyright” (copyright.md) e “Privacy Policy” (privacy.md), che sono semplici file Markdown con il loro testo.

Conclusioni

Con questa impostazione, anche senza essere un esperto di programmazione, puoi creare un sito pulito, veloce e funzionale per un giornalista indipendente, concentrandoti solo sulla scrittura dei contenuti. Hugo si occuperà della parte più complessa, trasformando le tue parole in un sito web navigabile.