Eleventy (11ty) neemt je sjablonen en Markdown en schrijft gewone HTML naar _site/, zonder framework aan de clientkant tenzij je er een toevoegt. Een map met gewone bestanden is het makkelijkst te hosten: voer de build uit, dan npx lobsite, en de site staat live op een *.lobsite.app-adres met HTTPS. Je kunt _site/ ook naar het vak hierboven slepen.
Zo werkt het
- Bouw de site met
npx @11ty/eleventy(of jenpm run build). Eleventy schrijft hem naar_site/. - Voer
npx lobsiteuit in het project. Het vindt_site/en deployt die. De eerste deploy heeft geen account nodig en duurt 6 uur. - Houd hem met de claimlink, in een gratis account. De map wordt opgeslagen in
lobsite.toml, zodat latere deploys naar dezelfde site gaan.
Eleventy-instellingen die ertoe doen op Lobsite
// eleventy.config.js
export default function (eleventyConfig) {
eleventyConfig.addPassthroughCopy("img");
eleventyConfig.addPassthroughCopy("css");
}
export const config = {
dir: { input: "src", output: "_site" },
};
- Passthrough copy is hoe afbeeldingen, lettertypen en CSS in
_site/terechtkomen. Een bestand dat geen sjabloon is en niet wordt gekopieerd, wordt niet gedeployd; ontbreekt er iets op de live site, kijk dan eerst of het in_site/staat. pathPrefixblijft/: de site wordt vanaf de basis van zijn adres geserveerd.- De uitvoermap kan
_siteblijven. Verander je hem, geef de map dan één keer op (npx lobsite ./dist) en hij wordt onthouden inlobsite.toml.
Permalinks, afbeeldingen en verouderde bestanden
Eleventy schrijft about.md als about/index.html, dat opent op /about/; een permalink die eindigt op .html opent zonder de extensie. Afbeeldingen die @11ty/eleventy-img verwerkt, worden tijdens de build geschreven, dus ze worden gedeployd zoals elk ander bestand, en ongewijzigde afbeeldingen worden niet opnieuw geüpload. Net als de meeste generatoren maakt Eleventy _site/ niet leeg voor een build: een hernoemde pagina laat zijn oude bestand achter. Verwijder _site/ voor het bouwen (veel starters doen dat in het build-script) om alleen de huidige pagina's te deployen.
Bestanden worden op hun hash opgeslagen. Een ongewijzigde site opnieuw deployen uploadt 0 bytes.
Bekijk een voorbeeld voordat het live gaat. Zet in één klik terug, inclusief doorverwijzingen.
Elke site krijgt vanaf de eerste deploy een *.lobsite.app-adres met HTTPS.
Laat een formulier wijzen naar /_lobsite/forms/contact. Spamfilter inbegrepen.
Een deploy zonder account is 6 uur live. Met de claimlink houd je hem, gratis.
Doorverwijzingen, headers en formulieren staan in lobsite.toml en reizen mee met elke deploy.
Eleventy-hosts vergeleken
| Lobsite | Netlify | Cloudflare Pages | GitHub Pages | |
|---|---|---|---|---|
| Bouwt Eleventy voor je | Nee: je deployt _site/ |
Ja | Ja | In GitHub Actions |
| Account vóór de eerste deploy | Nee: 6 uur live, daarna gratis houden | Ja | Ja | Ja, en een repository |
| Alleen gewijzigde bestanden uploaden | Ja | Ja | Ja | Via Git |
| Voorbeeld-URL voor elke deploy | Ja | Ja | Ja | Nee |
| Formulieren zonder backend | Ja, zodra de site in een account staat | Ja | Nee | Nee |
| Eigen domein | Ja, gratis | Ja | Ja | Ja |
Netlify is al lang het standaardthuis voor Eleventy-sites en bouwt vanuit Git. Lobsite past bij je als je lokaal of in CI bouwt en het resultaat met één opdracht online wilt, vanuit een terminal of een AI-agent, zonder iets te configureren.
Veelgestelde vragen
Is 11ty hetzelfde als Eleventy?
Ja. 11ty is de korte naam van Eleventy, en het pakket is @11ty/eleventy. Alles op deze pagina geldt voor beide namen.
Waarom ontbreken mijn afbeeldingen op de gedeployde Eleventy-site?
Ze staan waarschijnlijk niet in _site/. Voeg een passthrough copy toe voor de map (eleventyConfig.addPassthroughCopy("img")), bouw opnieuw en deploy.
Werkt de serverless- of edge-rendering van Eleventy op Lobsite?
Nee. Lobsite serveert de bestanden in _site/; functies die pagina's per verzoek renderen, hebben een host nodig die functions draait. Vooraf gebouwde pagina's, de meeste Eleventy-sites dus, werken allemaal.
Kan ik mijn Eleventy-site een eigen 404-pagina geven?
Ja. Maak een sjabloon met permalink: 404.html; Lobsite serveert het met status 404 voor elk adres dat niet bestaat.