Temps de lecture estimé: 4 minutes

Vous souhaitez créer un site Web simple et super rapide? Commençons par un cas pratique: Un journaliste indépendant qui veut présenter ses articles sur son site. Excellente idée! Nous utilisons Hugo, Un outil qui rend tout plus facile. Imaginez un site où le les nouvelles plus importantes C'est super sur la première page, ci-dessous il y a Trois autres nouvelles avec un petit résumé, sur le côté un Menu avec des nouvelles évidentes Et fondamentalement je Contacts du journaliste, plus des liens vers des pages comme “Droit d'auteur” et “Protection des données”. Voyons comment, en pratique, Sans trop de détails techniques.

Le “cerveau” de votre site: la structure et le contenu

Hugo est un générateur de “sites statiques”. Cela signifie que, Au lieu de créer des pages à chaque fois que quelqu'un visite votre site (Comment font les sites les plus complexes), Hugo prépare toutes les pages à l'avance, une fois pour toutes. Cela fait votre site rapide et beaucoup assurer.

Pour Hugo, Le cœur de tout sont les fichiers texte. Vous écrivez vos articles dans un format simple appelé Réduction (sont des fichiers qui se terminent avec .md), Et Hugo les transforme en vraies pages Web.

Voici comment vous pourriez organiser le “dossier” (répertoire) e i “feuilles” (fichier) de votre site:

.
├── 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

Écrivez un article dans Markdown: Simple et rapide

Nous ouvrons l'un des fichiers .md Pour comprendre comment rédiger un article. Nous prendrons le nôtre comme exemple “grande nouvelle”: 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...

Que signifie chaque partie?

• La partie entre les trois sections (---): C'est la partie la plus importante pour Hugo et s'appelle Avantage. C'est comme une série d'étiquettes que vous attaquez sur votre article. Vous dites à Hugo quel est le titre, le données, Si l'article en est un lampe ou sont prêts, un court Description (qui peut apparaître dans la liste des nouvelles), la’tableau associé et s'il s'agit d'un article en évidence (featured: true). Vous pouvez également ajouter catégories et tag Pour mieux organiser votre contenu, et l' nom de l'auteur.
• La partie sous les trois sections: C'est le Texte réel de votre article. Écrivez-le en utilisant un formatage simple Réduction:
  • A # le ## Au début d'une ligne, il crée un titre (plus #, le titre plus petit).
  • Les astérisques (*) Ils sont utilisés pour faire le listes.
  • Le texte normal est simplement un paragraphe.

---

Comme Hugo “dessin” Votre site

Une fois que vous avez écrit vos articles dans Markdown, Hugo utilise le “instructions” Trouvé dans le dossier layouts/ Pour les transformer en site Web.

• Sur la page initiale (index.html au-dessous layouts/), Hugo lira votre fichier la-crisi-idrica-globale.md et, voir featured: true, Il le montrera grand et en évidence. Ensuite, il cherchera trois autres articles (venir innovazione-agricola.md) et ne montrera que leur titre et le description vous avez inséré.
• Le moins latéral (sidebar.html au-dessous layouts/partials/) sera en mesure de montrer des liens vers tous les articles dont vous avez marqué featured: true.
• Le footer (footer.html au-dessous layouts/partials/) contiendra les informations personnelles du journaliste et les liens vers les pages “Droit d'auteur” (copyright.md) et “politique de confidentialité” (privacy.md), qui sont des fichiers de marque simple avec leur texte.

Conclusions

Avec ce paramètre, Même sans être un expert en programmation, Vous pouvez créer un site propre, Rapide et fonctionnel pour un journaliste indépendant, Se concentrer uniquement sur la rédaction de contenu. Hugo s'occupera de la partie la plus complexe, Transformer vos mots en un site Web navigable.