Un dépôt pour démarrer un site statique au DSFR avec le générateur Eleventy, déployé pour démonstration sur GitHub Pages. Pour d'autres exemples de réutilisation, cf. Démonstration et réutilisations.

• Style :
  • DSFR :
    • Installation et mise à jour automatique via npm.
    • Voir les composants déjà implémentés
  • Voir les mises en pages déjà implémentées
• a11y et responsivity : Respecte les recommandations du DSFR.
• i18n : Prise en charge de l'internationalisation des textes et contenus via plusieurs filtres et le système d'i18n d'Eleventy.
• Navigation : Utilise le système de navigation d'Eleventy et gère la navigation de second niveau.
• Syntaxe markdown : Améliorée via l'ajout de conteneurs personnalisés.
• Images : Utilise l'utilitaire d'image d'Eleventy pour traiter les images (par défaut pour certains composants, par exemple le composant card.njk).
• Recherche : Utilise pagefind pour la recherche.
• Pagination : Utilise le système de pagination d'Eleventy et gère la pagination de second niveau.
• Flux RSS : Utilise le plugin RSS d'Eleventy.
• Calendrier : Utilise la bibliothèque ics pour générer un calendrier calendar.ics à la racine du site, ainsi que les événements .ics associés, à partir d'événements.
• Mesure d'audience : Intègre la solution matomo.
• Pages déjà générées :
  • Pages d'accueil, À propos, section Blog (en français et en anglais).
  • Flux RSS pour Atom et JSON
  • Plan du site et sitemap.xml
  • Page non trouvée (404)
  • Les pages obligatoires liées aux obligations légales : “accessibilité : non/partiellement/totalement conforme”, mentions légales, données personnelles et gestion des cookies.

Cloner le dépôt :

git clone https://github.com/codegouvfr/eleventy-dsfr.git my-site-name

Naviguer dans le dossier :

cd my-site-name

Installer les dépendances :

npm install

Exécuter Eleventy :

Construire un livrable, indexé avec pagefind pour la recherche :

npm run build

L'exécuter sur le serveur de développement local :

npm start

Ou exécuter un mode de débogage.

• Modifier les fichiers _data/metadata.js et _data/data.js pour renseigner les informations du site.
• Modifier le fichier package.json pour modifier les informations du dépôt.
• Compléter les pages obligatoires : content/fr/accessibility, content/fr/personal-data, content/fr/legal.

• Modifier le fichier eleventy.config.js pour configurer les paramètres d'Eleventy différemment.
• Ajouter des composants du DSFR dans le dossier _includes/components et des mises en page dans le dossier _includes/layouts.
  • Ajouter de nouveaux conteneurs markdown dans le fichier markdown-custom-containers.js.

Voir aussi la documentation des composants

• Ajouter des chaînes de caractères localisées dans le dossier _data/i18n/[lang]/index.js.
  • Pour ajouter une nouvelle traduction, ajouter un dossier [lang] dans content, un nouveau fichier _data/i18n/[lang]/index.js et l'inclure dans _data/i18n/index.js.
• Ajouter des styles personnalisés et des images dans le dossier public.
  • Celui-ci sera copié tel quel dans le dossier de sortie. Cela signifie que ./public/css/* persistera dans ./_site/css/* après la construction du livrable.
• Compléter le README et la documentation. 😀

Voir la documentation des fonctionnalités et du Markdown

• Voir un exemple de worklow de déploiement sur GitHub Pages sur la branche gh-pages.

En cas d'erreur lors du build :

Error: Get Pages site failed
Error: HttpError: Not Found

Essayer cette configuration.

• [OPTIONNEL] Configurer la redirection de toutes les URLs des pages dont la langue est celle par défaut.

La suite de la documentation (composants, fonctionnalités) est disponible dans content/fr/blog/posts ou directement sur le site de démonstration.

Pour une démonstration, voir la GitHub Pages correspondante.

• Site de la mission logiciels libres de la DINUM (code source : https://github.com/codegouvfr/codegouvfr-website).
• Site du cadre de cohérence technique du MI (code source : https://github.com/dnum-mi/cct-mi)
• Site de documentation pour cartes.gouv.fr (code source : https://github.com/IGNF/cartes.gouv.fr-documentation)
• Partie blog du site de DiaLog (code source : https://github.com/MTES-MCT/dialog/tree/main/blog)

Le dépôt est publié sous licence MIT pour le code et sous licence Etalab 2.0 pour les autres contenus.

Il est maintenu par la mission logiciels libres de la DINUM.

• 1F3DB.svg par Martin Wehl sous licence CC BY-SA 4.0.