David Le Montagner Home Page David Le Montagner

Créer son blog avec 11ty (Eleventy)

Choix de la solution #

Créer un blog en 2023, une idée qui paraît saugrenue et on pourrait penser que les solutions répondant à ce besoin ne courent plus les rues. C'est pourtant tout le contraire. Outre le célèbre WordPress, il existe désormais une multitude de solutions adoptant des philosophies variées. Ainsi, le moteur de blog à l'ancienne, s'appuyant sur des pages dynamiques et une base de données, a perdu beaucoup de terrain chez les développeurs au profit des générateurs de site statique (SSG). Et pour cause, les avantages de cette approche sont nombreux: coût d'hébergement minime voire inexistant, facilité de déploiement, temps de réponse excellent, sécurité accrue.

Lorsque j'ai décidé de créer ce blog, je savais donc que j'opterais pour ce type de solutions. Alors pourquoi 11ty sachant que les générateurs de site statique les plus populaires sont actuellement Jekyll, Gatsby ou encore Hugo? Je n'ai pas étudié en profondeur chacun d'entre eux mais 11ty se positionne comme un nouveau challenger et il semble clairement plus adapté pour un besoin basique comme le mien. La mise en route se fait littéralement en quelques minutes et son architecture est simple à comprendre. Par ailleurs, il propose suffisamment de mécanismes d'extension pour que je puisse aller plus loin si je le souhaite un jour.

Version initiale #

Initialisation #

Pour démarrer, j'ai décidé d'utiliser le kit de démarrage officiel. En effet, je cherche à pouvoir écrire rapidement et à évaluer ce que je retire de cette expérience. Je veux également pouvoir attribuer un ou des tags aux articles et avoir une mise en forme du code source. Ces besoins sont couverts par le kit de démarrage alors c'est parti!

mkdir my-new-blog
cd my-new-blog
git clone https://github.com/11ty/eleventy-base-blog.git .
npm install
npx @11ty/eleventy --serve

A noter qu'il y a de nombreux autres kits de démarrage et qu'il est même possible de démarrer avec un projet totalement vierge afin de construire son template from scratch.

Et voilà, nous sommes prêts à écrire nos premiers articles. Pour ce faire, il faut créer un fichier Markdown dans le répertoire "content/posts". Plusieurs exemples sont présents dans le kit et permettent d'illustrer les fonctionnalités de base.

Avant de poursuivre, j'ai apporté quelques modifications CSS & HTML pour ajuster le design à mon goût. Ces retouches sont très légères, je ne pense pas qu'il soit intéressant de les détailler. Toutefois, si vous souhaitez récupérer ces modifications pour votre blog, le lien vers le code source est disponible en bas de l'article.

Metadonnées #

Le fichier de metadonnées _data/metadata.js permet de paramétrer les quelques éléments qui seront propres à votre blog comme le titre, la description etc...

module.exports = {
	title: "David Le Montagner",
	url: "https://david.le-montagner.fr",
	language: "fr",
	description: "Journal de veille techno personnelle de David Le Montagner #dev #archi #java",
	author: {
		name: "David Le Montagner",
		url: "https://david.le-montagner.fr"
	}
}

Traduction en français #

La traduction en français est simple:

  // Filters
  eleventyConfig.addFilter("readableDate", (dateObj, format, zone) => {
    // Formatting tokens for Luxon: https://moment.github.io/luxon/#/formatting?id=table-of-tokens
   return DateTime.fromJSDate(dateObj, { zone: zone || "utc" })
-      .toFormat(format || "dd LLLL yyyy");
+      .setLocale("fr").toFormat(format || "dd LLLL yyyy");
  });

J'envisagerai une implémentation i18n si je compte traduire les articles en anglais dans le futur. A noter que des outils semblent déjà disponible dans 11ty pour ce besoin.

Déploiement #

Pour rendre ce blog disponible en ligne, je vais utiliser mon hébergement actuel. L'upload sur le serveur de mon hébergeur se fait via le protocole FTP.

J'ai donc écrit un script de déploiement Gitlab qui génère les pages puis les envoie sur le serveur FTP de mon hébergeur. La configuration de la connexion au serveur se fait via les variables d'environnements FTP_HOST, FTP_USERNAME, FTP_PASSWORD et FTP_DESTINATION.

J'ai également créé la variable ELEVENTY_BUILD_ARGS pour permettre de passer des arguments lors de la génération des pages Eleventy. Par exemple, lors de mes premiers tests, ceci m'a permis de préciser que les fichiers seront dans le sous-répertoire "11tyTest" du domaine (en passant le paramètre "--pathprefix=11tyTest"). Aujourd'hui, je ne passe plus d'argument, mais la fonctionnalité me paraît suffisamment intéressante pour être conservée.

image: node:current-alpine

stages:
  - build
  - deploy

build:
  stage: build
  script:
    # Compile production assets
    - npm install
    - npx @11ty/eleventy $ELEVENTY_BUILD_ARGS
  artifacts:
    paths:
      - _site/
    expire_in: 1 day

deploy:
  stage: deploy
  needs: ["build"]
  script:
    # Test if deployment setup has been done
    - if [[ -z "$ " || -z "$FTP_USERNAME" || -z "$FTP_PASSWORD" || -z "$FTP_DESTINATION" ]]; then exit 0; fi
    # Install lftp
    - apk add --no-cache lftp npm
    # Sync files using lftp mirror feature
    # Exclude all hidden files except htaccess (to handle 404)
    # --verbose for traceability
    # --reverse to set local files as being the source of the sync
    # --delete for deletion of files not present at remote site
    - cd _site
    - lftp -e "open $FTP_HOST; user $FTP_USERNAME $FTP_PASSWORD; mirror -X .* -X .*/ -X google* -I .htaccess --no-symlinks --verbose --reverse --delete ./ $FTP_DESTINATION; bye"
  when: manual

A noter que vous pouvez héberger votre site 11ty sur des hébergeurs de pages statiques gratuits tels que Netlify, GitHub Pages, GitLab Pages etc... et ajuster le script de déploiement en fonction.

Licence #

Lorsque du contenu est mis à disposition en ligne, il est important de se poser la question de la licence. J'ai opté pour deux types de licences:

Code source #

Retrouvez le code source de ce blog dans ce repository

Conclusion #

Mission accomplie: mon blog est prêt et je n'ai plus qu'à écrire des articles 🙂 Je suis allé au plus simple et nous nous retrouverons peut être dans quelques mois pour faire un premier bilan de l'utlisation du 11ty!