Hébergement Eleventy (11ty)

Eleventy (11ty) prend vos gabarits et votre Markdown et écrit du HTML simple dans _site/, sans framework côté client à moins d’en ajouter un. Un dossier de fichiers simples est ce qu’il y a de plus facile à héberger : lancez le build, puis npx lobsite, et le site est en ligne à une adresse *.lobsite.app en HTTPS. Vous pouvez aussi déposer _site/ dans la zone ci-dessus.

Comment ça marche

1. Buildez le site avec npx @11ty/eleventy (ou votre npm run build). Eleventy l’écrit dans _site/.
2. Lancez npx lobsite dans le projet. Il trouve _site/ et le déploie. Le premier déploiement ne demande pas de compte et dure 6 heures.
3. Gardez-le grâce au lien de récupération, dans un compte gratuit. Le dossier est mémorisé dans lobsite.toml, donc les déploiements suivants vont sur le même site.

Les réglages Eleventy qui comptent sur Lobsite

// eleventy.config.js
export default function (eleventyConfig) {
  eleventyConfig.addPassthroughCopy("img");
  eleventyConfig.addPassthroughCopy("css");
}

export const config = {
  dir: { input: "src", output: "_site" },
};

• La copie passthrough est ce qui amène images, polices et CSS dans _site/. Un fichier qui n’est ni un gabarit ni copié ne sera pas déployé : s’il manque quelque chose sur le site en ligne, vérifiez d’abord sa présence dans _site/.
• pathPrefix reste à / : le site est servi depuis la racine de son adresse.
• Le dossier de sortie peut rester _site. Si vous le changez, indiquez le dossier une fois (npx lobsite ./dist) et il est mémorisé dans lobsite.toml.

Permaliens, images et fichiers périmés

Eleventy écrit about.md sous la forme about/index.html, qui s’ouvre à /about/ ; un permalien qui se termine par .html s’ouvre sans l’extension. Les images traitées par @11ty/eleventy-img sont écrites pendant le build : elles se déploient comme n’importe quel fichier, et les images inchangées ne sont pas renvoyées. Comme la plupart des générateurs, Eleventy ne vide pas _site/ avant un build : une page renommée laisse son ancien fichier derrière elle. Supprimez _site/ avant le build (beaucoup de starters le font dans le script build) pour ne déployer que les pages actuelles.

Hébergeurs Eleventy comparés

Netlify est depuis longtemps la maison par défaut des sites Eleventy, et builde depuis Git. Lobsite vous convient quand vous buildez en local ou en CI et voulez le résultat en ligne en une commande, depuis un terminal ou un agent IA, sans rien à configurer.

Questions fréquentes

11ty, c’est la même chose qu’Eleventy ?

Oui. 11ty est le nom court d’Eleventy, et le paquet s’appelle @11ty/eleventy. Tout ce qui figure sur cette page vaut pour les deux noms.

Pourquoi mes images manquent-elles sur le site Eleventy déployé ?

Elles ne sont probablement pas dans _site/. Ajoutez une copie passthrough pour le dossier (eleventyConfig.addPassthroughCopy("img")), rebuildez et déployez.

Le rendu serverless ou edge d’Eleventy fonctionne-t-il sur Lobsite ?

Non. Lobsite sert les fichiers de _site/ ; les fonctionnalités qui génèrent les pages à chaque requête exigent un hébergeur qui exécute des fonctions. Les pages construites à l’avance, soit la plupart des sites Eleventy, fonctionnent toutes.

Puis-je donner une page 404 personnalisée à mon site Eleventy ?

Oui. Créez un gabarit avec permalink: 404.html ; Lobsite le sert avec un statut 404 pour toute adresse qui n’existe pas.