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
- Installation et mise à jour automatique via
- Voir les mises en pages déjà implémentées
- DSFR :
- 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
.
- Ajouter de nouveaux conteneurs markdown dans le fichier
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]
danscontent
, un nouveau fichier_data/i18n/[lang]/index.js
et l'inclure dans_data/i18n/index.js
.
- Pour ajouter une nouvelle traduction, ajouter un dossier
- 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.
- Celui-ci sera copié tel quel dans le dossier de sortie. Cela signifie que
- 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)
- Site de la start-up Médiation Logement (code source : https://github.com/betagouv/mediation-logement)
- Portail du BARRI du CISIRH (code source : https://github.com/CISIRH/portail-barri)
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.